* {
    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 {
    height: 200vh;
    max-width: 1800px; 
    background-image: linear-gradient(yellow, green, blue);
    border: 2px solid red;
}

#alert {
    width: 95%;
    border: 2px solid red;
    font-size: small;
    margin: 10px auto;
    background-color: antiquewhite;
}

    .alert {
        color: red;
        text-align: center;
        font-size: 2vh;
    }

#container {
    width: 95vw;
    height: 95%;
    margin: 2vh auto;
    /* border: 2px solid orange; */
    display: block;
}  

    #top {
        height: 20vh;
        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: 8vh;
                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: 20vh; 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; 
                }