/**
 * LAYOUT
 */
body {
    display: flex;
    place-content: center;
    place-items: center;
    flex-flow: column nowrap;
}
main {
    padding: 1em;
    width: 100%;
    max-width: 50em;
    flex: 1;
    
    display: flex;
    justify-content: center;
    flex-flow: column nowrap;
    gap: 1em;
}

header {
    width: 100%;
    border-bottom: 1px solid var( --border-color );
    padding: 1em;
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    gap: 1em;
}
header .welcome {
    font-size: 1.25em;
}

/**
 * SCANNER
 */
#scan-wrapper {
    min-width: 20em;
}

#placeholder {
    width: 100%;
    aspect-ratio: 1;
    cursor: pointer;
}
#status:empty,
#placeholder[hidden] {
    display: none;
}

#qr-reader {
    width: 100%;
    aspect-ratio: 1;
    overflow: clip;
    border-radius: .5em;
}
#qr-reader > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#scan-result.card {
    --card-font-color: var( --color-muted );
    --card-padding-x: 1rem;
    --card-padding-y: 1rem;
    --card-font-size: 3em;
    text-transform: uppercase;
}