* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #030711;
    --blue: #3182ff;
    --cyan: #43c8ff;
    --text: #f5f8ff;
    --muted: #71819a;
    --green: #35e68b;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;

    background: #030711;

    color: var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

.site-background {
    position: fixed;
    inset: 0;

    z-index: -10;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% -20%,
            #102d62,
            #06101f 35%,
            #030711 72%
        );
}

.bg-grid {
    position: absolute;
    inset: 0;

    opacity: .14;

    background-image:
        linear-gradient(
            rgba(80,150,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(80,150,255,.08) 1px,
            transparent 1px
        );

    background-size: 60px 60px;
}

.bg-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(130px);

    opacity: .15;

    animation: floatGlow 10s infinite alternate ease-in-out;
}

.glow-blue {
    top: -250px;
    left: -180px;

    background: #1769ff;
}

.glow-cyan {
    top: 30%;
    right: -250px;

    background: #00bfff;
}

@keyframes floatGlow {

    to {
        transform:
            translate(70px, 40px);
    }

}


/* NAVBAR */

.navbar {
    position: fixed;

    top: 15px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 1000;

    width:
        min(
            1240px,
            calc(100% - 28px)
        );

    height: 66px;

    padding:
        0 12px 0 18px;

    display: flex;
    align-items: center;

    border:
        1px solid
        rgba(100,150,220,.15);

    border-radius: 17px;

    background:
        rgba(3,9,20,.82);

    backdrop-filter:
        blur(22px);

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.3);
}


/* BRAND */

.brand {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.brand-symbol {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #1d5cff,
            #39bfff
        );

    font-size: 21px;
    font-weight: 950;

    box-shadow:
        0 0 30px
        rgba(49,130,255,.3);
}

.brand strong {
    display: block;

    font-size: 16px;
    font-weight: 950;
}

.brand strong span {
    color: #55a7ff;
}

.brand small {
    display: block;

    margin-top: 1px;

    color: #526681;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 3px;
}


/* NAV */

.main-nav {
    display: flex;

    gap: 5px;

    margin-left: auto;
    margin-right: 18px;
}

.main-nav a {
    position: relative;

    padding:
        9px 11px;

    border-radius: 8px;

    color: #71829b;

    font-size: 10px;
    font-weight: 850;

    transition: .2s;
}

.main-nav a:hover {
    color: white;

    background:
        rgba(255,255,255,.035);
}

.main-nav a.active {
    color: white;

    background:
        rgba(49,130,255,.09);
}

.main-nav a.active::after {
    content: "";

    position: absolute;

    bottom: -6px;
    left: 50%;

    width: 14px;
    height: 2px;

    transform:
        translateX(-50%);

    border-radius: 5px;

    background:
        #55a7ff;
}


/* RIGHT */

.navbar-right {
    display: flex;
    align-items: center;

    gap: 7px;
}


/* NAV PLAYER */

.nav-players {
    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(53,230,139,.1);

    border-radius: 9px;

    background:
        rgba(53,230,139,.025);
}

.nav-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 9px
        var(--green);
}

.nav-players strong {
    font-size: 9px;
}


/* LANGUAGE */

.language-switch {
    display: flex;

    gap: 2px;

    padding: 3px;

    border-radius: 8px;

    background:
        rgba(255,255,255,.025);
}

.language {
    padding:
        6px 7px;

    border: 0;

    border-radius: 6px;

    background: transparent;

    color: #65758e;

    font-size: 8px;
    font-weight: 900;

    cursor: pointer;
}

.language.active {
    color: white;

    background:
        var(--blue);
}


/* DISCORD */

.discord-button {
    height: 39px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        0 12px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #245bdc,
            #397ff7
        );

    font-size: 9px;
    font-weight: 900;

    box-shadow:
        0 8px 25px
        rgba(49,130,255,.18);

    transition: .2s;
}

.discord-button:hover {
    transform:
        translateY(-2px);
}


/* PROFILE */

.profile {
    position: relative;
}

