body{
    margin:0;
    background:#0b0f14;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
}


/* Header */

header{

    background:#111827;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    gap:40px;

    padding:20px 50px;

    border-bottom:2px solid #263244;

}


.logo{

    font-size:42px;

    font-weight:bold;

    color:#4ea8ff;

    white-space:nowrap;

}



nav{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

}



nav a{

    color:white;

    text-decoration:none;

    margin-right:10px;

    padding:10px 12px;

    border-radius:8px;

    transition:0.3s;

    white-space:nowrap;

}



nav a:hover{

    background:#4ea8ff;

}

.logo{

    font-size:42px;

    font-weight:bold;

    color:#4ea8ff;

}



nav a{

    color:white;

    text-decoration:none;

    margin-left:15px;

    padding:10px 18px;

    border-radius:8px;

    transition:0.3s;

}


nav a:hover{

    background:#4ea8ff;

}




/* Hero */

.hero{

    position:relative;
    overflow:hidden;
    text-align:center;

    padding:20px;

    min-height:350px;

    display:flex;

    flex-direction:column;

    justify-content:center;


    background:

    linear-gradient(
        rgba(5,10,20,0.55),
        rgba(5,10,20,0.95)
    ),

    url("/static/images/hero-bg.png");


    background-size:cover;

    background-position:center;

}



.hero h1{

    font-size:80px;

    margin:0;

    color:#4ea8ff;

    letter-spacing:5px;


    text-shadow:

    0 0 0px #4ea8ff,

    0 0 10px #4ea8ff,

    0 0 15px #1900ff;

}



.tagline{

    margin-top:20px;

    font-size:26px;

    color:#cbd5e1;

}




/* Buttons */

.button{

    display:inline-block;

    margin:8px;

    padding:15px 35px;

    background:#4ea8ff;

    color:white;

    text-decoration:none;

    border-radius:10px;

    font-weight:bold;

}


.button:hover{

    background:#2f8fff;

}




/* Status */

.status{

    max-width:1200px;

    margin:60px auto;

    padding:0 20px;

}



.status h2{

    width:100%;

    text-align:center;

    margin-bottom:30px;

}




/* GRID */

.server-grid{

    display:grid;

    grid-template-columns:repeat(4,260px);

    gap:20px;

    justify-content:center;

}




/* SERVER CARD */

.server-card{

    background:

    rgba(30,41,59,0.85);


    border:1px solid #263244;


    border-radius:16px;


    padding:15px;


    width:260px;


    min-height:420px;


    box-sizing:border-box;


    text-align:center;


    display:flex;

    flex-direction:column;


    box-shadow:

    0 10px 30px rgba(0,0,0,0.5);


    transition:0.3s;

}


.server-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 15px 35px rgba(78,168,255,0.35);

}




/* Logos */

.server-logo{

    width:80px;

    height:45px;

    object-fit:contain;

    margin:0 auto 10px auto;

}




/* Titles */

.server-card h2{

    color:#4ea8ff;

    font-size:22px;

    margin:8px 0;

}




/* Status */

.status-online{

    color:#00cc66;

    font-weight:bold;

    font-size:20px;

    margin:8px;

}



.status-offline{

    color:#cc3333;

    font-weight:bold;

    font-size:20px;

    margin:8px;

}




/* INFO */

.server-info{

    flex:1;

}



.server-card p{

    color:#cbd5e1;

    font-size:15px;

    margin:8px 0;

}



.description{

    color:#cbd5e1;

    font-size:14px;

}




/* PLAYER BAR */

.player-bar{

    height:10px;

    background:#111827;

    border-radius:10px;

    overflow:hidden;

    margin:10px 0 15px 0;

}



.player-fill{

    height:100%;

    background:#4ea8ff;

}




/* CARD BUTTON */

.server-card .button{

    margin-top:auto;

    font-size:14px;

    padding:10px 25px;

}




/* SERVER COLOURS */

.server-card.vanilla-card{

    border:2px solid #00cc66;

}


.server-card.modded-card{

    border:2px solid #4ea8ff;

}


.server-card.terraria-card{

    border:2px solid #b56cff;

}


.server-card.teamspeak-card{

    border:2px solid #ff9933;

}



/* ABOUT */

