body{
   margin: 0;
   padding: 0;
   background-color: #000000;
   scroll-behavior: smooth;
}

.container{
   font-family: Arial, Helvetica, sans-serif;
   color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
}

header{
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 40px;
   z-index: 999;
   background-color: #4b4b4b5b;
   backdrop-filter: blur(10px);


}

.head-left{
   display: flex;
   align-items: center;
}

.head-left img{
   width: 40px;
   height: 40px;
   border-radius: 20%;
}

.head-left button{
   border: none;
   padding: 10px 30px;
   border-radius: 20px;
   font-weight: 700;
   cursor: pointer;
   transition: 0.3s;
}

.head-left a{
   align-items: center;
   font-family: Arial, Helvetica, sans-serif;
   color: #000000;
   font-size: 16px;
   
}

.head-left button:hover{
   opacity: 0.7;
}

.head-right{
   display: flex;
}

.head-right a{
   text-decoration: none;
   padding-left: 25px;
   color: rgb(255, 255, 255);
   font-size: 15px;
}

.main-section{
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;

}

.main-vid{
   width: 100%;
   height: 100%;
   position: relative;
}

.main-video{
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.main-info{
   z-index: 1;
   position: absolute;
   top: 80px;
   left: 50px;
}

.main-info h1{
   font-size: 120px;
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-weight: 900;
   font-style: normal;
   margin-top: 30px;
   margin-bottom: 20px;

}

.main-info p{
   color: white;
   max-width: 210px;

}

.main-info button{
  background-color: #b374b6;
  border: 2px solid #b374b6;
  padding: 10px 40px;
  border-radius: 20px;
  cursor: pointer;
  color: black;
  transition: 0.3s;
}

.main-info button:hover{
   background-color: transparent;
   color: white;
   box-shadow: 0 0 15px #edff66;

}

.gaming-text{
   font-size: 120px;
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   margin: 0;
   position: absolute;
   right: 20px;
   bottom: 30px;
}

.next-btn{
   width: 200px;
   height: 200px;
   background-color: #b374b6;
   position: absolute;
   left: 45%;
   bottom: 45%;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: black;
   font-size: 30px;
   font-weight: bold;
   cursor: pointer;
   z-index: 100;
   opacity: 0;
   transition: 0.5s;
}

.next-btn:hover{
   width: 200px;
   height: 200px;
   opacity: 1;
   box-shadow: 0 0 15px rgba(255, 255, 255, 0.616);
}

.about-section{
   width: 100%;
   height: 100%;
   margin-top: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
   color: white;

}

.image-box{
   width: 960px;
   height:510px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50px;

}

.image-box img{
   width: 100%;
   height: 100%;
   object-fit: cover;

}   




.about-section p{
   font-size: 12px;
}

.about-section h1{
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-weight: 900;
   font-size: 100px;
   max-width: 1150px;
   text-align: center;
   margin: 25px 0;
   text-transform: uppercase;
   background: linear-gradient(to right, #bb4db2, #a6659b,#9a58ad,#6070fd,#2a46ff,#0099ff,#a551c1);
   background-size: 200%;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: animate-gradient 2.5s linear infinite;
}

@keyframes animate-gradient {
   to{
      background-position: 200%;
   }
   
}

.about-section h4{
   margin-top: 50px;
   margin-bottom: 0;
}

.about-section h5{
   margin-top: 5px;
   color: gray;
   max-width: 425px;
   text-align: center;
   line-height: 25px;
}


.info-section{
   display: flex;
   flex-direction: column;
   position: relative;
   width: 80%;
   margin-top: 100px;
   align-items: center;
}

.info-section h3{
   margin-bottom: 0;
}

.info-section p{
   margin-top: 5px;
   color: gray;
   max-width: 400px;
   line-height: 25px;
}

.info-card{
   display: grid;
   grid-template-columns: auto auto;
   gap: 20px;
   width: 100%;
   height: 100%;
   margin-top: 20px;
   justify-content: center;
}

.card{
   position: relative;
   width: auto;
   height: 70vh;
   overflow: hidden;
   border: 1px black;
   border-radius: 20px;
   transition: 0.5s;
}

.card h1{
   position: absolute;
   margin: 0;
   top: 10px;
   left: 5%;
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-size: 60px;
   z-index: 1;
   background: linear-gradient(to right, #bb4db2, #a6659b,#9a58ad,#6070fd,#2a46ff,#0099ff,#a551c1);
   background-size: 200%;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: animate-gradient 2.5s linear infinite;


}

.card p{
   position: absolute;
   top: 80px;
   left: 5%;
   z-index: 1;
   max-width: 250px;
   color: lightgray;
}

.card video{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.Top-Games h1{
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-weight: 900;
   font-size: 100px;
   max-width: 1150px;
   text-align: center;
   margin: 25px 0;
   text-transform: uppercase;
   background: linear-gradient(to right, #bb4db2, #a6659b,#9a58ad,#6070fd,#2a46ff,#0099ff,#a551c1);
   background-size: 200%;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: animate-gradient 2.5s linear infinite;
}

.box-container {
  max-width: 900px; 
  margin: 0 auto;  
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  
}

.Top-Games .box-container {
  max-width: 960px; 
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 2rem;
  justify-items: center; 
}

.Top-Games .box {
  width: 300px;
  height: 400px;
  overflow: hidden;
}

.Top-Games .box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Top-Games .box video {
   width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.Top-Games .box-container .box{
   height: 27rem;
   border-radius: .5rem;
   overflow: hidden;
   position: relative;
}

.Top-Games .box-container .box img{
   height: 100%;
   width: 100%;
   object-fit: cover;
   transition: .2s linear;
}

.Top-Games .box-container .box:hover img{
   transform: scale(1.1);

}

.Top-Games .box-container .box::before{
   content: 'PLAY NOW';
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   z-index: 1;
   background: rgba(0, 0, 0, .5);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 2rem;
   transform: scale(1.5);
   opacity: 0;
   transition: opacity 0.3s ease, transform 0.3s ease;
   
}

.Top-Games .box-container .box:hover::before{
   opacity: 1;
   transform: scale(1);
}



.more-games{
   position: relative;
   width: 100%;
   margin-top: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100vh;
}

.more-games .img1{
   position:absolute;
   top: 20%;
   right: 20px;
   height: 400px;
  clip-path: polygon(49% 0, 96% 0, 86% 100%, 20% 100%);
}

.more-games .img2{
   position:absolute;
   left: 50px;
   top: 10px;
   height: 300px;
   width: auto;
   clip-path: polygon(50% 0%, 100% 12%, 87% 60%, 75% 100%, 25% 100%, 3% 61%, 14% 12%);
}

.more-games .img3{
   position: absolute;
   left: 10%;
   bottom: 20%;
   height: 320px;
   width: auto;
   clip-path: polygon(14% 0, 75% 0%, 100% 36%, 75% 100%, 32% 100%, 0 58%);
}

.more-games .section-paragraph{
   margin-top: 100px;
   text-align: center;
   font-size: 20px;
   font-family: Arial, Helvetica, sans-serif;
   z-index: 5;
   position: relative;
   

}

.more-games h1{
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-size: 70px;
   max-width: 550px;
   text-align: center;
   background: linear-gradient(to right, #c02222, #e4744f,#de8f5f,#dfda49,#cee37a,#79bb44,#a54407);
   background-size: 200%;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: animate-gradient 2.5s linear infinite;

}

.more-games button{
   padding: 15px, 20px;
   border: 1px solid gray;
   background-color: #c0cd5f;
   color: black;
   border-radius: 20px;
   box-shadow: 0 0 5px lightgray;
   cursor: pointer;
   transition: 0.3s;
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
}

.more-games button:hover{
   box-shadow: 0 0 15px rgb(144, 85, 13);
   opacity: 0.7;
}

.autoBlur{
   animation: autoBlurAnimation linear both;
   animation-timeline: view();
}

@keyframes autoBlurAnimation{
   0%{
      filter: blur(40px);
   }
   40%,60%{
      filter: blur(0);
      transform: translateY(0px);
      opacity: 1;
   }

   100%{
      filter: blur(40px);
      transform: translateY(-200px);
      opacity: 0;
   }
}

.autoDisplay{
   animation: autoDisplayAnimation both;
   animation-timeline: view(70% 5%);

}

@keyframes autoDisplayAnimation{
   from{
      opacity: 0;
      transform: translateY(200px) scale(0,3);

   } to{
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

@media screen and (max-width: 650px) {
   header{
      padding: 0 10px;
   }
   .head-left button{
      display: none;
   }
   .head-right a{
      font-size: 12px;
      padding: 0 5px;
   }
   .main-info{
      left: 5%;
   }

   .main-section h1{
      font-size: 90px;
   }
   .next-btn{
      left: 25%;
      top: 40%;
   }
   .about-section{
      margin: 0;
   }
   .about-section h1{
      font-size: 50px;
   }

   .image-box{
      width: 300px;
      height: 500px;
   }

   .about-section h4, .about-section h5{
      max-width: 350px;
      text-align: center;
   }

   .Top-Games h1{
      font-size: 40px;
   }

   .Top-Games .box-container{
      grid-template-columns: repeat(2,1fr);
      gap: 1rem;
      max-width: 90%;
      margin: 0 auto;
   }

   .Top-Games .box {
      width: auto; 
      height: 200px; 
   }

   .Top-Games .box img {
      object-fit: cover; 
   }

   .Top-Games .box::before {
      font-size: 1.5rem;
   }

   .more-games .img1{
      width: 150px;
      height: 200px;
      right: 0;
      top: 20px;
   }

   .more-games .img2{
      top: 30px;
      left: -40px;
      width: 180px;
      height: 180px;
   }

   .more-games .img3{
      left: -40px;
      bottom: 0;
      width: 150px;
      height: 180px;
   }

   .more-games h1{
      font-size: 60px;
      max-width: 300px;
   }
}

footer {
    width: 100%;
    text-align: center;
    padding: 30px 0;
    margin-top: 40px;
    background-color: #000000; 
    color: #fff;
    font-size: 0.9em;
}