.profile-button {
    height: 40px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        3px 9px 3px 3px;

    border:
        1px solid
        rgba(70,145,255,.18);

    border-radius: 10px;

    background:
        rgba(49,130,255,.06);

    color: white;

    cursor: pointer;
}

.profile-button img {
    width: 33px;
    height: 33px;

    border-radius: 50%;
}

.profile-button span {
    max-width: 90px;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 9px;
    font-weight: 850;
}

.profile-button i {
    color: #638bc5;

    font-style: normal;
}

.profile-menu {
    position: absolute;

    top:
        calc(100% + 9px);

    right: 0;

    width: 225px;

    padding: 8px;

    border:
        1px solid
        rgba(75,139,235,.18);

    border-radius: 14px;

    background:
        rgba(4,10,22,.98);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.55);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-7px);

    transition: .2s;
}

.profile-menu.show {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}

.profile-info {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 9px;
}

.profile-info img {
    width: 40px;
    height: 40px;

    border-radius: 50%;
}

.profile-info strong {
    display: block;

    font-size: 10px;
}

.profile-info small {
    display: block;

    margin-top: 3px;

    color: #53627a;

    font-size: 7px;
}

.menu-line {
    height: 1px;

    margin: 5px 0;

    background:
        rgba(255,255,255,.06);
}

.profile-menu a {
    display: block;

    padding: 10px;

    border-radius: 7px;

    color: #8492a7;

    font-size: 9px;
    font-weight: 750;
}

.profile-menu a:hover {
    color: white;

    background:
        rgba(49,130,255,.08);
}

.logout-button:hover {
    color: #ff7587 !important;
}


/* MOBILE */

.mobile-button {
    display: none;

    width: 39px;
    height: 39px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 9px;

    background:
        rgba(255,255,255,.03);

    color: white;

    cursor: pointer;
}

.mobile-nav {
    display: none;
}


/* HERO */

.hero {
    width:
        min(
            1160px,
            calc(100% - 40px)
        );

    min-height: 780px;

    margin: auto;

    padding:
        160px 0 80px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 60px;
}

.hero-left {
    animation:
        heroIn .8s ease both;
}

@keyframes heroIn {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}

.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 11px;

    border:
        1px solid
        rgba(77,151,255,.16);

    border-radius: 999px;

    background:
        rgba(49,130,255,.04);
}

.eyebrow span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #4fa7ff;

    box-shadow:
        0 0 12px
        #4fa7ff;
}

.eyebrow p {
    color: #7295c8;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 2px;
}

.hero h1 {
    margin:
        25px 0 20px;

    font-size:
        clamp(
            52px,
            7vw,
            88px
        );

    line-height: .92;

    letter-spacing: -5px;

    font-weight: 950;
}

.hero h1 span,
.hero h1 em {
    display: block;
}

.hero h1 em {
    color: transparent;

    font-style: normal;

    background:
        linear-gradient(
            100deg,
            #3182ff,
            #5dc8ff
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.hero-description {
    max-width: 560px;

    color: #74849d;

    font-size: 13px;

    line-height: 1.9;
}

.hero-actions {
    display: flex;

    gap: 9px;

    margin-top: 28px;
}

.hero-primary,
.hero-secondary {
    min-height: 49px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    padding:
        0 17px;

    border-radius: 9px;

    font-size: 9px;
    font-weight: 900;

    transition: .25s;
}

.hero-primary {
    background:
        linear-gradient(
            135deg,
            #1d5ce5,
            #3c91ff
        );

    box-shadow:
        0 12px 35px
        rgba(49,130,255,.2);
}

.hero-primary:hover {
    transform:
        translateY(-3px);
}

.hero-secondary {
    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.025);

    color: #9aabc3;
}

.hero-secondary:hover {
    color: white;
}

.hero-server {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 20px;

    color: #52647d;

    font-size: 8px;
    font-weight: 800;
}

.hero-server-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 10px
        var(--green);
}


/* HERO DECORATION */