.about-card{

    width:100%;

    margin-top:40px;

    background:

    rgba(30,41,59,0.85);


    border:1px solid #263244;


    border-radius:16px;


    padding:30px;


    text-align:center;

}




/* FOOTER */

footer{

    background:#111827;

    border-top:1px solid #263244;

    text-align:center;

    padding:30px;

    color:#94a3b8;

    margin-top:80px;

}




/* Mobile */

@media(max-width:1200px){

    .server-grid{

        grid-template-columns:repeat(2,260px);

    }

}



@media(max-width:700px){

    .server-grid{

        grid-template-columns:260px;

    }

}

/* Server Card Colours */

.server-grid .server-card:nth-child(1){

    border:2px solid #00cc66; /* Vanilla DayZ */

}


.server-grid .server-card:nth-child(2){

    border:2px solid #4ea8ff; /* Modded DayZ */

}


.server-grid .server-card:nth-child(3){

    border:2px solid #b56cff; /* Terraria */

}


.server-grid .server-card:nth-child(4){

    border:2px solid #ff9933; /* TeamSpeak */

}

/* TeamSpeak Logo Size */

.teamspeak-logo{

    width:220px;

    height:70px;

    object-fit:contain;

    margin:0 auto 10px auto;

}

/* Rules Box */

.rules-card{

    margin:40px auto;

    width:900px;

    max-width:90%;

    text-align:center;

}


.rules-card h2{

    text-align:center;

}


.rules-card p{

    text-align:left;

}

/* Page Headings */

.status h1{

    width:100%;

    text-align:center;

    color:#4ea8ff;

    margin-bottom:30px;

}


/* Page Specific Grids */


/* News */

.news-page .server-grid{

    grid-template-columns:repeat(3,260px);

    justify-content:center;

}



/* Discord */

.discord-page .server-grid{

    grid-template-columns:repeat(2,260px);

    justify-content:center;

}



/* Downloads */

.downloads-page .server-grid{

    grid-template-columns:repeat(3,260px);

    justify-content:center;

}



/* Gallery */

.gallery-page .server-grid{

    grid-template-columns:repeat(2,260px);

    justify-content:center;

}



/* TeamSpeak Logo Size */

.teamspeak-logo{

    width:220px;

    height:70px;

    object-fit:contain;

    margin:0 auto 10px auto;

}



/* Rules Box */

.status .server-card{

    margin:40px auto;

    max-width:1200px;

    text-align:center;

}


.status .server-card h2{

    text-align:center;

}


.status .server-card p{

    text-align:center;

}

/* Discord Page - Single Card Centre */

.status.discord-page .server-grid{

    display:grid;

    grid-template-columns:260px;

    gap:20px;

    justify-content:center;

    width:100%;

    margin:0 auto;

}

/* News Page */

.status.news-page .server-grid{

    display:grid;

    grid-template-columns:repeat(3,260px);

    gap:20px;

    justify-content:center;

    margin:0 auto;

}

/* About Page */

.about-page .server-grid{

    grid-template-columns:repeat(3,260px);

    justify-content:center;

}


.about-page .server-card{

    min-height:350px;

}


.about-page ul{

    text-align:left;

    color:#cbd5e1;

    line-height:1.8;

}

/* ABOUT PAGE */


.about-page{

    max-width:1200px;

    margin:60px auto;

    padding:0 20px;

}




.about-hero{

    text-align:center;

    padding:80px 20px;

    background:

    linear-gradient(
        rgba(5,10,20,0.55),
        rgba(5,10,20,0.95)
    ),

    url("/static/images/hero-bg.png");


    background-size:cover;

    border-radius:16px;

    margin-bottom:40px;

}



.about-hero h1{

    font-size:60px;

    color:#4ea8ff;

}



.about-hero p{

    font-size:26px;

    color:#cbd5e1;

}





.about-section{


    background:
    rgba(30,41,59,0.85);


    border:2px solid #263244;

    border-radius:16px;

    padding:30px;

    margin-bottom:30px;

    text-align:center;

}



.about-section h2,
.about-card h2{

    color:#4ea8ff;

}





.about-columns{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}



.about-card{

    background:
    rgba(30,41,59,0.85);


    border:2px solid #263244;

    border-radius:16px;

    padding:30px;

    text-align:center;

}



.about-card ul{

    text-align:left;

    color:#cbd5e1;

    line-height:1.8;

}



