/* =========================================
   MOBILE FIRST
========================================= */

.main-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 18px 0;

    width: 100%;
    margin: 0;

    background:
        linear-gradient(to right,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,0.6) 6%,
            rgba(8,25,22,1) 12%,
            rgba(8,25,22,1) 88%,
            rgba(0,0,0,0.6) 94%,
            rgba(0,0,0,1) 100%
        ),
        linear-gradient(to bottom, #0b221f 0%, #081916 100%);

    border-top: 1px solid #d4b06a;

    position: relative;
    margin-top: -32px;
}

/* Wood trim bottom */

.main-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(to bottom,#8a5e2a,#2b1b0c);
}

.main-nav a {
    color: #c9a96a;
    text-decoration: none;
    font-size: 17px;
    position: relative;
    transition: 0.25s ease;
}

/* Glow for all sizes */

.main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px;
    width: 120%;
    height: 8px;

    background: radial-gradient(
        ellipse at center,
        rgba(212,176,106,0.55) 0%,
        rgba(212,176,106,0.25) 40%,
        rgba(212,176,106,0.0) 80%
    );

    opacity: 0;
    transition: opacity 0.25s ease;
}

.main-nav a:hover {
    color: #e0c184;
}

.main-nav a:hover::after {
    opacity: 1;
}

/* =========================================
   MOBILE ADJUST
========================================= */

@media (max-width: 768px) {

    .main-nav {
        gap: 12px;
        padding: 16px 0;
        margin-top: -28px;
    }

    .main-nav a {
        font-size: 15px;
    }

}

/* =========================================
   DESKTOP
========================================= */

@media (min-width: 1100px) {

    .main-nav {
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);

        width: auto;
        padding: 12px 32px;
        gap: 38px;

        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(6px);

        border: none;
        border-radius: 8px;

        box-shadow: 
            0 12px 30px rgba(0,0,0,0.45),
            inset 0 1px 0 rgba(255,255,255,0.08);
    }

    .main-nav::after {
        display: none;
    }

    .main-nav a {
        font-size: 20px;
    }

}