body {
    min-height: 100vh;
    max-height: 100vh;
    margin: 0;
    background: url("images/banner2.png");
    background-color: white;
    font-family: 'Pangolin', cursive;
}

.container_start{
    min-height: 100vh;
    display: grid;
    grid-template-columns: 0.25fr 0.8fr 1fr 0.25fr;
    grid-template-rows: auto 2fr auto;
    grid-template-areas: 
        "h h h h" 
        ". op op ." 
        "f f f f";
}

.container {
    /*background-color: #FDFFD9;*/
    /*font-family: 'Freckle Face', cursive;*/
    /*font-family: 'Open Sans', sans-serif;*/
    min-height: 100vh;
    display: grid;
    grid-template-columns: 0.25fr 0.8fr 1fr 0.25fr;
    grid-template-rows: auto 2fr auto;
    grid-template-areas: "h h h h" ". fm qc ." "f f f f";
}

.container_wheel {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 0.25fr 0.8fr 1fr 0.25fr;
    grid-template-rows: auto 2fr auto;
    grid-template-areas: 
        "h h h h" 
        ". r r ." 
        "f f f f";
}

.navbar {
    grid-area: h;

    display:flex;
    /*Flex items are spaced at each end of website*/
    justify-content: space-between;

    margin: 0;

    /*Centers vertically*/
    align-items: stretch;

    background-color: black;
}

.nav_links {
    display: flex;
    list-style: none;
    align-items:center;
}

.logo {
    margin-left: 1vw;
}

.logo img{
    max-width:100%;
}

li {
    
}

li a{
    color: white;

    align-items: flex-end;

    padding: 3vw;
    margin-right: 12vw;
    /*No underline for links*/
    text-decoration: none;

}

li a:hover{
    background-color:white;
    color:black;
}

li a:visited{
    /*color:white;*/
    text-decoration: none;
}

footer {
    grid-area: f;

    min-height: 50px;
    max-height: 10vh;
    /*background-color: #FFF9AA;*/
    background-color: black;

    display: flex;

    justify-content:center;
    align-items:center;

    font-size: 2.5vw;
    color: white;
}

.Main {
    grid-area: m;
    display: flex;
    flex-direction: row;
}

.foodMascotContainer {
    grid-area: fm;

    background-color:white;
    

    /*Aligns items in the flex container to the center*/
    display: flex;
    justify-content: center;
    align-items: center;

    
}

.foodMascotContainer img{
    /*width: 60%;
    height: 60%;*/
    /*object-fit: cover;*/
    max-width: 90%;
    height: auto;
    
}

.questionContainer {
    grid-area: qc;

    background-color:white;

    display: flex;
    justify-content: center;
    align-items: center;

    /*Which direction to stack the items in container: rows or columsn*/
    flex-direction: column;
}

.questionContainer p{
    font-size: 2.5vw;
    text-align: center;
}

.questionContainer button{
    margin: 1vw;

    border:none;
    /*background-color: #BAC600;*/
    background-color:white;
    border: solid;

    /*Using vw makes it responsive!*/
    padding: 0.5vw 1vw;
    text-align:center;
    font-size: 2vw;

    font-family: 'Pangolin', cursive;

    width:15vw;

}

.questionContainer button:hover{
    /*background-color:aqua;*/
    cursor: pointer;
    
}

#answerDisplay{
    display: none;
}

#answerDisplay img{
}

/*Styling form wheel_page*/
.roulette {
    grid-area: r;
    background-color: white;

    display:grid;

    grid-template-rows: 0.1fr 0.9fr;
    grid-template-columns: auto;
    grid-template-areas:
        "wp"
        "wh";
}

.wheel{
    grid-area: wh;

    display: flex;

    justify-content: center;
    
}

.wheel_pointer{
    grid-area: wp;

    display: flex;

    justify-content: center;
    align-content: flex-end;
}

/*start page styling*/
.option_container{
    grid-area: op;

    background-color: white;

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

.option_container button {
    margin: 1vw;
    border: none;
    /*background-color: #BAC600;*/
    background-color: white;
    border: solid;
    /*Using vw makes it responsive!*/
    padding: 0.5vw 1vw;
    text-align: center;
    font-size: 2vw;
    font-family: 'Pangolin', cursive;
    width: 15vw;
}

.option_container button:hover {
    /*background-color:aqua;*/
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}

#intro_text{
    font-size: 2em;
}