.top-nav-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background: var(--accent-gradient);
    border-top:none;
    border-bottom: 1px solid #ddd;
}


.top-nav-secondary {
  min-height:50px;
  position:relative;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:center;
  border-bottom:1px solid #fff;
  background-color: #f1f1f1;
}

.top-nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.underline.text-white {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.general-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 20px;
    gap: 20px;
}

.toggle-top-nav {
    display: none;
}

@media (max-width: 600px) {
    .top-nav-primary {
        justify-content: center;
    }

    .top-nav-primary .flex {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .general-links {
        flex-direction: column;
        justify-content: center;
        gap: 0px;
    }

    .top-nav-primary .top-nav-links {
        display: none;
    }

    .top-nav-primary.expanded .top-nav-links {
        display: flex;
    }

    .toggle-top-nav {
        background: rgba(255, 255, 255, 0.1);
        position: absolute;
        top: 20px;
        left: 20px;
        width: 60px;
        height: 60px;
        cursor: pointer;
    }

    .toggle-top-nav {
        display: block;
    }

    .toggle-top-nav:hover:not(:active) {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2;
    }

    .toggle-top-nav:after {
        content: '\f078';
        position: absolute;
        bottom: 17px;
        right: 17px;
        font-size: 24px;
        font-weight: lighter;
        font-family: fontawesome;
        transform: rotate(0deg);
        transition: .15s transform;
    }

    .toggle-top-nav.expanded:after {
        transform: rotate(180deg);
    }
}