html, body {
    margin: 0;
    background: #000;
    color: #fff;
    font-family: sans-serif;
}

.main-logo {
    margin: 1rem auto;
    display: block;
}

.hidden {
    display: none !important;
}

#reader {
    aspect-ratio: 1;
    background: #f2f2f2 url('camera-permission.png') no-repeat center center;
}

#output {
    margin: 1rem;
    padding: 1rem;
    border-radius: 3px;
    text-align: center;
}

#output {
    text-transform: uppercase;
}

#output.valid {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

#output.invalid {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

#buttons {
    display: flex;
    padding: 1rem;
    justify-content: center;
}

.btn {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background: white;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
}

.btn:disabled {
    opacity: 0.75;
}