body{display:grid;gap:1rem;grid-template-rows:auto 1fr;height:100vh;max-height:900px}body main{display:grid;gap:3rem;place-content:center;align-content:center;margin:0}body main #enter{border:1px solid #777;width:280px;border-top:3px solid var(--color-main)}body main #enter .hint-icon{margin-left:.25rem}body main #enter>#form{padding:1rem;padding-bottom:1.5rem;display:flex;flex-direction:column;gap:1rem;align-items:center}body main #enter>#form>div.enter-option{width:100%;display:flex;flex-direction:column;gap:1rem;align-items:center}body main #enter>#form>div.enter-option>h3{margin:0}body main #enter>#form>div.enter-option>.divider{position:relative;display:flex;align-items:center;color:--font-color}body main #enter>#form>div.enter-option>.divider::before,body main #enter>#form>div.enter-option>.divider::after{content:"";background-color:--font-color;width:80%;position:absolute;height:1px;display:flex}body main #enter>#form>div.enter-option>.divider::before{left:-100%}body main #enter>#form>div.enter-option>.divider::after{left:calc(120%)}body main #enter>#form>div.enter-option>#file-selector{width:100%;display:flex;flex-direction:column;gap:1rem}body main #enter>#form>div.enter-option>#file-selector>input[type="file"]{width:100%;text-align:center}body main #enter>#form>div.enter-option>#file-selector>input[type="file"]::file-selector-button{display:none}body main #enter>#form>div.enter-option>#file-selector>label{cursor:pointer;width:100%;border:1px solid #777;padding:.5rem;display:flex;align-items:center;gap:.5rem;font-size:.8rem}body main #enter>#form>div.enter-option>#file-selector>label>img{filter:var(--logo-generic-filter);width:1.3rem}body main #enter>#form>div.enter-option>#file-selector>label>span{width:100%;text-align:center}body main #enter>#form>div.enter-option>a{color:inherit;text-decoration:none;border:1px solid #777;padding:.5rem;display:flex;align-items:center;gap:.5rem;width:100%;font-size:.8rem}body main #enter>#form>div.enter-option>a>img{filter:var(--logo-invert-dark);width:1.3rem}body main #enter>#form>div.enter-option>a>span{width:100%;text-align:center}body main #enter>#form>div.enter-option>form{display:flex;width:100%}body main #enter>#form>div.enter-option>form>#key{flex-grow:1;padding:.5rem;font-size:.75rem}body main #enter>#form>div.enter-option .error{display:none;font-size:.8rem}body main #enter>button#enter-submit{display:flex;align-items:center;width:100%;background-color:var(--color-main);color:var(--color-main-font-color);font-weight:bold;border:0;padding:.5rem;justify-content:center}body main #enter>.error{padding:1rem}body main #enter>#qr-scanner{width:100%;height:100vh;position:absolute;left:0;top:0;background-color:rgba(120,120,120,0.439);display:none;justify-content:center;align-content:center}body main #enter>#qr-scanner>#scanner-container{width:500px;max-width:100vw;max-height:80vh}body main #enter>#qr-scanner>#scanner-container>video{width:100%;max-height:80vh}body main #enter>#qr-scanner>#scanner-container>a{display:block;width:100%;text-align:center;background-color:var(--color-main);padding:.5rem;margin-top:-5px;color:white;font-weight:bold;text-decoration:none}body main #create{width:280px}body main #create a.button{padding:.5rem;width:100%;text-align:center;background:transparent;border:none;color:#575757;text-decoration:underline}