.hero-decoration {
    position: relative;

    height: 450px;
}

.hero-circle {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 300px;
    height: 300px;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(49,130,255,.22),
            rgba(49,130,255,.04) 55%,
            transparent 70%
        );

    box-shadow:
        0 0 100px
        rgba(49,130,255,.12);
}

.hero-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    border:
        1px solid
        rgba(70,150,255,.15);

    border-radius: 50%;

    transform:
        translate(-50%,-50%)
        rotate(-20deg);
}

.ring-one {
    width: 350px;
    height: 350px;
}

.ring-two {
    width: 470px;
    height: 230px;
}

.hero-floating-card {
    position: absolute;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(70,145,255,.18);

    border-radius: 10px;

    background:
        rgba(5,13,28,.85);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.3);

    animation:
        floatCard 4s ease-in-out infinite;
}

.hero-floating-card span {
    display: block;

    color: #536b8b;

    font-size: 6px;
    font-weight: 900;

    letter-spacing: 2px;
}

.hero-floating-card strong {
    display: block;

    margin-top: 4px;

    font-size: 10px;
}

.card-one {
    top: 80px;
    right: 40px;
}

.card-one strong {
    color: var(--green);
}

.card-two {
    bottom: 80px;
    left: 30px;

    animation-delay:
        -2s;
}

.card-two strong {
    color: #5ca8ff;
}

@keyframes floatCard {

    0%,100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


/* FEATURES */

.features-section,
.final-cta,
.page {
    width:
        min(
            1160px,
            calc(100% - 40px)
        );

    margin: auto;
}

.features-section {
    padding:
        70px 0 90px;
}

.section-heading {
    display: flex;

    align-items: end;
    justify-content: space-between;

    gap: 25px;
}

.section-heading small {
    color: #4c87df;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 3px;
}

.section-heading h2 {
    margin-top: 7px;

    font-size: 35px;
    font-weight: 950;
}

.section-heading > p {
    max-width: 320px;

    color: #5f7089;

    font-size: 10px;

    line-height: 1.7;
}

.features-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 28px;
}

.feature-card,
.rule-card,
.staff-card,
.application-card,
.content-card,
.form-card {
    border:
        1px solid
        rgba(255,255,255,.065);

    background:
        rgba(255,255,255,.022);

    border-radius: 15px;
}

.feature-card {
    position: relative;

    min-height: 220px;

    padding: 25px;

    transition: .25s;
}

.feature-card:hover,
.rule-card:hover,
.staff-card:hover,
.application-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(58,139,255,.3);

    background:
        rgba(49,130,255,.045);
}

.feature-number,
.application-number {
    position: absolute;

    top: 20px;
    right: 21px;

    color: #263d5e;

    font-size: 8px;
    font-weight: 950;
}

.feature-icon {
    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    margin-bottom: 23px;

    border-radius: 10px;

    color: #54a4ff;

    background:
        rgba(49,130,255,.07);

    border:
        1px solid
        rgba(63,137,255,.18);
}

.feature-card h3 {
    margin-bottom: 8px;

    font-size: 15px;
}

.feature-card p {
    color: #687991;

    font-size: 10px;

    line-height: 1.8;
}


/* CTA */

.final-cta {
    min-height: 190px;

    margin-bottom: 90px;

    padding: 30px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    border:
        1px solid
        rgba(56,139,255,.14);

    border-radius: 19px;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(49,130,255,.12),
            rgba(255,255,255,.018)
        );
}

.final-cta small {
    color: #4c87df;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 3px;
}

.final-cta h2 {
    max-width: 600px;

    margin-top: 7px;

    font-size: 40px;

    line-height: 1;

    letter-spacing: -2px;
}

.cta-button {
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        0 18px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #205bdc,
            #3d91ff
        );

    font-size: 9px;
    font-weight: 950;
}


/* PAGE */

.page {
    padding:
        150px 0 100px;
}

.page-hero {
    max-width: 750px;

    padding:
        45px 0 55px;
}

