/* FXMOUS v0.3 - Base Theme */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root{
 --bg:#0d0d0f;
 --panel:#151518;
 --accent:#d92d2d;
 --accent2:#ff5555;
 --text:#fff;
 --muted:#bdbdbd;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 font-family:'Outfit',sans-serif;
 color:var(--text);
 background:var(--bg);
 overflow-x:hidden;
}
body::before{
 content:"";
 position:fixed;
 inset:0;
 background:
 linear-gradient(rgba(10,10,12,.45),rgba(10,10,12,.82)),
 url("https://images.minecraft.net/content/dam/archive/8d5c3d-placeholder-minecraft-landscape.jpg");
 background-size:cover;
 background-position:center;
 z-index:-2;
}
.clouds{
 position:absolute;
 inset:0;
 background:
 radial-gradient(circle at 20% 20%,rgba(255,255,255,.08),transparent 15%),
 radial-gradient(circle at 65% 30%,rgba(255,255,255,.06),transparent 18%),
 radial-gradient(circle at 90% 18%,rgba(255,255,255,.07),transparent 12%);
 animation:clouds 60s linear infinite;
 opacity:.45;
}
@keyframes clouds{
 from{transform:translateX(0)}
 to{transform:translateX(-200px)}
}
#navbar{
 position:fixed;
 top:0;left:0;width:100%;
 display:flex;justify-content:space-between;align-items:center;
 padding:22px 8%;
 backdrop-filter:blur(18px);
 background:rgba(15,15,18,.35);
 border-bottom:1px solid rgba(255,255,255,.08);
 z-index:1000;
 transition:.3s;
}
.logo{font-size:2rem;font-weight:900;color:var(--accent2)}
nav{display:flex;gap:2rem}
nav a{color:#fff;text-decoration:none;position:relative}
nav a:after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--accent2);transition:.3s}
nav a:hover:after{width:100%}
.hero{
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 position:relative;
 padding:120px 20px;
}
.hero-content{max-width:850px;z-index:2}
.badge{
 display:inline-block;
 padding:10px 18px;
 border-radius:999px;
 background:rgba(217,45,45,.18);
 border:1px solid rgba(255,85,85,.35);
 margin-bottom:24px;
}
.hero h1{font-size:clamp(3rem,8vw,6rem);line-height:1}
.hero p{margin:24px auto;max-width:700px;color:var(--muted);font-size:1.2rem}
.buttons{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.primary,.secondary{
 text-decoration:none;
 padding:16px 34px;
 border-radius:999px;
 font-weight:700;
 transition:.3s;
}
.primary{background:var(--accent);color:#fff}
.primary:hover{background:var(--accent2);transform:translateY(-4px)}
.secondary{border:1px solid rgba(255,255,255,.2);color:#fff}
.section-title{text-align:center;font-size:2.4rem;margin-bottom:50px}
.creations,.youtube,.contact{padding:100px 8%}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.card{
 background:rgba(21,21,24,.82);
 border:1px solid rgba(255,255,255,.06);
 border-radius:22px;
 padding:30px;
 transition:.3s;
}
.card:hover{transform:translateY(-8px);border-color:var(--accent2)}
.card-icon{font-size:2rem;margin-bottom:15px}
.youtube-box{
 max-width:800px;
 margin:auto;
 text-align:center;
 background:rgba(21,21,24,.82);
 padding:50px;
 border-radius:24px;
}
.youtube-box i{font-size:4rem;color:#ff3333;margin-bottom:20px}
.socials{display:flex;justify-content:center;gap:20px}
.socials a{
 width:60px;height:60px;border-radius:50%;
 display:grid;place-items:center;
 color:#fff;text-decoration:none;
 background:rgba(255,255,255,.06);
 transition:.3s;
}
.socials a:hover{background:var(--accent)}
footer{text-align:center;padding:35px;color:#8d8d8d}
@media(max-width:800px){
 nav{display:none}
}
.yt-thumb {
    width: 100%;
    border-radius: 18px;
    margin-bottom: 20px;
}
.socials{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:40px;
}

.socials a{
    width:70px;
    height:70px;

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

    border-radius:20px;

    font-size:30px;

    color:white;

    text-decoration:none;

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

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

    transition:.35s;
}

.socials a:hover{

    transform:translateY(-8px);

    background:#d92d2d;

    border-color:#ff5d5d;

    box-shadow:0 0 35px rgba(255,60,60,.45);

}
/* ========================= */
/* MINECRAFT NETWORKS */
/* ========================= */

.networks{
    padding:120px 8%;
}

.rainbow-title{

    text-align:center;

    font-size:3rem;

    font-weight:800;

    margin-bottom:60px;

    background:linear-gradient(
        90deg,
        #ff3b3b,
        #ff9800,
        #ffee00,
        #3cff4d,
        #00d5ff,
        #8a5cff,
        #ff3bcb,
        #ff3b3b
    );

    background-size:400%;

    animation:rainbow 10s linear infinite;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

@keyframes rainbow{

    from{
        background-position:0%;
    }

    to{
        background-position:400%;
    }

}

.featured-network{

    max-width:900px;

    margin:auto;

    margin-bottom:50px;

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

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

    border-radius:28px;

    padding:50px;

    text-align:center;

    transition:.35s;

    backdrop-filter:blur(18px);

}

.featured-network:hover{

    transform:translateY(-10px);

    border-color:#ff4a4a;

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

}

.network-grid{

    display:grid;

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

    gap:30px;

}

.network-card{

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

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

    border-radius:28px;

    padding:40px;

    text-align:center;

    transition:.35s;

    backdrop-filter:blur(18px);

}

.network-card:hover{

    transform:translateY(-10px);

    border-color:#ff4a4a;

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

}

.logo-box{

    height:240px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

}

.logo-box img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    transition:.35s;

}

.network-card:hover img,
.featured-network:hover img{

    transform:scale(1.05);

}

.ascend-logo{

    width:210px;

}

.memeverse-logo{

    width:340px;

}

.spearsmp-logo{

    width:340px;

}

.featured-network h3,
.network-card h3{

    font-size:2rem;

    margin-bottom:15px;

}

.server-status,
.player-count{

    font-size:1.35rem;

    margin:10px 0;

    color:#ddd;

}

.server-ip{

    margin-top:20px;

    margin-bottom:25px;

    font-size:1.25rem;

    font-weight:800;

    color:white;

}

.copy-btn{

    padding:18px 38px;

    border:none;

    border-radius:999px;

    background:#d92d2d;

    color:white;

    cursor:pointer;

    font-size:1.1rem;

    font-weight:700;

    transition:.3s;

}

.copy-btn:hover{

    background:#ff4747;

    transform:translateY(-3px);

}

@media(max-width:900px){

    .network-grid{

        grid-template-columns:1fr;

    }

}