.about-page p{

    color:#cbd5e1;

    line-height:1.6;

}

/* Fix About Columns */

.about-columns .about-card{

    width:auto;

    margin-top:0;

}

.about-section ul{

    text-align:left;

    max-width:600px;

    margin:auto;

    color:#cbd5e1;

    line-height:1.8;

}

/* District One History Timeline */


.timeline{

    max-width:900px;

    margin:40px auto;

}



.timeline-item{

    background:
    rgba(30,41,59,0.85);

    border-left:4px solid #4ea8ff;

    border-radius:12px;

    padding:25px;

    margin-bottom:20px;

}



.timeline-item h2{

    color:#4ea8ff;

    margin-top:0;

}




.about-section h3{

    color:#4ea8ff;

}



.about-section ul{

    text-align:left;

    max-width:700px;

    margin:20px auto;

    color:#cbd5e1;

    line-height:1.8;

}

/* Header Navigation Fix */

header{

    display:flex;

    align-items:left;

}


nav{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    justify-content:flex-end;

}



nav a{

    white-space:nowrap;

}

/* Player Stats */


.stats-table {
    background: rgba(18, 26, 42, 0.82);
    border: 1px solid rgba(70, 170, 255, 0.35);
    border-radius: 14px;
    padding: 20px;
    margin-top: 20px;

    backdrop-filter: blur(8px);

    box-shadow:
        0 0 18px rgba(0,150,255,.12),
        inset 0 0 12px rgba(255,255,255,.03);

    overflow: hidden;
}



.stats-table table{

    width:100%;

    border-collapse:collapse;

}



.stats-table th{

    color:#4ea8ff;

    padding:15px;

    font-size:18px;

}



.stats-table td{

    color:#cbd5e1;

    padding:15px;

    text-align:center;

    border-bottom:1px solid #263244;

}



.stats-table tr:hover{

    background:rgba(78,168,255,0.15);

}

/* Rank Medals */


.rank-medal{

    width:50px;

    height:50px;

    object-fit:contain;

    display:block;

    margin:auto;

}


.stats-table .rank{

    text-align:center;

}

.kd-column {
    white-space: nowrap;
    min-width: 60px;
}

/* ==========================================
   DISTRICT ONE Animated Logo Line
========================================== */

.logo-container{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.logo-line{

    position:relative;

    width:100%;
    height:1px;

    margin-top:6px;

    background:rgba(180,190,205,.20);

    overflow:hidden;

}

.logo-pulse{

    position:absolute;

    left:-40px;

    width:40px;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        #3cb8ff,
        #ffffff,
        #3cb8ff,
        transparent
    );

    box-shadow:
        0 0 4px #3cb8ff,
        0 0 8px #3cb8ff;

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

@keyframes districtPulse{

    0%{

        left:-40px;
        opacity:0;

    }

    10%{

        opacity:1;

    }

    50%{

        left:100%;
        opacity:1;

    }

    60%{

        opacity:1;

    }

    100%{

        left:-40px;
        opacity:0;

    }

}



/* ==========================================
   HERO NETWORK ANIMATION
========================================== */

.hero{
    position:relative;
    overflow:hidden;
}

.hero-network{

    position:absolute;
    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:1;
}

.hero h1,
.hero .tagline,
.hero .buttons{

    position:relative;
    z-index:2;
}

.beam{

    position:absolute;

    width:220%;
    height:2px;

    left:-60%;

    opacity:.18;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(0,80,255,.7),
        rgba(60,180,255,1),
        rgba(0,80,255,.7),
        transparent
    );
}

.beam1{

    top:18%;

    transform:rotate(-8deg);

    animation:beam1 90s linear infinite;
}

.beam2{

    top:38%;

    transform:rotate(6deg);

    animation:beam2 35s linear infinite;
}

.beam3{

    top:62%;

    transform:rotate(-5deg);

    animation:beam3 28s linear infinite;
}

.beam4{

    top:80%;

    transform:rotate(10deg);

    animation:beam4 40s linear infinite;
}

@keyframes beam1{

    from{transform:translateX(-12%) rotate(-8deg);}
    to{transform:translateX(12%) rotate(-8deg);}

}

@keyframes beam2{

    from{transform:translateX(12%) rotate(6deg);}
    to{transform:translateX(-12%) rotate(6deg);}

}