.page-hero.small {
    padding-bottom: 30px;
}

.page-hero h1 {
    margin-top: 23px;

    font-size:
        clamp(45px, 7vw, 72px);

    line-height: .95;

    letter-spacing: -4px;

    font-weight: 950;
}

.page-hero > p:last-child {
    max-width: 650px;

    margin-top: 20px;

    color: #74849d;

    font-size: 12px;

    line-height: 1.8;
}


/* CONTENT */

.content-card {
    max-width: 750px;

    padding: 35px;

    margin-bottom: 50px;
}

.content-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #1d5cff,
            #39bfff
        );

    font-size: 25px;
    font-weight: 950;
}

.content-card h2 {
    margin-bottom: 10px;
}

.content-card p {
    color: #71819a;

    font-size: 11px;

    line-height: 1.9;
}


/* RULES */

.rules-grid,
.staff-grid,
.applications-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;
}

.rule-card {
    position: relative;

    padding: 28px;

    min-height: 190px;

    transition: .25s;
}

.rule-card > span {
    color: #397edb;

    font-size: 8px;
    font-weight: 950;
}

.rule-card h2 {
    margin:
        25px 0 8px;
}

.rule-card p {
    color: #71819a;

    font-size: 10px;

    line-height: 1.8;
}


/* STAFF */

.staff-grid {
    grid-template-columns:
        repeat(3, 1fr);
}

.staff-card {
    padding: 27px;

    transition: .25s;
}

.staff-avatar {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #1d5cff,
            #39bfff
        );

    font-size: 18px;
    font-weight: 950;
}

.staff-card small {
    color: #4f8fe8;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 2px;
}

.staff-card h2 {
    margin-top: 6px;

    font-size: 16px;
}

.staff-card p {
    margin-top: 5px;

    color: #64758e;

    font-size: 9px;
}


/* APPLICATIONS */

.applications-grid {
    grid-template-columns:
        repeat(2, 1fr);
}

.application-card {
    position: relative;

    min-height: 220px;

    padding: 27px;

    transition: .25s;
}

.application-icon {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    margin-bottom: 24px;

    border-radius: 11px;

    color: #54a4ff;

    background:
        rgba(49,130,255,.07);

    font-size: 18px;
    font-weight: 950;
}

.application-card h2 {
    margin-bottom: 8px;
}

.application-card p {
    color: #71819a;

    font-size: 10px;

    line-height: 1.7;
}

.application-card > b {
    position: absolute;

    right: 25px;
    bottom: 23px;

    color: #4b91f1;

    font-size: 18px;
}


/* FORM */

.form-card {
    max-width: 700px;

    padding: 28px;
}

.form-card form {
    display: flex;

    flex-direction: column;

    gap: 17px;
}

.form-card label {
    display: flex;

    flex-direction: column;

    gap: 7px;

    color: #8798b1;

    font-size: 9px;
    font-weight: 850;
}

.form-card input,
.form-card textarea {
    width: 100%;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 9px;

    outline: none;

    background:
        rgba(255,255,255,.025);

    color: white;

    padding: 12px;

    font-size: 11px;

    transition: .2s;
}

.form-card input:focus,
.form-card textarea:focus {
    border-color:
        rgba(49,130,255,.5);

    box-shadow:
        0 0 0 3px
        rgba(49,130,255,.07);
}

.form-card textarea {
    min-height: 130px;

    resize: vertical;
}

.form-submit {
    min-height: 48px;

    border: 0;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #205bdc,
            #3d91ff
        );

    color: white;

    font-size: 9px;
    font-weight: 950;

    cursor: pointer;
}


/* MINI SERVER */

.mini-server {
    position: fixed;

    left: 16px;
    bottom: 16px;

    z-index: 800;

    width: 145px;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(70,145,255,.2);

    border-radius: 7px;

    background:
        rgba(4,10,22,.94);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.35);
}

.mini-server-status {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 4px;

    color: #35e68b;

    font-size: 7px;
    font-weight: 950;
}

