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

img, video, figure {
    max-width: 100%; /* a good default setting like the reset rule */
}

:root {
    font-size: 62.5% /* makes standard rem = px */
}

body {
    min-height: 160vh;
    max-width: 1800px; 
    background-image: linear-gradient(yellow, green, blue);
    /* border: 2px solid red; */
}

#container {
    width: 95vw;
    min-height: 100%;
    margin: 2vh auto;
    display: block;
}  

    #top {
        min-height: 15vh;
        margin-bottom: 10px;
        font-size: 4rem;
        line-height: 15vh;
        text-align: center;
        
    }

        h1 {
            height: 100%;
        }

            #np_name {
                max-height: 100%;
                font-family: 'Rochester', cursive;
                font-size: 5rem;
                color: darkblue;
                line-height: 5vh;
                
            }
            
                #slogan {
                    max-height: 100%;
                    max-width: 50%;
                    margin-top: 4vh;
                    margin-left: 45%;
                    text-align: center;
                    font-size: 3vh;
                    color: #034403;
                    line-height: 5vh;
                    padding-right: 5vw;
                }

        .logo {
            height: 18vh; aspect-ratio: 5/4.5;
            margin-top: 2vh;
            
        }

        ul {
            display: flex;
            list-style-type: none; 
            justify-content: space-evenly;
        }

            #main-nav > li {
                display: block;
                border: 2px solid purple;
                width: 22%; height: 20%;
                text-align: center;
                line-height: 5vh;
                font-size: 3vh;
                background-image: radial-gradient(#c77dff, #70d6ff, #034403);
                margin: 1vh auto 1vh auto;
                border-radius: 20px;
            }

                #main-nav a {
                    display: block;
                    width: 100%; height: 100%;
                    text-decoration: none;
                    color: purple;
                    font-weight: bold; 
                }

        .middle {
            min-height: 150vh;
            /* border: 2px solid red; */
            display: flex;
        }

            .meet_the_staff {
                border: 2px solid blue;
                display: flex;
                width: 80%;
                height: 100%;
                margin-top: 2vh;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                background-color: #00b4d8;
                flex-flow: row wrap;
                justify-content: space-between;
            }

                section {
                    
                    margin: 10px auto;
                    width: 100%;
                    min-height: 12vh;
                    text-align: center;
                }

                    #staff {
                        display: flex;
                        flex-flow: row wrap;
                        justify-content: space-around;
                        text-align: center;
                       
                    }

                        #staff li {
                            display: flex;
                            width: 30rem;
                            aspect-ratio: 4/4;
                            margin-top: 5rem;
                            
                            
                            
                        }

                            #staff li a {
                                border: 2px solid #31572c;
                                width: 100%;
                                font-size: 5vh;
                                text-decoration: none;
                                font-family: 'Courier New', Courier, monospace;
                                font-weight: bold;
                                color: black;
                                background-size: cover;
                                display: block;
                                text-decoration: none;
                                overflow: hidden; /* hides overflowing text */
                                transition: all 300ms ease-in-out;
                                
                            }

                                #staff li a span {
                                    /* background-color:pink; */
                                    padding: 5px 5px;
                                    display: inline-block;
                                    transform: translateY(-285px);
                                    transition: all 300ms ease-in-out;
                                    border: 2px solid pink;
                                    background: palegoldenrod;
                                    width: 100%;
                                }

                                    #staff li a:hover span {
                                        transform: translateY(-5px); /* makes hidden text re-appear when hover, adjusted text location */
                                    }

                                    #name {
                                        font-size: 3.5rem;
                                        margin: 0.5rem 0rem;
                                        color: darkblue;
                                        font-family: 'Rochester', cursive;
                                    }

                                    #title {
                                        font-size: 2.5rem;
                                        margin: 0.5rem 0rem;
                                        font-weight: bold;
                                    }
                                    
                                    #title_long {
                                        font-size: 2rem;
                                        margin: 0.5rem 0rem;
                                        font-weight: bold;
                                    }

                                    #bio {
                                        font-size: 1.50rem;
                                    }

                                #staff li:nth-child(1) a {
                                    background-image: url(../dt_images/jessilynn.JPG); 

                                }

                                #staff li:nth-child(2) a {
                                    background-image: url(../dt_images/william.jpg); 
                                }

                                #staff li:nth-child(3) a {
                                    background-image: url(../dt_images/pmanager_unsplash.jpg); 
                                }

                                #staff li:nth-child(4) a {
                                    background-image: url(../dt_images/fund_unsplash.jpg); 
                                }

                                #staff li:nth-child(5) a {
                                    background-image: url(../dt_images/event_unsplash.jpg); 
                                }

                                #staff li:nth-child(6) a {
                                    background-image: url(../dt_images/hr_unsplash.jpg); 
                                }