html,body{
    font-size: 20px;
    font-family: roboto, sans-serif;
    text-align: center;
    color: #737476;
    font-weight: 300;
}
/* -------------------------------- The Navigator Style ----------------------------------- */
header ul li>a:hover{
    background-color: #DCE2F1;
}
header ul li>a.current{
    background-color: #DCE2F1;
    font-weight: 700;
}

@media only screen and (min-width: 780px) {
    header {
        position: fixed;
        left: 0;
        top: 0;
        height: 40px;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid #DCE2F1;
        z-index: 999;
        background-color: #fff;
    }

    header .logo {
        margin-left: 5%;
    }

    header .logo img {
        height: 40px;
    }

    header .nav {
        margin-right: 5%;
    }

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

    header ul li > a {
        text-decoration: none;
        color: #737476;
        display: inline-block;
        width: 90px;
        border-radius: 3px;
        margin: 0 9px;
        font-size: 18px;
    }

    .main {
        margin-top: 40px;
    }
}
@media only screen and (max-width: 780px) {
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100px;
        background-color: #fff;
        z-index: 999;
    }

    header .logo > img {
        height: 40px;
        border-bottom: 2px solid #DCE2F1;
    }

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

    header ul li > a {
        text-decoration: none;
        color: #737476;
        display: inline-block;
        width: 90px;
        border-radius: 3px;
        margin: 15px 9px 0 9px;
    }
    .main{
        margin-top: 100px;
    }
}

@media only screen and (max-device-width: 780px){
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100px;
        background-color: #fff;
        z-index: 999;
    }

    header .logo > img {
        height: 40px;
        border-bottom: 2px solid #DCE2F1;
    }

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

    header ul li > a {
        text-decoration: none;
        color: #737476;
        display: inline-block;
        width: 90px;
        border-radius: 3px;
        margin: 15px 9px 0 9px;
    }
    .main{
        margin-top: 100px;
    }
}
@media all and (device-width: 320px) and (device-height: 568px) and (orientation: portrait){
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100px;
        background-color: #fff;
        z-index: 999;
    }

    header .logo > img {
        height: 40px;
        border-bottom: 2px solid #DCE2F1;
    }

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

    header ul li > a {
        text-decoration: none;
        color: #737476;
        display: inline-block;
        width: 90px;
        border-radius: 3px;
        margin: 15px 9px 0 9px;
    }
    .main{
        margin-top: 100px;
    }
}