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

body {

    background:
        linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.78)),
        url("images/saxton_bg.png");

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    color: #2EDE0D;

    font-family: 'Share Tech Mono', monospace;

    min-height: 100vh;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    overflow-x:hidden;

    overflow-y:auto;
	
	animation:fadeIn .5s ease;

}

/* Háttérfény */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    background:
        radial-gradient(circle at center,
        #2EDE0D 0%,
        transparent 70%);

    opacity: .04;

    pointer-events: none;

}

/* Konténer */

.container {

    width: 100%;

    max-width: 1400px;

    text-align: center;

    padding:15px 20px 20px;

    position: relative;

}

/* ========================= */
/*          LOGO             */
/* ========================= */

.logo{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:15px 0 20px;

}

.logo img{

    width:100%;

    max-width:950px;

    height:auto;

    filter:none;

    transition:
        transform .3s,
        filter .3s;

}

.logo img:hover{

    transform:scale(1.02);

    filter:none;

}

/* ========================= */
/*          MENÜ             */
/* ========================= */

.navbar {

    display: flex;

    justify-content: center;

    gap: 26px;

    flex-wrap: wrap;

    margin-top:0px;

    margin-bottom:65px;

}

.navbar a {

    color: #2EDE0D;

    text-decoration: none;

    border: 2px solid #2EDE0D;

    padding: 12px 24px;

    text-transform: uppercase;

    letter-spacing: 2px;

    transition: .25s;

}

.navbar a:hover {

    background: #2EDE0D;

    color: #000;

    transform:translateY(-5px) scale(1.05);

    box-shadow:
        0 0 10px #2EDE0D,
        0 0 20px #2EDE0D,
        0 0 35px #2EDE0D;

}

/* ========================= */
/*       SZERVER BLOKK       */
/* ========================= */

.server-title {

    font-size: 32px;

    letter-spacing: 3px;

    margin-bottom: 18px;

    text-shadow:
        0 0 10px #2EDE0D,
        0 0 20px #2EDE0D;

}

.server-banner{

    margin-bottom:30px;

}

.server-banner img {

    max-width: 100%;

    border: 2px solid #2EDE0D;

    transition: .3s;

    box-shadow:
        0 0 15px #2EDE0D,
        0 0 30px #2EDE0D;


}

.server-banner img:hover {

    transform: scale(1.02);

    box-shadow:
        0 0 20px #2EDE0D,
        0 0 40px #2EDE0D,
        0 0 60px #2EDE0D;

}

/* ========================= */
/*        SZABÁLYZAT         */
/* ========================= */

.rules-box {

    width: 900px;

    max-width: 95%;

    margin: auto;

    padding: 35px;

    border: 2px solid #2EDE0D;

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

    box-shadow:
        0 0 20px rgba(57,255,20,.25);

}

.rules-box h2 {

    font-size: 34px;

    margin-bottom: 30px;

    text-shadow:
        0 0 10px #2EDE0D;

}

.rules-box ul {

    list-style: none;

    text-align: left;

}

.rules-box li {

    padding: 18px;

    margin-bottom: 15px;

    border-left: 4px solid #2EDE0D;

    background: rgba(57,255,20,.05);

    transition: .25s;

}

.rules-box li:hover {

    transform: translateX(10px);

    background: rgba(57,255,20,.12);

    box-shadow:
        0 0 12px rgba(57,255,20,.3);

}

/* ========================= */
/*         MOBIL             */
/* ========================= */

@media (max-width:768px) {

    .logo {

        font-size: 46px;

        letter-spacing: 5px;

        margin-bottom: 45px;

    }

    .logo::before,
    .logo::after {

        width: 70px;

    }

    .navbar {

        gap: 15px;

        margin-bottom: 50px;

    }

    .navbar a {

        padding: 10px 18px;

        font-size: 14px;

    }

    .server-title {

        font-size: 24px;

    }

    .server-banner img {

        width: 95%;

        height: auto;

    }

}

/* ========================= */
/*          RANGOK           */
/* ========================= */

.page-title {

    font-size: 42px;

    letter-spacing: 4px;

    margin-bottom: 60px;

    text-shadow:
        0 0 10px #2EDE0D,
        0 0 30px #2EDE0D;

}

.rank-container {

    display: flex;

    justify-content: center;

    align-items: stretch;

    flex-wrap: wrap;

    gap: 40px;

    margin-bottom: 90px;

}

/* ========================= */

.rank-card {

    position: relative;

    width: 340px;

    padding: 35px;

    overflow: hidden;

    background: #0b0b0b;

    border: 2px solid #2EDE0D;

    transition: .35s;

    box-shadow:
        0 0 12px rgba(57,255,20,.18);

}

