@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

body{
        background-color:#302929;
}

#header{
        /* adjust the box to the top left corner */
        position:absolute;
        top:0px; left:0px;
        width:99.7%; height:10%;
        border:solid black 3px;
        background-color:#73271F;

        font-family: "Playfair Display", serif;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-style: normal;

}
#footer{
        position:absolute;
        bottom:0px;left:0px;
        width:99.7%; height:10%;
        border:solid black 3px;
        background-color:#73271F;       
}

#magic8_txt{
        position:absolute;
        top:-60%; left:40%;
        font-size:80px;
}

#magic8_png{
        position:absolute;
        height:170px;
        left:55%;
        /*top:0px;*/
}

#infoBoxContainer{
        position:relative;
        width:90%;height:630px;
        border:solid yellow 0px;
        display:flex;
        margin:auto;
        margin-top:7%;
}

.infoBox{
        position:relative;
        width:30%; height:100%;
        margin:4%;
        margin-top:2%;
        border:solid black 1px;
        border-radius:2%;
	    background-color:#632D22;
        transition: width 1.5s;
}

.infoBox:hover{
        background-color:#BD3A0F;
        width:33%; height:103%;
        margin-top:1%;
        margin:0%;
        
}

#learn{
        
}

#grow{

}

#heal{

}