* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

img {
    max-width: 100%;/*limits the image to 100% of its parent's width */
}

body {
    border: 2px solid red;
    height: 200vh;
    text-align: center;
    background-color: #ff8c61;
}

    #home {
        font-family: Verdana;
        font-size: 5vh;
        text-align: center;
        height: 50vh;
        /* border: 2px solid orange; */
    }

        .photo {
            width: 250px;
            aspect-ratio: 4/3;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 30px;
        }

        #title {
            /* border: 2px solid green; */
        }

    
    main {
        height: 10vh;
        /* border: 2px solid blue; */
    }
    
            nav.mainmenu {
            display: flex; /*makes this a flexbox container */
            Width: 100%; /* makes box width of parent */
            flex-flow: row wrap; /*displays in a row, but wraps when needed */
            justify-content: space-evenly;
            font-size: larger;
            gap: 12px;
            text-align: center;  
            text-decoration: none;  
            margin: 10px;  
            
        }

            nav.mainmenu > div { /* lets you style specific aspects */
                flex: 0 0 150px; /* lets you set specific size of area for item */
                display:flex; /*makes flexbox child also a parent */
                flex-direction: row;
                
                
            }

                nav.mainmenu > div > a {
                    flex: 1 0 100%;
                    min-height: 50px; /* lets you make links specific size or turn into a box */
                    text-decoration: none; 
                    color: black;
                    border: 2px solid green;
                    background-color: lightskyblue;
                    
                }

                #grid {
        
                }
            
                    #grid ul li {
                        display:inline-block;
                        justify-content: space-evenly;
                        margin-right: 50px;
                        border: 2px solid green;
                        background-color: #ce6a85
                    }
             
                         #grid li {
                             display: flex;
                             flex-flow: row wrap;
                             min-width: 20vw;
                             height: 20vh; aspect-ratio: 4/4;
                             margin: 5px auto;
                             overflow: hidden;
                         }

                            #grid li a {
                                font-size: x-large;
                                text-decoration: none;
                                line-height: 5;
                            }
             
                        #grid img {
                            width: 100%; height: 100%;
                        }
            
                        figcaption {
                            display: block;
                            text-align: center;
                            width: 100%; height: 100%;
                            justify-content: bottom;
                            margin-top: -35px;
                            font-weight: bold;
                              
                            
                    
                        }