/* =====================================
   Nexus 8 SMP Website
   Modern Minecraft-Inspired Theme
===================================== */


/* ---------- Variables ---------- */

:root {

    --background: #0f1115;

    --panel: #181c24;
    --panel-light: #222832;

    --border: #2a2f38;

    --primary: #4caf50;
    --secondary: #2196f3;

    --text: #f1ead7;
    --muted: #b8b3a8;

    --warning: #ffb347;
    --danger: #ff5555;

}



/* ---------- Reset ---------- */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}



body {

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


    background: var(--background);

    color: var(--text);

    line-height: 1.6;

}



/* ---------- General ---------- */


a {

    color: inherit;

    text-decoration: none;

}



p {

    color: var(--muted);

}



h1,
h2,
h3 {

    margin-bottom: 15px;

    color: var(--text);

}



section {

    max-width: 1200px;

    margin: 80px auto;

    padding: 0 30px;

}





/* ---------- Navigation ---------- */


header {

    position: sticky;

    top: 0;

    z-index: 100;


    background:

    rgba(15,17,21,0.9);


    backdrop-filter:

    blur(10px);


    border-bottom:

    1px solid var(--border);

}



nav {

    max-width: 1200px;

    margin: auto;


    display: flex;

    justify-content: center;

    align-items: center;


    gap: 30px;


    padding: 20px;

}



nav a {


    color: var(--text);


    transition: 0.3s;


}



nav a:hover {


    color: var(--primary);


}







/* ---------- Hero Section ---------- */


.hero {


    min-height: 80vh;


    display: flex;

    flex-direction: column;


    justify-content: center;

    align-items: center;


    text-align: center;



    background:


    linear-gradient(

        rgba(0,0,0,0.65),

        rgba(0,0,0,0.65)

    ),


    url("../assets/images/backgrounds/hero.jpg");



    background-size: cover;

    background-position: center;



    border-radius: 20px;


}



.hero-logo {


    width: 180px;


    margin-bottom: 25px;


}



.hero h1 {


    font-size: 4rem;


}



.hero-subtitle {


    max-width: 700px;


    font-size: 1.3rem;


}







/* ---------- Page Header ---------- */


.page-header {


    text-align: center;


}



.page-header h1 {


    font-size: 3rem;


    color: var(--primary);


}







/* ---------- Buttons ---------- */


.button {


    display: inline-block;


    margin-top: 20px;


    padding: 14px 30px;


    background:

    var(--primary);



    color:white;


    border-radius:8px;


    font-weight:bold;


    transition:0.3s;


}



.button:hover {


    transform:

    translateY(-4px);


    box-shadow:


    0 10px 25px rgba(0,0,0,0.4);


}



.button.secondary {


    background:

    var(--secondary);


}







/* ---------- Cards ---------- */


.feature-grid,
.info-grid,
.staff-grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));


    gap:25px;


}



.feature-card,
.info-card,
.staff-card {


    background:

    var(--panel);



    padding:30px;



    border-radius:15px;



    border:

    1px solid var(--border);



    transition:0.3s;


}



.feature-card:hover,
.info-card:hover,
.staff-card:hover {


    transform:

    translateY(-8px);



    border-color:

    var(--primary);


}



.feature-card h3,
.staff-card h3 {


    color:

    var(--primary);


}







/* ---------- Staff ---------- */


.staff-card {


    text-align:center;


}



.staff-card img {


    width:150px;


    height:150px;


    object-fit:contain;


    margin-bottom:20px;


}







/* ---------- Timeline ---------- */


.timeline-item {


    background:

    var(--panel);



    padding:25px;


    margin:20px 0;



    border-left:

    5px solid var(--primary);



    border-radius:10px;


}







/* ---------- Server Console ---------- */


.server-log {


    background:#050505;



    padding:20px;



    border-radius:10px;



    font-family:monospace;



    border:

    1px solid #333;


}



.log-header {


    color:

    var(--primary);


    margin-bottom:15px;


}



.warning {


    color:

    var(--warning);


}



.error {


    color:

    var(--danger);


}







/* ---------- Join Banner ---------- */


.join-banner {


    text-align:center;



    background:

    var(--panel);



    padding:50px;



    border-radius:20px;


}







/* ---------- Footer ---------- */


footer {


    text-align:center;



    padding:40px;



    border-top:

    1px solid var(--border);



    color:

    var(--muted);


}







/* ---------- 404 ---------- */


.error-page {


    min-height:80vh;


    display:flex;



    justify-content:center;


    align-items:center;



    text-align:center;


}



.error-code {


    font-size:8rem;


    font-weight:bold;



    color:

    var(--primary);


}







/* ---------- Minecraft Details ---------- */


.minecraft-text {


    letter-spacing:2px;


    text-shadow:

    2px 2px rgba(0,0,0,0.5);


}



.server-online {


    color:#55ff55;


}



.server-offline {


    color:#ff5555;


}







/* ---------- Mobile ---------- */


@media(max-width:700px){


    nav {


        flex-wrap:wrap;


        gap:15px;


    }



    .hero h1 {


        font-size:2.5rem;


    }



    section {


        padding:0 15px;


    }
    .rules-book {

    background: var(--panel);

    padding: 40px;

    border-radius: 15px;

    border: 1px solid var(--border);

}


.rule-category {

    margin-top: 35px;

    padding-bottom: 25px;

    border-bottom: 1px solid var(--border);

}


.rule-category:last-child {

    border-bottom: none;

}


.rule-category h3 {

    color: var(--primary);

}


.rule-category p {

    margin: 12px 0;

}


}