/* ============================= */
/*      INFINITE RP THEME       */
/*   Underground Empire Style   */
/* ============================= */

body{
margin:0;
font-family:'Segoe UI',Arial,Helvetica,sans-serif;
background:#050505;
color:#ffffff;
overflow-x:hidden;
position:relative;
}

/* ============================= */
/*        SMOKE BACKGROUND       */
/* ============================= */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:200%;
height:200%;
background:url('https://i.imgur.com/8IuucQZ.png') repeat;
animation:smoke 60s linear infinite;
opacity:0.05;
z-index:-2;
}

@keyframes smoke{
0%{transform:translate(0,0)}
50%{transform:translate(-200px,-100px)}
100%{transform:translate(0,0)}
}

/* ============================= */
/*        EMBER CANVAS           */
/* ============================= */

#embers{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
pointer-events:none;
}

/* ============================= */
/*            HEADER             */
/* ============================= */

header{
background:#0d0d0d;
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 25px;
flex-wrap:wrap;
position:relative;
border-bottom:1px solid #1a1a1a;
}

.logo img{
height:55px;
}

/* ============================= */
/*            NAVIGATION         */
/* ============================= */

nav{
display:flex;
flex-wrap:wrap;
}

nav a{
color:#ff6a00;
margin:8px 12px;
text-decoration:none;
font-weight:bold;
font-size:14px;
letter-spacing:1px;
transition:0.3s ease;
position:relative;
text-transform:uppercase;
}

nav a:hover,
nav a.active{
color:#ffa733;
text-shadow:0 0 8px #ff6a00, 0 0 18px #ff6a00;
animation:flicker .6s infinite alternate;
}

@keyframes flicker{
0%{opacity:1}
50%{opacity:0.6}
100%{opacity:1}
}

/* ============================= */
/*           HERO SECTION        */
/* ============================= */

.hero{
text-align:center;
padding:160px 20px;
background:radial-gradient(circle at center,#1a0f00,#000);
}

.hero h1{
font-size:3rem;
color:#ff6a00;
text-transform:uppercase;
letter-spacing:4px;
margin-bottom:10px;
}

.tagline{
margin-top:15px;
font-size:1.2rem;
color:#ffa733;
height:30px;
letter-spacing:2px;
}

/* ============================= */
/*            BUTTONS            */
/* ============================= */

.btn{
display:inline-block;
background:#ff6a00;
color:#000;
padding:14px 28px;
text-decoration:none;
border-radius:4px;
margin:15px 10px 0 10px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1px;
transition:0.3s ease;
}

.btn:hover{
background:#ffa733;
transform:scale(1.05);
box-shadow:0 0 15px #ff6a00, 0 0 30px #ff6a00;
}

/* ============================= */
/*        PAGE TRANSITIONS       */
/* ============================= */

section{
padding:80px 20px;
max-width:1200px;
margin:auto;
opacity:0;
transform:translateY(20px);
animation:fadeIn 0.8s forwards;
}

@keyframes fadeIn{
to{
opacity:1;
transform:translateY(0);
}
}

/* ============================= */
/*        SERVER STATUS BOX      */
/* ============================= */

.status-box{
position:absolute;
right:20px;
top:15px;
background:#111;
color:#ff6a00;
padding:8px 15px;
border:1px solid #ff6a00;
border-radius:4px;
font-size:13px;
text-transform:uppercase;
letter-spacing:1px;
}

/* ============================= */
/*          RULE CARDS           */
/* ============================= */

.rule-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

.rule-card{
background:#111;
border:1px solid #ff6a00;
padding:25px;
border-radius:8px;
transition:0.3s ease;
}

.rule-card:hover{
transform:translateY(-6px);
box-shadow:0 0 20px rgba(255,106,0,0.4);
}

.rule-card h3{
color:#ff6a00;
margin-bottom:10px;
font-size:18px;
}

.rule-card p{
font-size:14px;
opacity:0.9;
}

/* ============================= */
/*         GATE LANDING          */
/* ============================= */

#gate{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
z-index:10000;
color:#ff6a00;
text-transform:uppercase;
letter-spacing:4px;
}

#gate h1{
font-size:2.5rem;
margin-bottom:20px;
animation:flicker 1s infinite alternate;
}

#gate button{
margin-top:20px;
padding:15px 40px;
background:#ff6a00;
border:none;
font-weight:bold;
cursor:pointer;
text-transform:uppercase;
letter-spacing:2px;
transition:0.3s ease;
}

#gate button:hover{
background:#ffa733;
box-shadow:0 0 20px #ff6a00;
}

/* ============================= */
/*       MOBILE OPTIMIZATION     */
/* ============================= */

@media(max-width:768px){

.hero h1{
font-size:2rem;
}

header{
flex-direction:column;
align-items:flex-start;
}

.status-box{
position:static;
margin-top:10px;
}

nav{
justify-content:center;
width:100%;
}

nav a{
font-size:12px;
margin:6px 8px;
}

}