*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}


body{

background:
linear-gradient(#000b,#000e),
url("assets/background.jpg");

background-size:cover;
color:white;

}



header{

height:90px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 60px;

border-bottom:1px solid #3b250d;

}



.logo{

font-size:30px;
letter-spacing:10px;
font-weight:bold;

}



nav a{

margin:25px;
color:#ddd;
font-size:14px;

}


.active{

color:#ff8500;

}



button{

background:transparent;
border:1px solid #754000;
color:white;
padding:15px 35px;
cursor:pointer;

}



.discord{

border-color:#ff8500;

}



.hero{

min-height:650px;
display:flex;
justify-content:space-between;
padding:80px 60px;

}



.hero-left{

width:60%;

}


.hero-left h1{

font-size:100px;
letter-spacing:15px;

}



.hero-left h2{

font-size:28px;

}


.hero-left span,
.why span{

color:#ff7900;

}



ul{

margin:30px 0;
line-height:35px;

}



.main-btn{

background:
linear-gradient(90deg,#ff5b00,#ffb000);

border:none;

box-shadow:
0 0 25px #ff7200;

}



.buttons{

display:flex;
gap:20px;

}




.status{

width:330px;

border:1px solid #ff8500;

padding:30px;

box-shadow:
0 0 25px #ff7b00;

}



.online{

color:#65ff3c;
margin:20px 0;

}


.status div{

padding:18px 0;
border-bottom:1px solid #33200e;

display:flex;
justify-content:space-between;

}



.why{

padding:50px;

text-align:center;

}



.cards{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:40px;

}



.cards div,
.wipe,
.leader{

background:#090909aa;

border:1px solid #50300f;

padding:40px;

}



.cards h3{

margin:20px;

}



.bottom{

display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
padding:50px;

}


.timer{

font-size:45px;
color:#ff8a00;
margin-top:40px;

}


footer{

padding:50px;
display:flex;
justify-content:space-between;

}




@media(max-width:900px){

.hero,
.bottom{

flex-direction:column;
display:flex;

}


.cards{

grid-template-columns:1fr;

}


.hero-left{

width:100%;

}


.status{

width:100%;

}

}