:root {
    --black: #111111;
    --white: #FFFFFF;
    --red: lightcoral;
    --orange: #FF851B;
    --green: #2ECC40;
}

* {
    margin: unset;
    font-size: 3vh;
    font-family: sans-serif;
}

html {
    height: 100%;
    background-color: var(--grey);
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
    justify-content: center;
}

body.level-ok {
    background-color: var(--green);
}

body.level-error {
    background-color: var(--red);
}

body.level-warning {
    background-color: var(--orange);
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: .5rem;
}

#scan {
    /* So the camera-selector can be positionned absolute */
    position: relative;

    width: 100%;
    height: 33vh;
    overflow: scroll;

    background-color: grey;
}

#user {
    font-weight: bolder;
}

header, section {
    padding-left: .5rem;
    padding-right: .5rem;
}

#detail {
    align-self: center;
}

#voucher {
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-flow: row;
}

#prompt-area {
    text-align: center;
}

#status-area {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
}

#status {
    font-size: 2.5rem;
    text-align: center;
}

form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#button-undo {
    font-size: 2rem;
}