/* Navigation */

nav {
    justify-content: space-between;
    grid-column: span 2;
    z-index: 1;
}

.nav-options {
    display: flex;
    align-items: center;
    list-style-type: none; 
    font-size: 1.6rem;

    gap: 3.2rem;
}

.nav-options a,
.nav-options a:link,
.nav-options a:visited {
    text-decoration: none;
    color: var(--text-white-secondary);
}

.nav-options a:hover {
    color: var(--text-white-tertiary);
    text-decoration: underline;
}

.nav-options .nav-option.button {
    color: var(--text-primary);
    font-size: 1.6rem;
}

.nav-option.button:hover {
    background-color: #d3a6c3;
    color: #000;
    text-decoration: none;
}

.logo {
    width: 4.2rem;
}

/* Login type dropdown */

.dropdown-container {
    position: relative;
}

.nav-options .dropdown {
    list-style: none;
    position: absolute;
    
    top: 0;
    z-index: -1;

    visibility: hidden;
    opacity: 0;

    transition: all 100ms ease-in;
}

.dropdown-container:hover .dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(calc(100% + 0.4rem));
}

/* Fix buttons wrong size */

.nav-options .dropdown,
.nav-options .button {
    min-width: 15.8rem;
    text-align: center;
    justify-content: center;
}