*
    {margin: 0; padding: 0; border: 0; box-sizing: border-box;}
:root   
    {
    font-size: 62.5;
    }
body
    {
    background-color: #f3f9fa; 
    min-height: 100vh;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
#container
    {
    background-color: #1bccef; 
    color: #dfe0e2;
    width: 80%;
    min-width: 275px;
    margin: 0 auto; /* centers horizontally */
    height: 100vh;
    }
header
    {
    background-color: #071013;
    color: #dfe0e2;
    position: fixed; /* only wide as the content*/
    left: 50%;
    top: 10px;
    transform: translatex(-50%); /*50% of the header width, helps the absolutely positioned nav */
    width: 75%; /*of the body*/
    }
header h1
    {
    text-align: center;
    font-size: 4rem;
    margin: 10px 0;
    font-weight: normal;
    font-variant: small-caps;
    }
header h1 + p
    {
    color: #4B8f8c;
    font-size: 3rem;
    text-align: right;
    padding-right: 20px; /* or margin*/
    padding-bottom: 8px;
    }
/* ------------------------------------------------ */
    /* Styling the main nav menu in the header */
header nav 
    {

    position: relative; /* you have to resize after positioning*/
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    min-width: 600px;
    }
header nav > ul
    {
    margin: 10px;
    display: flex; /* makes the kids side by side */
    list-style-type: none;
    flex: row wrap;
    
    }
header nav > ul > li /* just the children, not the grandchildren*/
    {
    border: 1px solid rgb(87, 84, 87);
    background-color: rgb(125, 124, 125);
    margin: 10px;
    flex: 1 0 auto;
    height: 80px;
    width: 150PX;
    }
header nav a
    {
    background-color: rgb(177, 179, 174);
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 15px;
    border-radius: 22px;
    }
header .submenu li
    {
    /* border: 3px solid green; */
    list-style-type: none;
    height: 40px;
    margin: 4px 0px; /* left-right/ top-bottom*/
    width: 100%;
    margin-bottom: 3px;
    }
header .submenu
    {
    display: none; /* dispaly none: completely gets rid of the element visibility: hidden hides the element, but keeps the space*/
    /* border: 1px solid red; this will prevent the drop down from disappearing because it fills the gaps */
    margin-top: -4px; /* close the gap to allow the curser to not disappear*/
    padding-top: 5px; /* pushes the element down for the curser */
    }
header nav > ul > li:hover .submenu a
    {
    margin-bottom: 40px;
    color: black;
    text-decoration: none;
    background-color: white;
    }
header nav > ul > li:hover .submenu
    {
    display: block;
    }
header nav > ul > li:hover .submenu a:hover
    {
    background-color: pink;
    width: 150%;
    text-align: right;
    padding-right: 30px;
    }