nav {
    width: 100%;
    /* Use a dark translucent backdrop for contrast with white logo/text */
    background-color: rgba(34, 54, 74, 0.85);
        background: linear-gradient(90deg, rgba(0,212,255,0.85) 0%, rgba(9,72,180,0.85) 100%);
        margin-top: 0px;
        padding: 6px 30px 10px;
        box-shadow: 0 2px 8px rgba(10,20,30,0.10);
}

.navbar-brand img{
    width: auto;
    height: 40px;
}

a{
    color: white; /* Set font color to white */
    font-family: 'CenturyGothic', "Century Gothic";
}

a:hover{
    color: lightgray; /* Slightly lighter color on hover */
}

a.nav-link{
    padding: 33px 8px 8px 8px;
}


.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    background-color: transparent;
    border: 1px solid rgba(14,33,48,0.12);
    border-radius: 0.25rem;
    transition: box-shadow 0.15s ease-in-out;
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(14,33,48,0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
  
.custom-toggler.navbar-toggler { border-color: rgba(14,33,48,0.12); }

/* Visible focus outlines for keyboard users */
.nav-link:focus, .navbar-toggler:focus, .btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(34,139,230,0.12);
    border-radius: 4px;
}

@media only screen and (min-width: 576px) {
    .navbar-brand img{
        height: 50px;
    }
}

@media only screen and (min-width: 768px) {
    .navbar-brand img{
        height: 60px;
    }
}

@media only screen and (min-width: 992px) {
    .navbar-brand img{
        height: 70px;
    }
}

@media only screen and (min-width: 2000px) {
    a.nav-link {
        font-size: 25px;
    }

    .navbar-brand img{
        height: 80px;
    }
}