/* Reset default margin and padding for all elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Define a background color and text color for the entire page */
body {
  color: white;
  font-family: Arial, sans-serif;
}

/* Style the header */
header {
  background: rgb(29, 16, 245);
  background: linear-gradient(309deg, rgba(29, 16, 245, 1) 0%, rgba(10, 10, 65, 1) 64%);
  color: #fff;
  text-align: center;
  padding: 20px;
}

nav{
  background: rgb(29, 16, 245);
  background: linear-gradient(309deg, rgb(236, 179, 133) 0%, rgb(199, 82, 9) 64%);
}
img{
  border-radius: 15px;
}
/* Style the navigation menu */
nav ul {
  background: rgb(29, 16, 245);
  background: linear-gradient(309deg, #c75209 0%, rgb(199, 82, 9) 64%);
  list-style-type: none;
  background-color: #333;
  text-align: center;
  font-weight: 800;
  padding: 20px;
}

nav li {
  display: inline;
  margin: 0 10px;
}

nav a {
  text-decoration: none;
  color: #fff;
}

/* Style sections */
section {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
}

/* Style article cards */
article {
  margin-bottom: 20px;
}

/* Style images within articles */
article img {
  max-width: 100%;
  height: auto;
}

/* Style game cards */
.game-card {
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

.game-card img {
  max-width: 100%;
  height: auto;
}

/* Style review cards */
.review-card {
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px;
}

.review-card img {
  max-width: 100%;
  height: auto;
}

/* Style the footer */
footer {
  text-align: center;
  background-color: #160eb6;
  color: #fff;
  padding: 10px;
}


/* Timeline Container */
.timeline {

  margin: 20px auto;
  padding: 20px;
}

/* Cardd container */
.cardd {
  position: relative;
  max-width: 100%;
  color: white;
}

/* setting padding based on even or odd */
.cardd:nth-child(odd) {
  padding: 30px 0 30px 30px;
}
.cardd:nth-child(even) {
  padding: 30px 30px 30px 0;
}
/* Global ::before */
.cardd::before {
  content: "";
  position: absolute;
  width: 50%;
  border: solid #5aa4ff;
  
}

/* Setting the border of top, bottom, left */
.cardd:nth-child(odd)::before {
  left: 0px;
  top: -4.5px;
  bottom: -4.5px;
  border-width: 5px 0 5px 5px;
  border-radius: 50px 0 0 50px;
}

/* Setting the border of top, bottom, right */
.cardd:nth-child(even)::before {
  right: 0;
  top: 0;
  bottom: 0;
  border-width: 5px 5px 5px 0;
  border-radius: 0 50px 50px 0;
}

/* Removing the border if it is the first cardd */
.cardd:first-child::before {
  border-top: 0;
  border-top-left-radius: 0;
}

/* Removing the border if it is the last cardd  and it's odd */
.cardd:last-child:nth-child(odd)::before {
  border-bottom: 0;
  border-bottom-left-radius: 0;
}

/* Removing the border if it is the last cardd  and it's even */
.cardd:last-child:nth-child(even)::before {
  border-bottom: 0;
  border-bottom-right-radius: 0;
}

/* Information about the timeline */
.info {
  display: flex;
  flex-direction: column;
  color: white;
  border-radius: 10px;
  padding: 10px;
}

/* Title of the cardd */
.title {
  color: orangered;
  position: relative;
}

/* Timeline dot  */
.title::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 3px solid orangered;
}

/* text right if the cardd is even  */
.cardd:nth-child(even) > .info > .title {
  text-align: right;
}

/* setting dot to the left if the cardd is odd */
.cardd:nth-child(odd) > .info > .title::before {
  left: -45px;
}

/* setting dot to the right if the cardd is odd */
.cardd:nth-child(even) > .info > .title::before {
  right: -45px;
}
.logo{
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

  /* Ensure video container is responsive */
  @media (max-width: 768px) {
    .ratio {
      padding-bottom: 56.25% !important; /* 16:9 Aspect Ratio */
    }
  }

  /* Adjust thumbnail size and play button on smaller screens */
  @media (max-width: 876px) {
    #video-thumbnail {
      height: 200px; /* Adjust thumbnail height for small screens */
       width: 100%; /* Adjust thumbnail height for small screens */
    }

    #play-button {
      font-size: 30px; /* Smaller play button on small screens */
    }
  }

  /* Adjust video aspect ratio on tablets and smaller screens */
  @media (max-width: 968px) {
    .ratio-16x9 {
      padding-bottom: 56.25% !important; /* Maintain 16:9 aspect ratio */
    }
  }