body {
    margin: 0;
    min-height: 100vh;

    background-image: url("../images/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-color: black;
}

.logo {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 320px;
}
.topnav {

    position: absolute;

    top: 185px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 50px;

    font-family: "Rajdhani", sans-serif;

    font-size: 14px;

    letter-spacing: 2px;
}
.topnav a {

    position: relative;

    color: rgba(255,255,255,0.75);

    text-decoration: none;

    transition: all 0.3s ease;
}

.topnav a:hover {

    color: #e4bf78;

    text-shadow:
        0 0 8px rgba(228,191,120,0.5);
}

.topnav a::after {

    content: "";

    position: absolute;

    left: 50%;
    top: -18px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #e4bf78;

    opacity: 0;

    transform: translateX(-50%) scale(0.8);

    transition: opacity 0.4s ease;
}
.topnav a.active::after {

    opacity: 1;

    animation: pulse 6s ease-in-out infinite;
}
.topnav a:hover::after {

    opacity: 1;

    animation: pulse 6s ease-in-out infinite;
}

.line {

    position: absolute;

    top: 140px;

    left: 345px;

    width: 205px;

    height: 1px;

    background: rgba(228,191,120,0.25);
}
.line::before {

    content: "";

    position: absolute;

    left: 120px;
    top: -4px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #e4bf78;

    box-shadow:
        0 0 5px #e4bf78,
        0 0 10px #e4bf78,
        0 0 20px rgba(228,191,120,0.8);

    animation:
    drift 8s ease-in-out infinite alternate,
    orbPulse 6s ease-in-out infinite;
}
.headline {

    position: absolute;

    top: 280px;
    left: 80px;

    color: rgba(114, 16, 42, 0.95);

    font-size: 48px;

    line-height: 1.15;

    font-weight: 300;

    font-family: "Rajdhani", sans-serif;

    max-width: 700px;
}

.intro {

    position: absolute;

    top: 410px;
    left: 80px;

    color: rgba(255,255,255,0.60);

    font-size: 18px;

    line-height: 1.8;

    font-family: "Segoe UI", Arial, sans-serif;

    max-width: 650px;
}

.explore-btn {

    position: absolute;

    top: 940px;
    left: 80px;

    display: inline-block;

    padding: 22px 45px;

    border: 1px solid rgba(228,191,120,0.7);

    color: #e4bf78;

    text-decoration: none;

    letter-spacing: 3px;

    font-size: 14px;

    font-family: Arial, sans-serif;

    transition: all 0.4s ease;
}

.explore-btn:hover {

    background: rgba(228,191,120,0.12);

    box-shadow:
        0 0 10px rgba(228,191,120,0.3);

    transform: translateY(-2px);
}

@keyframes drift {

    0% {
        left: 0px;
    }

    100% {
        left: 205px;
    }
}

@keyframes orbPulse {

    0%, 100% {

        opacity: 0.5;

        box-shadow:
            0 0 4px rgba(228,191,120,0.4),
            0 0 8px rgba(228,191,120,0.3);
    }

    50% {

        opacity: 1;

        box-shadow:
            0 0 5px #ffffff,
            0 0 15px rgba(228,191,120,1),
            0 0 35px rgba(228,191,120,0.8),
            0 0 60px rgba(228,191,120,0.4);
    }
}
@keyframes pulse {

    0%, 100% {

        transform: translateX(-50%) scale(0.8);

        opacity: 0.3;

        box-shadow:
            0 0 4px rgba(228,191,120,0.4);
    }

    50% {

        transform: translateX(-50%) scale(1.3);

        opacity: 1;

        box-shadow:
            0 0 4px #ffffff,
            0 0 10px rgba(228,191,120,1),
            0 0 20px rgba(228,191,120,0.6);
    }
}
.portrait {

    position: absolute;

    top: 59px;

    left: 570px;

    width: 68px;

    opacity: 0.7;

    cursor: pointer;

    transition: opacity 0.5s ease;
}
.portrait:hover {

    opacity: 1;

    filter: drop-shadow(0 0 3px rgba(228,191,120,0.3));
}
.header {
position: relative;
margin: -30px auto 0 auto;
height: 220px;
left: -20px;
    max-width: 900px;

    width: 100%;

}.members-container {

    width: 700px;

    margin: 120px auto;

    padding: 40px;

    background: rgba(0,0,0,0.50);

    border: 1px solid rgba(228,191,120,0.4);

    color: white;
}
/* MOBILE DEVICES */

@media (max-width: 768px) {

    .header {

        width: 100%;

        height: auto;

        margin-top: 20px;

        left: 0;
    }

    .logo {

    position: relative;

    display: block;

    width: 180px;

    margin: 20px auto 10px auto;

    left: auto;

    top: auto;

    transform: none;
}

.portrait {

    position: relative;

    display: block;

    width: 45px;

    margin: -30px auto 15px auto;

    left: auto;

    top: auto;
}

    .line {

        display: none;
    }

    .topnav {

    position: static;

    transform: none;

    margin-top: 20px;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    padding: 0 20px;
}

    .headline {

        position: static;

        text-align: center;

        margin-top: 40px;

        padding: 0 20px;

        font-size: 42px;

        max-width: 100%;
    }

    .intro {

        position: static;

        text-align: center;

        padding: 20px;

        font-size: 18px;

        max-width: 100%;
    }

    .explore-btn {

        position: static;

        display: block;

        width: fit-content;

        margin: 40px auto 60px auto;
    }
}