@charset "utf-8";

/*

   Styles for the homepage
   Author: Kyle Snyder
   Date:   12/14/24

   Filename: homepage.css

*/


section {
    width: 90%;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "item1 item2"
                         "item3 item4";

}


#productArea > a:first-of-type {
    grid-area: item1;
    text-align: center;
}



#productArea > a:nth-of-type(2) {
    grid-area: item2;
    text-align: center;
}

#productArea > a:nth-of-type(3) {
    grid-area: item3;
    text-align: center;
}

#productArea > a:nth-of-type(4) {
    grid-area: item4;
    text-align: center;
}

#productArea a {
    text-decoration: none;
    color: black;
}

#productArea a:hover {
    opacity: 0.9;
}

#productArea figcaption:hover {
    color: yellow;
}

figure > a > img {
    width: 90%;
}

section#productArea figure {
    text-align: center;

}

figcaption {
    font-family: "Play Pretend";
    font-size: 2em;
}

@media only screen and (max-width:1300px) {
    section {
        display: block;
    }
}

@media only screen and (max-width:769px) {
    

   
}

@media only screen and (max-width:479px) {
    
    nav.navlist ul li{
        font-size: 1.5em;
    }
}