.rank-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 100%;

    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(57,255,20,.18),
        transparent
    );

    transition: .7s;

}

.rank-card:hover::before {

    left: 120%;

}

.rank-card:hover {

    transform: translateY(-12px);

    box-shadow:
        0 0 25px #2EDE0D,
        0 0 50px rgba(57,255,20,.4);

}

/* ========================= */
/*      KIEMELT KÁRTYA       */
/* ========================= */

.featured {

    transform: scale(1.05);

    border-color: #8cff6a;

    box-shadow:
        0 0 25px rgba(57,255,20,.45);

}

.featured:hover {

    transform: scale(1.05) translateY(-12px);

}

.featured-text {

    position: absolute;

    top: 18px;

    right: -40px;

    width: 170px;

    padding: 6px 0;

    text-align: center;

    font-size: 13px;

    font-weight: bold;

    color: #000;

    background: #2EDE0D;

    transform: rotate(45deg);

}

/* ========================= */

.rank-header {

    text-align: center;

    margin-bottom: 30px;

}

.rank-header h2 {

    font-size: 38px;

    letter-spacing: 3px;

    margin-bottom: 10px;

    text-shadow:
        0 0 10px #2EDE0D;

}

.rank-price {

    font-size: 28px;

    color: #8fff73;

}

/* ========================= */

.rank-features {

    list-style: none;

    margin-bottom: 35px;

}

.rank-features li {

    padding: 14px 0;

    border-bottom: 1px solid rgba(57,255,20,.2);

    transition: .2s;

}

.rank-features li:hover {

    padding-left: 12px;

    color: #8fff73;

}

/* ========================= */

.buy-btn {

    display: block;

    width: 100%;

    padding: 15px;

    text-align: center;

    text-decoration: none;

    color: #2EDE0D;

    border: 2px solid #2EDE0D;

    letter-spacing: 2px;

    font-size: 18px;

    transition: .25s;

}

.buy-btn:hover {

    background: #2EDE0D;

    color: #000;

    box-shadow:
        0 0 20px #2EDE0D,
        0 0 40px #2EDE0D;

}

@media (max-width:1150px) {

    .rank-container {

        flex-direction: column;

        align-items: center;

    }

    .featured {

        transform: none;

    }

    .featured:hover {

        transform: translateY(-12px);

    }

}

/* ========================= */
/*       DISCORD BOX         */
/* ========================= */

.rank-footer {

    margin-top: 90px;

    padding: 50px;

    text-align: center;

    border: 2px solid #2EDE0D;

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

    box-shadow:
        0 0 20px rgba(57,255,20,.2);

}

.rank-footer h2 {

    font-size: 36px;

    margin-bottom: 20px;

    letter-spacing: 3px;

    text-shadow:
        0 0 10px #2EDE0D;

}

.rank-footer p {

    font-size: 18px;

    color: #b7ffad;

    margin-bottom: 35px;

}

.discord-button {

    display: inline-block;

    padding: 16px 45px;

    border: 2px solid #2EDE0D;

    color: #2EDE0D;

    text-decoration: none;

    font-size: 20px;

    letter-spacing: 2px;

    transition: .25s;

}

.discord-button:hover {

    background: #2EDE0D;

    color: #000;

    box-shadow:
        0 0 20px #2EDE0D,
        0 0 45px #2EDE0D;

}

/* ========================= */
/*      KISEBB KIJELZŐK      */
/* ========================= */

@media (max-width:900px) {

    .comparison h2 {

        font-size: 28px;

    }

    .comparison-table table {

        min-width: 700px;

    }

    .rank-footer {

        padding: 30px 20px;

    }

    .rank-footer h2 {

        font-size: 28px;

    }

    .rank-footer p {

        font-size: 16px;

    }

}

/* ========================= */
/*      GÖRGETŐSÁV           */
/* ========================= */

html{

    scrollbar-width: thin;
    scrollbar-color: #2EDE0D #000;

}

::-webkit-scrollbar{

    width:3px;

}

::-webkit-scrollbar-track{

    background:#000;

}

::-webkit-scrollbar-thumb{

    background:#2EDE0D;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#7cff58;

}

/* ========================= */
/*      KIJELÖLT SZÖVEG      */
/* ========================= */

::selection {

    background: #2EDE0D;

    color: #000;

}

@media (max-width:768px){

    body{

        background-position:center top;

        background-size:cover;

        background-attachment:scroll;

    }

}


/* ========================= */
/*       SERVER STATS        */
/* ========================= */

.server-stats{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:55px;

}

