header.css

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    transition: all 0.4s;
    overflow-x: hidden;
}


header {
    background-color: #4FB1D5;
    box-shadow: inset 0px -10px 20px rgba(0, 0, 0, 0.28);
    display: flex;
}

header .active {
    background-color: white;
    color: black;
    border-radius: 2vw;
    box-shadow: inset 0px -10px 20px rgba(0, 0, 0, 0.28);
}

header .active-home {
    background-color: white;
    color: black;
    box-shadow: inset 0px -10px 20px rgba(0, 0, 0, 0.28);
    border-radius: 0vw 2vw 2vw 0vw;
}

header .inactive:hover {
    padding: calc(5px + 0.6vw) calc(5px + 1vw) calc(5px + 1.4vw) calc(5px + 1vw);
}

header div {
    transition: all 0.4s;
    display: block;
    padding: calc(5px + 1vw);
    font-size: calc(7px + 1.5vw);
    font-weight: 400;
    color: white;
}

a {
    text-decoration: none;
    color: inherit;
    font-weight: inherit;
}

.right {
    margin-left: auto;
    float: right;
}