.header{
    margin:auto;
    width:100vw;
    margin-top:-10px;
    position: fixed;
    background-color: #e5e8eb;
    margin-bottom: 400px;
}
.nav-bar{
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    margin:auto;
    width: max-content;
    border-bottom: 1px solid #8ca0ab;
}
.nav-bar li{
    float: left;
    border-right: 1px solid #8ca0ab;
}
.nav-bar li:last-child {
    border-right: none;
}

.nav-bar li a {
    display: block;
    color: #8ca0ab;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#active {
    color: #435d75; 
}

.nav-bar li a:hover {
    color: #435d75;
}

.my-name-title {
    margin-bottom:10px;
    font-family: 'quicksandlight', Helvetica, serif;
    font-size: 65px;
    color: #435d75;
    text-align: center;
}

@font-face {
    font-family: 'quicksandlight';
    src: url("/?originalUrl=https%3A%2F%2Fmarceltorne.github.io%2Fwebfontkit%2Fquicksand-variablefont_wght-webfont.woff2") format('woff2'),
        url("/?originalUrl=https%3A%2F%2Fmarceltorne.github.io%2Fwebfontkit%2Fquicksand-variablefont_wght-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;

}