body {
    background: #e3c082;
}

@viewport {
    width: device-width ;
    zoom: 1.0 ;
}

@-ms-viewport{
    width: device-width ;
}
  
#headbanner, #footbanner {
    display: block;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    width: 500px;
}

a {
    color: black !important;
}


#welcome, #results {
    background-color: purple;
    color: white;
    text-align: center;
    font-size: 25px;
    font-family:Arial, Helvetica, sans-serif;
    border-radius: 10px;
    margin: 5px auto;
    display: block;
    padding: 5px;
    width: 60%;
    max-height: 100%;
}


#welcome, #results, .question, .box {
    animation: colors 15s linear alternate infinite;
}




@keyframes colors {
    0% { background-color: #9fbdfe; }
    25% { background-color: #243be8; }  
    50% { background-color: #7433aa; }
    75% { background-color: #47dd97; }
    100% { background-color: #8ebb26; }
}

#welcome::after{
    background-color: red;
    opacity: 0;
    transition: opacity 2ms;
}

.click-buttons {
    background-color: lavender;
    border-radius: 10px;
    margin: 10px auto;
    justify-content: center;
    width: 60%;

}

.click-buttons:hover {
    box-shadow: 0 0 11px rgba(33,33,33,1);
}

.question {
    background-color: purple;
    color: white;
    font-size: 25px;
    font-family:Arial, Helvetica, sans-serif;
    display: flex;
    text-align: center;
    align-items: center;
    padding: 10px;
    justify-content: center;
    border-radius: 10px;
    margin: 10px auto;
    width: 530px;
    
}

.container{
    margin: 10px auto;
    width: 100%;
    height: 100%;
    display:grid;
    grid-template-columns: 250px 250px;
    grid-row: auto auto;
    grid-column-gap: 30px;
    grid-row-gap: 10px;
    justify-content: center;
    border-radius: 20px;
}

@media screen and (max-width: 529px) and (min-width: 250px) {
    .question, h1 {
        font-size: 30px !important;
        width: 250px;
    }

    .container {
        grid-template-columns: 250px;
        grid-column-gap: 300px;
    }

    #headbanner, #footbanner {
        width: 100vw;
    }

}


.resu img{
    max-width: 14%;
}

.box {
    padding: 10px;
    border-radius: 10px;
    color:#fff;
    background-color: black;
    border-radius: 10px;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    font-family:Arial, Helvetica, sans-serif;
}

.box:hover {
    box-shadow: 0 0 11px rgba(33,33,33,1); 
}

img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.imglabel {
    margin: 5px auto;
    padding: 10px;
    text-align: center;
    background-color: lavender;
    border-radius: 5px;
    display: block;
    justify-content: center;
}

/* change screen size from column to row! */
/* flex direction :D */
@media screen {
    
}




/* CSS ART SITE DECORATION 
 * 
 * Goal: Create two flowers to the left 
 * and right of the questions. These flowers resemble
 * focaccia decorations. One flower can have a black (olive)
 * center with red pepper petals. The other can have 
 * a red (tomato) center with yellow pepper petals
 *
 * Heres a ref: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.lavenderandlovage.com%2F2020%2F06%2Fhow-to-make-a-sourdough-focaccia-garden.html&psig=AOvVaw0a7VZfo8gELp1U2B9iUJFS&ust=1645990991981000&source=images&cd=vfe&ved=0CAgQjRxqFwoTCIDJ6MWQnvYCFQAAAAAdAAAAABAD
 */

/*
#bigstem {
    position: absolute;
    transform: translate(5vh, -100%);
    width: 20px;
    height: 50%;
    border: 1px solid black;
    background: #477725;
}

#tomato {
    position: relative;
    transform: translate(5vh, -150%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgb(245, 65, 65);
}

*/


.resu{
    display: flex;
    flex-direction: row;
}
img.resu{
    width: 20px;
}