*   {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}
:root, html {
    font-size: 62.5%;
}
body {
    background-color: #EED;
    background-image: linear-gradient(rgb(51, 199, 215), rgb(255, 0, 212));
    min-height: 200vh;
    font-family: verdana;
}
#container {
    background-image: linear-gradient(rgb(255, 0, 212), rgb(51, 199, 215)); color: #DFE0E2;
    background-position: fixed;
    width: 75%; min-width: 275px; height: 100vh;
    margin: 0 auto; /* center horizontally */
}


/* ====== HEADER STYLES ======= */
header {
    color: rgb(26, 222, 173);
    position: fixed; /* also helps the absolutely positioned nav menu */
    left: 50%; top: 10px; transform: translateX(-50%);
    width: 75%;
}

header h1 {
    text-align: center; font-size: 8rem;
    text-shadow: 10px 10px 10px rgb(95, 1, 61);
    margin: 10px 0;
    font-family: 'Lobster Two';
    font-weight: bolder;
}

header p {
    color: rgb(1, 255, 26); font-size: 2rem;
    text-shadow: 5px 4px 6px rgb(95, 1, 61);
    text-align:center; 
    /* padding-right: 20px; */
    /* border: 2px solid orange; */
    margin-bottom: 15px;
}

/* ======= styling main nav menu in header ======= */

    header nav {
        /* border: 2px solid orange; */
        /* position: absolute; bottom: -120px; left: 50%; transform: translateX(-50%); */
        width: 80%; min-width: 600px;
        text-align: center;
        margin: 10px auto;
    }

    header nav > ul {
        /* border: 3px solid rgb(0, 255, 4); */
        margin: 10px;
        display: flex;
        list-style-type: none;
    }

    header nav > ul > li {
        /* border: 3px solid purple; */
        margin: 10px;
        flex: 1 0 auto;
        height: 80px; width: 150px;
        line-height: 80px;
        /* display: flex; */
    }

    header nav > ul > li > a {
        text-decoration: none;
        font-family: 'Lobster Two';
        font-size: 180%;
    }

    header nav a:hover {
        background-color: rgb(255, 255, 255, .4);
    }

    header nav a {
        border: 3px solid rgb(56, 54, 54);
        background-color: rgb(255, 192, 203, .8);
        border-radius: 10px;
        display: block; width: 100%; height: 100%;
    }

    
    /* ======= submenu styles ======= */

    .submenu1, .submenu2, .submenu3 {
        display: none;     /* dislay none completely gets rid of the element */
                        /* 'visibility: hidden' hides the element, but keeps space */
        /* border: 2px solid red; */
        margin-top: -4px;
        padding-top: 5px;
        width: 100%;
    }    

    .submenu1 li, .submenu2 li, .submenu3 li {
        /* border: 3px solid green; */
        list-style-type: none;
        height: 40px;
        margin: 4px 0px;
        line-height: 40px;
    }
         
    .submenu1 a, .submenu2 a, .submenu3 a {
        text-decoration: none;
    }       

    header nav > ul > li:hover .submenu3 {display: block;}
    header nav > ul > li:hover .submenu2 {display: block;}
    header nav > ul > li:hover .submenu1 {display: block;}