:root {
    --color-primary: #292F5C;
    --color-secondary: #FF7828;
    --fs-sm: .75rem;
    --fs-md: 1rem;
    --fs-extra-md: 1.125rem;
    --fs-lg: 1.5rem;
    --fs-extra-lg: 2rem;
    --fs-bg: 3rem;
}

body {
    overflow-x: hidden;
}

.navbar {
    background-color: var(--color-primary);
}

.navbar-links {
    position: relative;
    margin: 2px;
    font-size: var(--fs-lg);
    color: rgb(150, 150, 150);
    text-decoration: none;
    border: none;
    transition: all 0.3s ease-in
}

.navbar-links:hover, .navbar-links:focus, .navbar-links:active {
    color: white; 
}

.navbar-links::before {
    content: "";
    position: absolute;
    bottom: 10px;
    display: block;
    width: 85%;
    height: 3.5px;
    background-color: white;
    transform: scaleX(0%);
    transform-origin: left;
    transition: all 0.3s ease-out;
}

.navbar-links:hover::before {
    transform: scaleX(100%);
}

.navbar-toggler {
    font-size: 2rem;
    color: white;
    border-color: white;
}

.link-auth {
    min-width: 8rem;
    color: white;
    border: var(--color-secondary) solid 2px;
}

.link-auth:hover {
    color: white;
    background-color: var(--color-secondary);
}

.link-auth:active {
    color: var(--color-secondary) !important;
    background-color: transparent !important;
}

@media (max-width: 75rem) {
    .navbar-links {
        color: white;
        border-bottom: 2px solid white;
    }
    .navbar-links:hover::before {
        display: none;
    }
}