← Personal Portfolio (old Angular version, unfinished)
source/src/app/navbar/navbar.component.css
header{
    background-color: #ffffff;
}

.header_mb{
    height: 54px;
    display: flex;
    align-self: center;
}

.navbar div {
    display: none;
}

.logo {
    width:50px;
    height: auto;
    font-weight: 400;
    font-size: 22px;
    font-family: 'Poppins', serif;
}

.navbar-list {
    height: 100%;
}

.nav-item{
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #828285;
    transition: color 0.3s ease;
    display: block;
    /**
    border-bottom: 3px solid #ffffff;
    **/
}

.nav-item:hover{
    color: #FDA000;
    /**
    border-bottom: 3px solid #bbbbbb;
    **/
}

.nav-item.active{
    color: #1c1c1f;
    /**
    border-bottom: 3px solid #FDA000;
    **/
}
.nav-item.active:hover{
    color: #FDA000;
}

.navbar_mb {
    display: block;
    margin-right: 20px;
    height: 60px;
    width: 100vw;
    background-color: #828285;
}

.nav-item-mb {
    font-weight: 600;
    color: #828285;
  }
.nav-item-mb.active {
    color: #ffffff;
}

.mb_menu {
    display: block;
}

.blur {
    background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.6);
}


/* @media
@media (min-width: 576px) { ... }

@media (min-width: 992px) { ... }

@media (min-width: 1200) { ... }


@media (min-width: 1400px) { ... }
*/

@media (min-width: 1350px) { 
    
    .navbar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .navbar div {
        display: block;
    }
    
    .mb_menu {
        display: none;
    }

    .navbar {
        height: 80px;
    }
}