.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    width: 100%;
    
}

.navbar .container {
    padding: 30px;
    max-width: 1400px; /*I set a max width so it doesn't take all the place and we can see that it's centered*/
    width: 80%;
    align-items: center;
}

.nav-link {
    padding-top: .7rem;
    padding-bottom: .7rem;
    padding-left: 20px;
    padding-right: 20px;
    
    font-family: var(--font-regular);
}
/*The name in the nav bar*/
.navbar-name{
    font-size: var(--fontsize-bold);
    
    font-family: var(--font-black);
    text-transform: uppercase;
}

.navbar-nav {
    list-style: none;
}

.nav-item {
    position: relative;
}

/*nav item after hover*/
.nav-item:hover::after {
    width: 70%; 
}
/*nav item when not on hover*/
.nav-item::after {
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    margin: auto;
    background-color: var(--secondary-color);
    content: "";
    height: 2px;
    width: 0%;
    transition: all 0.5s;
}

/*scroll nav*/
.navbar-scroll{
    background-color: var(--background-color);
    z-index: 3;
    position: fixed;
    top: 0px;
    width : 100%;
}

@media(max-width:992px) {
    .navbar{display: none;}
    .navbar-scroll{display: none;}
}