#miniStatusDot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #35e68b;

    box-shadow:
        0 0 8px
        #35e68b;
}

.mini-server-players {
    display: flex;

    align-items: baseline;

    gap: 5px;
}

.mini-server-players strong {
    font-size: 13px;
    font-weight: 950;
}

.mini-server-players span {
    color: #657790;

    font-size: 7px;
    font-weight: 850;
}


/* FOOTER */

footer {
    width:
        min(
            1160px,
            calc(100% - 40px)
        );

    min-height: 90px;

    margin: auto;

    padding:
        23px 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    color: #4e5e75;

    font-size: 8px;
}

.footer-brand strong {
    color: white;

    font-size: 14px;
    font-weight: 950;
}

.footer-brand strong span {
    color: #55a7ff;
}

.footer-brand small {
    display: block;

    margin-top: 2px;

    color: #34455e;

    font-size: 5px;

    letter-spacing: 3px;
}

.footer-links {
    display: flex;

    gap: 18px;
}

.footer-links a:hover {
    color: #55a7ff;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .main-nav {
        display: none;
    }

    .mobile-button {
        display: block;
    }

    .mobile-nav {
        position: fixed;

        top: 90px;
        left: 12px;
        right: 12px;

        z-index: 900;

        padding: 8px;

        border:
            1px solid
            rgba(67,136,236,.16);

        border-radius: 13px;

        background:
            rgba(3,9,20,.97);

        box-shadow:
            0 25px 80px
            rgba(0,0,0,.6);
    }

    .mobile-nav.show {
        display: flex;

        flex-direction: column;
    }

    .mobile-nav a {
        padding: 12px;

        border-radius: 8px;

        color: #8493a9;

        font-size: 10px;
        font-weight: 850;
    }

    .mobile-nav a:hover {
        color: white;

        background:
            rgba(49,130,255,.08);
    }

    .hero {
        grid-template-columns: 1fr;

        padding-top: 135px;
    }

    .hero-decoration {
        display: none;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 650px) {

    .navbar {
        top: 8px;

        width:
            calc(100% - 16px);

        height: 60px;

        padding-left: 10px;
    }

    .nav-players {
        display: none;
    }

    .language-switch {
        display: none;
    }

    .discord-button {
        width: 38px;

        justify-content: center;

        padding: 0;

        font-size: 0;
    }

    .discord-button span:first-child {
        font-size: 14px;
    }

    .profile-button span,
    .profile-button i {
        display: none;
    }

    .profile-button {
        width: 39px;

        justify-content: center;

        padding: 2px;
    }

    .hero,
    .features-section,
    .final-cta,
    .page {
        width:
            calc(100% - 26px);
    }

    .hero {
        padding-top: 120px;
    }

    .hero h1 {
        font-size:
            clamp(
                43px,
                13vw,
                65px
            );

        letter-spacing: -3px;
    }

    .hero-description {
        font-size: 11px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-primary,
    .hero-secondary {
        width: 100%;
    }

    .section-heading {
        display: block;
    }

    .section-heading > p {
        margin-top: 12px;
    }

    .final-cta {
        display: block;
    }

    .final-cta h2 {
        font-size: 31px;
    }

    .cta-button {
        width: 100%;

        justify-content: center;

        margin-top: 22px;
    }

    .rules-grid,
    .staff-grid,
    .applications-grid {
        grid-template-columns: 1fr;
    }

    .page-hero h1 {
        font-size: 45px;

        letter-spacing: -3px;
    }

    footer {
        width:
            calc(100% - 26px);

        flex-direction: column;

        align-items: flex-start;
    }

    .footer-links {
        flex-wrap: wrap;
    }

    .mini-server {
        left: 10px;
        bottom: 10px;

        width: 135px;
    }

}

/* =========================================================
   BIGGER / CLEANER TYPOGRAPHY
========================================================= */

html {
    font-size: 16px;
}

body {
    font-size: 16px;
}

/* NAV */

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

.brand strong {
    font-size: 19px;
}

.brand small {
    font-size: 8px;
}

.discord-button {
    font-size: 12px;
}

.profile-button span {
    font-size: 12px;
}

.language {
    font-size: 10px;
}

.nav-players strong {
    font-size: 12px;
}


/* HERO */

.hero h1 {
    font-size: clamp(58px, 7vw, 94px);
}

.hero-description {
    font-size: 16px;
    line-height: 1.8;
    max-width: 650px;
}

.eyebrow p {
    font-size: 9px;
}

.hero-primary,
.hero-secondary {
    font-size: 12px;
}


/* SECTIONS */

.section-heading h2 {
    font-size: clamp(34px, 4vw, 48px);
}

.section-heading > p {
    font-size: 13px;
}

.feature-card h3 {
    font-size: 19px;
}

.feature-card p {
    font-size: 13px;
    line-height: 1.8;
}


/* CTA */

.final-cta h2 {
    font-size: clamp(34px, 4vw, 50px);
}

.final-cta small {
    font-size: 9px;
}

.cta-button {
    font-size: 12px;
}


/* OTHER PAGES */

.page-hero h1 {
    font-size: clamp(52px, 6vw, 78px);
}

.page-hero > p:last-child {
    font-size: 15px;
    line-height: 1.8;
}

.content-card h2 {
    font-size: 25px;
}

.content-card p {
    font-size: 14px;
    line-height: 1.9;
}


/* RULES */

.rule-card h2 {
    font-size: 22px;
}

.rule-card p {
    font-size: 14px;
    line-height: 1.8;
}


/* STAFF */

.staff-card h2 {
    font-size: 20px;
}

.staff-card p {
    font-size: 12px;
}


/* APPLICATIONS */

.application-card h2 {
    font-size: 22px;
}

.application-card p {
    font-size: 13px;
    line-height: 1.8;
}


/* FORM */

.form-card label {
    font-size: 12px;
}

.form-card input,
.form-card textarea {
    font-size: 14px;
}

.form-submit {
    font-size: 12px;
}


/* FOOTER */

.footer-links {
    font-size: 11px;
}

footer {
    font-size: 11px;
}


/* MOBILE */

@media (max-width: 650px) {

    .hero h1 {
        font-size: clamp(46px, 14vw, 68px);
        letter-spacing: -3px;
    }

    .hero-description {
        font-size: 14px;
    }

    .feature-card h3 {
        font-size: 18px;
    }

    .feature-card p {
        font-size: 13px;
    }

    .page-hero h1 {
        font-size: 48px;
    }

    .page-hero > p:last-child {
        font-size: 14px;
    }

}

/* =========================================================
   APPLICATION VIEW
========================================================= */

.application-view {
    width:
        min(
            1050px,
            calc(100% - 30px)
        );

    margin: auto;

    padding:
        145px 0 90px;
}


/* HEADER */

.application-view-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
}