@keyframes beam3{

    from{transform:translateX(-15%) rotate(-5deg);}
    to{transform:translateX(15%) rotate(-5deg);}

}

@keyframes beam4{

    from{transform:translateX(10%) rotate(10deg);}
    to{transform:translateX(-10%) rotate(10deg);}

}

/* ==========================================
   Hero Ambient Lighting
========================================== */

.hero::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    left:-250px;
    top:-250px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(70,170,255,.16) 0%,
            rgba(70,170,255,.08) 35%,
            transparent 10%);

    filter:blur(100px);

    pointer-events:none;

    animation:heroGlow1 10s ease-in-out infinite alternate;

    z-index:0;
}

.hero::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:-250px;
    bottom:-250px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(70,170, 255,.16) 0%,
            rgba(70, 170, 255,.08) 35%,
            transparent 10%);

    filter:blur(120px);

    pointer-events:none;

    animation:heroGlow2 10s ease-in-out infinite alternate;

    z-index:0;
}

.hero h1,
.hero .tagline,
.hero .buttons,
.hero-network{

    position:relative;

    z-index:2;
}

@keyframes heroGlow1{

    0%{

        transform:
            translate(0px,0px)
            scale(1);

    }

    50%{

        transform:
            translate(550px,100px)
            scale(2.15);

    }

    100%{

        transform:
            translate(1900px,-40px)
            scale(.95);

    }

}

@keyframes heroGlow2{

    0%{

        transform:
            translate(0px,0px)
            scale(.9);

    }

    50%{

        transform:
            translate(-550px,-120px)
            scale(2.1);

    }

    100%{

        transform:
            translate(-1100px,40px)
            scale(1);

    }

}

/* ==========================================
   Retro 80s Grid
========================================== */

.hero-grid{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:220px;

    overflow:hidden;

    pointer-events:none;

    opacity:.35;

    z-index:1;
}

.hero-grid svg{

    width:100%;
    height:100%;
}

.hero-grid line{

    stroke:#4ea8ff;

    stroke-width:1.5;

    opacity:.55;

    filter:drop-shadow(0 0 4px rgba(78,168,255,.6));
}

/*======================================================
    DISTRICT ONE PLAYER STATS THEME
======================================================*/

.stats-page
{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}


/*----------------------------------
    Left & Right Panels
-----------------------------------*/

.stats-page::before,
.stats-page::after
{
    content: "";

    position: fixed;

    top: 70px;
    bottom: 0;

    width: 220px;

    pointer-events: none;

    z-index: 0;
}


/* Left */

.stats-page::before
{
    left: 0;

    background:
        radial-gradient(circle at center,
            rgba(0,170,255,.18),
            transparent 70%),

        url("../images/hex-pattern.svg")
        center center
        repeat-y;
}

.stats-page::after
{
    right: 0;

    background:
        radial-gradient(circle at center,
            rgba(0,170,255,.18),
            transparent 70%),

        url("../images/hex-pattern.svg")
        center center
        repeat-y;
}


/*----------------------------------
    Keep Content Above Decorations
-----------------------------------*/

.status
{
    position: relative;
    z-index: 5;
}


/*----------------------------------
    Improve Headings
-----------------------------------*/

.status h1
{
    position: relative;

    margin-bottom: 35px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #63c8ff;
}


/* Blue line underneath */

.status h1::after
{
    content: "";

    display: block;

    width: 140px;

    height: 2px;

    margin: 12px auto 0;

    background: linear-gradient(
        to right,
        transparent,
        #00aaff,
        transparent
    );
}


/*----------------------------------
    Table Glow
-----------------------------------*/

.stats-table
{
    position: relative;

    border-radius: 12px;

    box-shadow:
        0 0 25px rgba(0,170,255,.12);
}


/*----------------------------------
    Row Hover
-----------------------------------*/

.stats-table tr
{
    transition: .25s;
}

.stats-table tr:hover
{
    background: rgba(0,170,255,.08);
}


/*----------------------------------
    Smooth Animation
-----------------------------------*/

.stats-page::before,
.stats-page::after
{
    animation: glowpulse 8s ease-in-out infinite;
}


