body {
    background-image: url("images/background.png");
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    background-attachment: fixed;
    font-size: 1.1rem;
}

h1 {
    text-align: center;
    color: white;
    font-size: 2.5rem;
    position: fixed;
    left: 40%;
}

#layout {
    display: grid;
    grid-template-columns: 20vw 80vw;
} 
#main {
    width: 20vw;
    margin-bottom: 10vh;
    min-height: 100vh;
    position: relative;
} 

.question-box {
    background-image: url("images/background_question.png");
    background-repeat: no-repeat;
    background-size: 20vw 20vh;
    width: 20vw;
    height: 15vh;
    margin: 0;
    padding-top: 30px;
    text-align: center;

    position: absolute;
}

#title {
    background-image: url("images/background_question.png");
    background-repeat: no-repeat;
    background-size: 25vw 20vh;
    width: 25vw;
    height: 15vh;
    margin: 0;
    padding-top: 5vh;
    text-align: center;
    font-size: 1.6rem;

    position: absolute;
}

#results {
    font-size: 1.2rem;
    background-image: url("images/background_answers.jpeg");
    background-repeat: no-repeat;
    background-size: 25vw 50vh;
    width: 25vw;
    height: 50vh;

    position: absolute;
}

#results-bounds {
    padding-top: 9vh;
    padding-left: 7vw;
    width: 12vw;
    height: 35vh;
}

#results-text {
    width: 12vw;
    height: 32vh;
    overflow-y: scroll;
    text-wrap: wrap;
}

#end-form {
    background-image: url("images/background_form.png");
    background-repeat: no-repeat;
    background-size: 25vw 35vh;
    width: 25vw;
    height: 27vh;
    margin: 0;
    padding-top: 6vh;
    text-align: center;

    position: absolute;
}

#end-form input {
    margin-bottom: 2vh;
}

#plate {
    background-image: url("images/table.png");
    background-size: 70vw 70vh;
    background-repeat: no-repeat;
    width: 67vw;
    height: 70vh;
    position: fixed;
    right: 3vw;
    top: 30vh;
    padding: 2vw;
}

.dessert {
    max-width: 10vw;
    max-height: 15vh;
}

