*{

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

}



body{

font-family:Arial, sans-serif;

background-image:url("images/background.jpg");

background-size:cover;

background-attachment:fixed;

color:white;

}



.container{

width:100%;

min-height:100vh;

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

}



/* HEADER */


header{

height:90px;

background:#222;

display:flex;

align-items:center;

justify-content:space-between;

padding:20px 60px;

}



.logo{

height:70px;

}



nav button{


background:#ffb900;

border:none;

padding:15px 25px;

margin:5px;

border-radius:8px;

font-weight:bold;

cursor:pointer;

}



nav button:hover{

background:#ffd95a;

}



/* HERO */


.hero{

height:600px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}



.welcome{


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

padding:50px;

border-radius:20px;

}



.welcome h1{

font-size:55px;

}



.welcome p{

font-size:22px;

margin:20px;

}




.play{


background:#00c853;

border:none;

padding:20px 60px;

font-size:25px;

color:white;

border-radius:12px;

cursor:pointer;

}




.play:hover{

background:#00e676;

}



/* STATS */


.stats{


display:flex;

justify-content:center;

gap:30px;

}



.card{


background:#333;

padding:30px;

width:250px;

text-align:center;

border-radius:15px;

}





/* NEWS */


.news{


padding:50px;

text-align:center;

}



.newsbox{


background:white;

color:black;

margin:20px auto;

padding:25px;

max-width:700px;

border-radius:15px;


}




/* FEATURES */


.features{


display:flex;

justify-content:center;

gap:30px;

padding:40px;

}



.features div{


background:#222;

padding:30px;

border-radius:15px;

width:250px;

text-align:center;


}





footer{


background:#111;

padding:30px;

text-align:center;


}