/* basic reset ^_^ */
* { 
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}

body {
    background-color: rgb(245, 194, 237);
    color: rgb(209, 153, 255);
    background-image: url(net_pics/yungnova.gif);
    background-repeat:no-repeat;
    background-size: 200% 150%;
    background-position-x:a center;
    font-family: "Pixelify Sans", serif;
    
}

main {
    max-width: 900px;
    margin: auto;

}

.box {
    background-color: rgb(255, 255, 255);
    box-shadow: 10px 0px 10px rgb(255, 255, 255);
    height: 90px;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    align-content: center;
   
}

.box p{
    display: inline-flex;
    align-items: center;
    justify-self: center;
}

.box img{
    height: auto;
    width: 50px;
    justify-self:center;
}

#container {
    padding: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: auto;
    justify-items: center;
}

button{
    color: rgb(120, 237, 237);
    background-color: white;
    height: 150px;
    width: 150px;
    border-radius: 20px;
    border: 0px;
    font-family: "Pixelify Sans", serif;
}

button:hover {
    background-color: #effffe;
    border: solid 2px rgb(151, 245, 255);
    transition: all 0.2s;
    
}

#container2 {
    display: grid;
    grid-template-columns: 1fr;
    margin-left: 17%;
    margin-right: 17%;
    text-align: center;
    font-size: .8em;
    background-color: white;
    padding: 1em;
    justify-items: center;
    border-radius: .5em;
}

#container3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 50%;
    /* background-color: white; */
    height: 15em;
    gap: 1em;
    margin: 18%;
    margin-top: 1em;
    border-radius: .5em;
}

#container3 img {
    height: auto;
    width: 110%; 
}  


.div-a {
    background-color: rgb(110, 202, 255);
    height: 200%;
    overflow: hidden;
    grid-column: 1;
    border-radius: 1em;
}




.div-b {
    background-color: rgb(110, 255, 255);
    grid-column: 2;
    border-radius: 1em;
    overflow: hidden;
}




.div-c {
    background-color: rgb(135, 255, 179);
    grid-column: 2;
    border-radius: 1em;
    overflow: hidden;
}



 @media screen and (min-width: 700px){

    body {
        font-size: 1.5em;
    }

    #container {
        grid-template-columns: 1fr 1fr 1fr;
        padding-left: 0px;
    }
    #container2 {
        margin-left: 1%;
        margin-right: 1%;
    }
    #container3 {
        height: 20em;
        margin: 3%;
        margin-bottom: 5em;
    }
    #container3 img {
        height: auto;
        width: 100%; 
        margin-bottom: 100em;
    }
       
}