.application-view-header small {
    color: #4f96f5;

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 3px;
}

.application-view-header h1 {
    margin-top: 10px;

    font-size:
        clamp(
            42px,
            6vw,
            70px
        );

    line-height: .95;

    letter-spacing: -3px;
}

.application-view-header p {
    margin-top: 12px;

    color: #71829a;

    font-size: 14px;
}

.application-view-header p strong {
    color: #61a8ff;
}


/* STATUS */

.big-status {
    display: inline-flex;

    align-items: center;

    padding:
        10px 15px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 900;
}

.big-status.pending {
    color: #ffc65a;

    background:
        rgba(255,198,90,.08);

    border:
        1px solid
        rgba(255,198,90,.15);
}

.big-status.accepted {
    color: #35e68b;

    background:
        rgba(53,230,139,.08);

    border:
        1px solid
        rgba(53,230,139,.15);
}

.big-status.rejected {
    color: #ff7187;

    background:
        rgba(255,113,135,.08);

    border:
        1px solid
        rgba(255,113,135,.15);
}


/* BASIC INFO */

.application-info-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;

    margin-bottom: 12px;
}

.application-info-card {
    padding: 20px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius: 13px;

    background:
        rgba(255,255,255,.022);
}

.application-info-card span {
    display: block;

    margin-bottom: 8px;

    color: #536781;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 1.5px;
}