.stat-box{

    width:100%;

    max-width:320px;

    padding:22px;

    border:2px solid rgba(57,255,20,.35);

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(4px);

    transition:.25s;

}

.stat-box:hover{

    transform:translateY(-6px);

    border-color:#2EDE0D;

    box-shadow:
        0 0 18px rgba(57,255,20,.45);

}

.stat-icon{

    display:block;

    font-size:26px;

    margin-bottom:12px;

}

.stat-title{

    display:block;

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#86ff71;

    margin-bottom:10px;

}

.stat-value{

    display:block;

    font-size:22px;

    color:#2EDE0D;

    text-decoration:none;

    font-weight:bold;

}

.stat-value:hover{

    text-shadow:
        0 0 10px #2EDE0D;

}

/* ========================= */
/*      FUTURE SERVER        */
/* ========================= */

.future-server{

    width:100%;
    max-width:900px;

    margin:55px auto 0;

    padding:30px;

    border:2px solid rgba(57,255,20,.35);

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(6px);

    text-align:center;

    box-shadow:
        0 0 20px rgba(57,255,20,.18);

    transition:.3s;

}

.future-server:hover{

    border-color:#2EDE0D;

    box-shadow:
        0 0 25px rgba(57,255,20,.35);

}

.future-server h3{

    color:#2EDE0D;

    font-size:30px;

    margin-bottom:20px;

    text-shadow:
        0 0 10px #2EDE0D;

}

.future-server p{

    color:#d8ffd2;

    font-size:17px;

    line-height:1.8;

    margin-bottom:15px;

}

.future-server p:last-child{

    margin-bottom:0;

}

/* ========================= */
/*          FOOTER           */
/* ========================= */

.footer{

    width:100%;

    margin-top:45px;

    padding-top:15px;

    padding-bottom:8px;

    text-align:center;

    color:#86ff71;

    font-size:14px;

    letter-spacing:2px;

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

    opacity:.75;

}

.rank-price{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-top:10px;
}

.price-main{
    font-size:28px;
    font-weight:bold;
    color:#2EDE0D;
}

.price-or{
    font-size:16px;
    color:#86ff71;
    opacity:.8;
    text-transform:uppercase;
    letter-spacing:2px;
}

.price-alt{
    font-size:22px;
    color:#b7ffad;
}

.price-divider{
    width:70%;
    height:1px;
    background:rgba(57,255,20,.35);
    margin:12px 0;
}

.price-permanent{
    color:#FFD700;
    font-size:22px;
    font-weight:bold;
    text-shadow:
        0 0 8px #FFD700,
        0 0 16px rgba(255,215,0,.5);
}

/* ========================= */
/*      Support-box           */
/* ========================= */

.support-box{

    margin-top:60px;

    padding:35px;

    border:2px solid rgba(57,255,20,.35);

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    box-shadow:
        0 0 20px rgba(57,255,20,.18);

}

.support-box h2{

    margin-bottom:20px;

    font-size:30px;

    color:#2EDE0D;

    text-shadow:
        0 0 10px #2EDE0D;

}

.support-box p{

    color:#d8ffd2;

    font-size:17px;

    line-height:1.8;

    margin-bottom:18px;

}

.support-box p:last-child{

    margin-bottom:0;

}

/* ========================= */
/*      Join-server           */
/* ========================= */

.join-server{

    margin:10px 0 45px;

    text-align:center;

}

.join-btn{

    display:inline-block;

    padding:16px 42px;

    background:rgba(57,255,20,.08);

    color:#2EDE0D;

    text-decoration:none;

    font-size:20px;

    letter-spacing:2px;

    transition:.25s;

    box-shadow:
        0 0 10px rgba(57,255,20,.2);

}

.join-btn:hover{

    background:#2EDE0D;

    color:#000;

    transform:translateY(-3px);

    box-shadow:
        0 0 20px #2EDE0D,
        0 0 40px #2EDE0D;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes bgZoom{

    0%{

        background-size:100%;

    }

    100%{

        background-size:104%;

    }

}

/* ========================= */
/*        AKTIVITÁS          */
/* ========================= */

.activity-box{

    width:100%;
    max-width:950px;

    margin:0 auto;

    padding:35px;

    border:2px solid rgba(57,255,20,.35);

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    box-shadow:
        0 0 20px rgba(57,255,20,.18);

}

.activity-box p{

    color:#d8ffd2;

    font-size:18px;

    line-height:1.8;

    margin-bottom:30px;

    text-align:center;

}


/* ========================= */
/*     AKTIVITÁS TÁBLÁZAT    */
/* ========================= */

.activity-table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

}

.activity-table thead{

    background:rgba(57,255,20,.08);

}