@keyframes glowpulse
{

0%
{
    opacity:.25;
}

50%
{
    opacity:.7;
}

100%
{
    opacity:.25;
}

}

tbody tr{
    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

tbody tr:hover{

    background:rgba(70,170,255,.08);

    transform:translateX(4px);

    box-shadow:
        inset 4px 0 0 rgba(70,170,255,.8);
}

th{

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:13px;

    font-weight:600;

    padding:18px 14px;

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

/* ==========================================
   RETRO SIDE GRIDS
========================================== */

.stats-page{
    position: relative;
}

/* ===========================
   LEFT GRID
=========================== */

.stats-page::before{

    content:"";

    position:fixed;

    top:0;
    left:0;

    width:800px;
    height:100vh;

    pointer-events:none;

    opacity:.12;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(0,180,255,.35) 0px,
            rgba(0,180,255,.35) 1px,
            transparent 1px,
            transparent 28px
        ),
        repeating-linear-gradient(
            180deg,
            rgba(0,180,255,.35) 0px,
            rgba(0,180,255,.35) 1px,
            transparent 1px,
            transparent 28px
        );

    transform:
        perspective(600px)
        rotateY(35deg);

    transform-origin:left center;

    mask-image:linear-gradient(
        to right,
        black 0%,
        black 85%,
        transparent 100%
    );
}


/* ===========================
   RIGHT GRID
=========================== */

.stats-page::after{

    content:"";

    position:fixed;

    top:0;
    right:0;

    width:800px;
    height:100vh;

    pointer-events:none;

    opacity:.12;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(0,180,255,.35) 0px,
            rgba(0,180,255,.35) 1px,
            transparent 1px,
            transparent 28px
        ),
        repeating-linear-gradient(
            180deg,
            rgba(0,180,255,.35) 0px,
            rgba(0,180,255,.35) 1px,
            transparent 1px,
            transparent 28px
        );

    transform:
        perspective(600px)
        rotateY(-35deg);

    transform-origin:right center;

    mask-image:linear-gradient(
        to left,
        black 0%,
        black 85%,
        transparent 100%
    );
}

.dropdown {

    position: relative;
    display: inline-block;

}


.dropbtn {

    cursor:pointer;

}


.dropdown-content {

    display:none;

    position:absolute;

    top:100%;
    left:0;

    background:#111;

    min-width:160px;

    border:1px solid #00aaff;

    z-index:1000;

}


.dropdown-content a {

    display:block;

    padding:12px 16px;

    color:white;

    text-decoration:none;

}


.dropdown-content a:hover {

    background:#0066aa;

}


.dropdown:hover .dropdown-content {

    display:block;

}

/* ==========================================
   PLAYER STATS DROPDOWN
========================================== */


.dropdown {

    position:relative;

    display:inline-block;

}



.dropdown-content {

    display:none;

    position:absolute;

    top:100%;

    left:0;

    background:#111827;

    min-width:160px;

    border:1px solid #4ea8ff;

    border-radius:8px;

    z-index:9999;

}



.dropdown-content a {

    display:block;

    margin:0;

    padding:12px 16px;

    color:white;

    text-decoration:none;

    white-space:nowrap;

}



.dropdown-content a:hover {

    background:#0066aa;

}



.dropdown:hover .dropdown-content {

    display:block;

}

/* TEST DROPDOWN */

.dropdown {
    position: relative !important;
}


.dropdown-content {
    display: none;
    position: absolute !important;
    top: 50px !important;
    left: 0 !important;
    background: red !important;
    width: 200px !important;
    height: 100px !important;
    z-index: 999999 !important;
}


.dropdown:hover .dropdown-content {
    display: block !important;
}

/* ===============================
   PLAYER STATS MENU
================================ */

.stats-dropdown {

    position:relative;

    display:inline-block;

}


.stats-dropdown-menu {

    display:none;

    position:absolute;

    top:100%;

    left:0;

    background:#111827;

    min-width:160px;

    border:1px solid #4ea8ff;

    border-radius:8px;

    z-index:99999;

}


.stats-dropdown-menu a {

    display:block;

    padding:12px 16px;

    margin:0;

    color:white;

    text-decoration:none;

    white-space:nowrap;

}


.stats-dropdown-menu a:hover {

    background:#0066aa;

}


.stats-dropdown:hover .stats-dropdown-menu {

    display:block;

}