.application-info-card strong {
    color: #eaf1fc;

    font-size: 15px;
}


/* SECTION */

.application-section {
    margin-top: 12px;

    padding: 25px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius: 14px;

    background:
        rgba(255,255,255,.018);
}

.application-section-title {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 14px;

    margin-bottom: 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.05);
}

.application-section-title span {
    color: #4e96f4;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 2px;
}

.application-section-title small {
    color: #53647c;

    font-size: 8px;
    font-weight: 850;
}


/* DISCORD */

.discord-details {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;
}

.discord-details span {
    display: block;

    margin-bottom: 6px;

    color: #53647d;

    font-size: 9px;
}

.discord-details strong {
    color: #e9f1ff;

    font-size: 14px;

    word-break: break-all;
}


/* ANSWERS */

.application-answer {
    color: #a1afc2;

    font-size: 15px;

    line-height: 1.9;

    white-space: normal;

    overflow-wrap: anywhere;
}


/* ACTIONS */

.application-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 9px;

    margin-top: 20px;
}

.application-actions form {
    margin: 0;
}

.application-back,
.application-accept,
.application-reject {
    min-height: 46px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0 16px;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 900;

    cursor: pointer;

    transition: .2s;
}

.application-back {
    border:
        1px solid
        rgba(255,255,255,.07);

    color: #8191a8;

    background:
        rgba(255,255,255,.025);
}

.application-accept {
    border: 0;

    color: white;

    background:
        linear-gradient(
            135deg,
            #138b61,
            #35c989
        );

    box-shadow:
        0 8px 30px
        rgba(53,230,139,.12);
}

.application-reject {
    border:
        1px solid
        rgba(255,105,130,.15);

    color: #ff7187;

    background:
        rgba(255,105,130,.045);
}

.application-back:hover,
.application-accept:hover,
.application-reject:hover {
    transform:
        translateY(-2px);
}

.already-processed {
    padding:
        13px 16px;

    border-radius: 9px;

    color: #65768e;

    background:
        rgba(255,255,255,.025);

    font-size: 10px;
}


/* ADMIN TABLE UPDATES */

.admin-table-head,
.admin-row {
    grid-template-columns:
        55px
        1.1fr
        1.2fr
        .8fr
        .55fr
        .9fr
        1fr;
}

.app-discord strong {
    display: block;

    color: #b8c7da;

    font-size: 11px;
}

.app-discord small {
    display: block;

    margin-top: 3px;

    color: #4f6079;

    font-size: 8px;
}

.app-age {
    color: #a6b5c9;

    font-size: 11px;
    font-weight: 800;
}

.admin-action.view {
    color: #63a8ff;

    border-color:
        rgba(70,145,255,.15);

    background:
        rgba(49,130,255,.05);
}

.admin-action.view:hover {
    color: white;

    border-color:
        rgba(70,145,255,.35);

    background:
        rgba(49,130,255,.1);
}


/* EMPTY */

.admin-empty {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    padding: 65px 20px;
}

.admin-empty strong {
    color: #8494aa;

    font-size: 14px;
}

.admin-empty span {
    color: #53647b;

    font-size: 10px;
}


/* MOBILE */

@media (max-width: 800px) {

    .application-view-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .application-info-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .application-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .application-back,
    .application-accept,
    .application-reject {
        width: 100%;
    }

}


@media (max-width: 550px) {

    .application-view {
        padding-top: 105px;
    }

    .application-info-grid {
        grid-template-columns: 1fr;
    }

    .discord-details {
        grid-template-columns: 1fr;
    }

    .application-section {
        padding: 18px;
    }

    .application-answer {
        font-size: 13px;
    }

}