.activity-table th{

    padding:18px;

    border-bottom:2px solid #2EDE0D;

    color:#2EDE0D;

    font-size:22px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.activity-table td{

    padding:18px;

    font-size:18px;

    color:#d8ffd2;

    border-bottom:1px solid rgba(57,255,20,.15);

    transition:.25s;

}

.activity-table tbody tr{

    transition:.25s;

}

.activity-table tbody tr:hover{

    background:rgba(57,255,20,.08);

    box-shadow:
        inset 0 0 12px rgba(57,255,20,.12);

}

.activity-table td:first-child{

    width:180px;

    text-align:center;

    font-size:22px;

    font-weight:bold;

    color:#2EDE0D;

    text-shadow:
        0 0 8px rgba(57,255,20,.45);

}

.activity-table td:last-child{

    padding-left:30px;

}


/* ========================= */
/*      FONTOS BLOKK         */
/* ========================= */

.activity-note{

    margin-top:45px;

    padding:28px;

    border:2px solid rgba(57,255,20,.25);

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

}

.activity-note h2{

    margin-bottom:20px;

    font-size:30px;

    color:#2EDE0D;

    text-shadow:
        0 0 10px #2EDE0D;

}

.activity-note ul{

    list-style:none;

}

.activity-note li{

    padding:12px 0;

    color:#d8ffd2;

    border-bottom:1px solid rgba(57,255,20,.12);

}

.activity-note li:last-child{

    border-bottom:none;

}


/* ========================= */
/*          MOBIL            */
/* ========================= */

@media (max-width:768px){

    .activity-box{

        padding:20px;

    }

    .activity-table th{

        font-size:16px;

        padding:14px 8px;

    }

    .activity-table td{

        font-size:15px;

        padding:14px 8px;

    }

    .activity-table td:first-child{

        width:90px;

        font-size:18px;

    }

}

/* ========================= */
/*       AKTIVITÁS DROPDOWN   */
/* ========================= */

.dropdown {

    position: relative;

    display: inline-block;

}


.dropdown > a {

    display: block;

}


.dropdown-content {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 200px;

    background: rgba(0,0,0,.95);

    border: 2px solid #2EDE0D;

    z-index: 999;

}


.dropdown-content a {

    display: block;

    border: none;

    padding: 12px 20px;

    color: #2EDE0D;

    text-decoration: none;

    text-align: left;

}


.dropdown-content a:hover {

    background: #2EDE0D;

    color: #000;

}


.dropdown:hover .dropdown-content {

    display: block;

}

.top10-title {
    margin-bottom: 25px;
}

.player-search{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-bottom:25px;

}

.player-search input{

    width:300px;

    padding:12px;

    background:#050505;

    border:2px solid #2EDE0D;

    color:#2EDE0D;

    font-family:'Share Tech Mono', monospace;

    outline:none;

}

.player-search input::placeholder{

    color:#5fa85a;

}

.player-search button{

    padding:12px 22px;

    background:#2EDE0D;

    color:#000;

    border:none;

    cursor:pointer;

    font-family:'Share Tech Mono', monospace;

    font-weight:bold;

    transition:.2s;

}

.player-search button:hover{

    box-shadow:0 0 12px #2EDE0D;

}

.player-card{

    width:700px;

    margin:30px auto;

    padding:25px;

    border:2px solid #2EDE0D;

    background:rgba(0,0,0,.45);

    color:#2EDE0D;

    font-family:'Share Tech Mono', monospace;

    text-align:left;

}

.player-card h3{

    text-align:center;

    margin-bottom:20px;

    color:#2EDE0D;

    text-shadow:0 0 10px #2EDE0D;

}

.player-card p{

    margin:12px 0;

    font-size:18px;

}

.player-link{
    color:#2EDE0D;
    text-decoration:none;
    transition:.2s;
}

.player-link:hover{
    text-shadow:0 0 10px #2EDE0D;
    color:#7CFF65;
}

.back-button{

display:inline-block;

margin-top:25px;

padding:12px 20px;

border:2px solid #2EDE0D;

color:#2EDE0D;

text-decoration:none;

transition:.2s;

}

.back-button:hover{

background:#2EDE0D;

color:black;

}

.player-card{

width:700px;

margin:auto;

padding:30px;

border:2px solid #2EDE0D;

background:rgba(0,0,0,.45);

color:#2EDE0D;

text-align:center;

}

.player-card p{

margin:14px 0;

font-size:18px;

}

.steam-link{

    color:#2EDE0D;

    text-decoration:none;

    font-weight:bold;

    transition:.2s;

}

.steam-link:hover{

    color:#7CFF65;

    text-shadow:0 0 10px #2EDE0D;

}