/* Reset */


* {


    margin: 0;


    padding: 0;


    box-sizing: border-box;


}


/* Body */


body {


    font-family: Arial, sans-serif;


    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);


    color: white;


}


/* Navigation */


nav {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding: 15px 40px;


    background: rgba(0,0,0,0.7);


}


.logo {


    font-size: 24px;


}


nav ul {


    display: flex;


    list-style: none;


}


nav ul li {


    margin-left: 20px;


}


nav a {


    color: white;


    text-decoration: none;


}


nav a:hover {


    color: #00e6ff;


}


/* Hero */


.hero {


    text-align: center;


    padding: 80px 20px;


}


.small-hero {


    padding: 50px 20px;


}


/* Sections */


section {


    padding: 40px;


    text-align: center;


}


/* Features */


.features {


    display: flex;


    justify-content: space-around;


}


.feature-box {


    width: 30%;


}


/* Games */


.games {


    display: flex;


    flex-wrap: wrap;


    justify-content: center;


}


.game-card {


    background: rgba(0,0,0,0.5);


    padding: 20px;


    margin: 15px;


    width: 250px;


    border-radius: 10px;


}


/* Buttons */


.btn {


    display: inline-block;


    margin-top: 20px;


    padding: 10px 20px;


    background: #00e6ff;


    color: black;


    text-decoration: none;


    border-radius: 5px;


}


/* Footer */


footer {


    text-align: center;


    padding: 20px;


    background: rgba(0,0,0,0.7);


}


/* Page background */


body {


  margin: 0;


  font-family: Arial, sans-serif;


  color: white;


  background: linear-gradient(to right, #0f2027, #203a43, #2c5364);


}


/* Navigation bar */


nav {


  display: flex;


  justify-content: space-between;


  align-items: center;


  background-color: rgba(0,0,0,0.8);


  padding: 15px 30px;


}


nav ul {


  list-style: none;


  display: flex;


  gap: 20px;


}


nav a {


  color: white;


  text-decoration: none;


}


/* Header section */


header {


  text-align: center;


  padding: 80px 20px;


  background: url('https://images.unsplash.com/photo-1542751371-adc38448a05e') no-repeat center/cover;


}


header h2 {


  font-size: 40px;


}


.tagline {


  font-size: 18px;


  margin-top: 10px;


  color: #ddd;


}


/* Main content */


main {


  padding: 40px;


  text-align: center;


}


/* Footer */


footer {


  background-color: rgba(0,0,0,0.8);

text-align: center;


  padding: 15px;


  position: relative;


  bottom: 0;

}

body {


  background-color: #121212;


  color: white;


  font-family: Arial, sans-serif;


}


nav {


  background-color: #1f1f1f;


  padding: 10px;


}


main {


  padding: 20px;


}


footer {


  background-color: #1f1f1f;


  text-align: center;


  padding: 10px;

}
/* Games Page */


.games-container {


    display: flex;


    flex-wrap: wrap;


    justify-content: center;


    gap: 30px;


    padding: 50px;


}


.game-card {


    width: 280px;


    background: rgba(0,0,0,0.6);


    border-radius: 15px;


    overflow: hidden;


    transition: 0.3s;


}


.game-card:hover {


    transform: translateY(-10px);


    box-shadow: 0 0 20px #00e6ff;


}


.game-card img {


    width: 100%;


    height: 180px;


    object-fit: cover;


}


.game-info {


    padding: 20px;


    text-align: center;


}


.game-info h3 {


    margin-bottom: 10px;


}


.game-info p {


    font-size: 14px;


    margin-bottom: 20px;


}


.esports-section {


    text-align: center;


    padding: 60px 20px;


}