* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Hind', sans-serif;
     /* font-family: 'Montserrat', sans-serif; */
}

:root {
     /* HEADER */
     --header-background: #192233;
     --header-box-shadow: rgba(0, 0, 0, 0.5);
     --header-border-color: blue;
     --header-text-color: #fff;
     --header-text-hover-color: #df6337;
     --toggle-color: #fff;

     /* META COLOR */
     --meta-background-color: #df6337;

     --btn-background: #df6337;
     --btn-text-color: #fff;

     /* POPULAR */

     /* RECOMMENDED */
     --recommended-background: #192233;
     --recommended-cat-button-color: #fff;
     --recommended-cat-button-hover-color: #df6337;

     /* FOOTER */
     --footer-background: #192233;
     --footer-text-color: #fff;
     --footer-text-hover-color: #df6337;

}

body {
     background: #0f141f;
}

.playbtn a {
     background: var(--btn-background);
     color: var(--btn-text-color);
     text-decoration: none;
     font-size: 25px;
     border-radius: 10px;
     width: 250px;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 55px;
     margin: 0 auto;
}

.wide-container {
     position: relative;
     width: 100%;
     max-width: 1260px;
     margin: 0 auto;
     padding: 0px 20px;
     box-sizing: border-box;
}

.section {
     padding: 70px 0 50px;
}

/* HEADER */
header {
     background: var(--header-background);
     box-shadow: 0px 3px 10px 0px var(--header-box-shadow);
     height: 80px;
     position: sticky;
     top: 0;
     width: 100%;
     z-index: 9999;
}
 
header .header_container {
     box-sizing: border-box;
     width: 100%;
     max-width: 1400px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 100%;
     margin: 0 auto;
     padding: 0 20px;
}
 
header .logo {
     text-decoration: none;
     display: flex;
     justify-content: center;
     align-items: center;
}
 
header .logo img {
     width: 100%;
     display: block;
     max-width: 350px;
}
 
header input#menu-toggle {
     display: none;
}
 
header .toggle {
     height: 35px;
     width: 35px;
     position: relative;
     cursor: pointer;
     box-sizing: border-box;
}
 
header .toggle span {
     position: absolute;
     background: var(--toggle-color);
     top: 5px;
     left: 0px;
     right: 0px;
     height: 3px;
     border-radius: 100vmax;
     width: 33px;
     transition: all .2s ease-in-out; 
     visibility: visible;
 }
 
header .toggle span:nth-child(2) {
     top: 15px;
}
 
header .toggle span:nth-child(3) {
     top: 25px;
}
 
header input#menu-toggle:checked ~ .toggle span:nth-child(1) {
     top: 15px;
     transform: rotate(45deg);
}
 
header input#menu-toggle:checked ~ .toggle span:nth-child(2) {
     opacity: 0;
     left: -100%;
}
 
header input#menu-toggle:checked ~ .toggle span:nth-child(3) {
     top: 15px;
     transform: rotate(-45deg);
}
 
header input#menu-toggle:checked ~ .menu {
     height: 350px;
     border-bottom: 10px solid var(--header-border-color);
}
 
header .menu {
     top: 100%;
     position: absolute;
     display: flex;
     flex-direction: column;
     width: 100%;
     margin: 0;
     left: 0;
     height: 0px;
     background: rgba(0, 0, 0, 0.8);
     overflow: hidden;
     transition: all .5s ease-in-out;
     align-items: center;
     backdrop-filter: blur(10px);
}
  
header .menu a {
     margin: 30px 15px;
     color: var(--header-text-color);
     text-decoration: none;
     text-transform: uppercase;
     font-size: 18px;
     
}

header .menu a:hover {
     color: var(--header-text-hover-color);
}
 /* END OF HEADER */

 /* FEATURED */
.featured-slider .item {
     position: relative;
}

.featured-slider .item:before {
     position: absolute;
     content: '';
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(54, 54, 54, 0.7);
     backdrop-filter: blur(3px);
}

.featured-slider .item .item-content {
     position: relative;
     height: 100%;
}

.featured-slider .item .item-content .item_row {
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
     padding: 25px 20px 50px;
     width: 100%;
     height: 100%;
     max-width: 1350px;
     margin: 0 auto;
}

.featured-slider .item .item-content .item_row .info h2 {
     font-size: 45px;
     text-transform: uppercase;
     color: #fff;
     text-align: center;
     margin-bottom: 0px;
}

.featured-slider .item .item-content .item_row .info .meta {
     text-align: center;
     color: #fff;

     
}

.featured-slider .item .item-content .item_row .info .meta span {
     background: coral;
     padding: 0 5px;
     border-radius: 5px;
}

.featured-slider .item .item-content .item_row .info .desc {
     width: 100%;
     max-width: 500px;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;  /* Number of lines displayed before it truncate */
     overflow: hidden;
     text-align: center;
     color: #fff;
     margin-bottom: 15px;
}

.featured-slider .item .item-content .item_row .featured-image img {
     width: 100%;
     max-width: 200px;
     display: block;
}

 /* END OF FEATURED */

 /* SEARCH */
.search-section .search-area {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     position: relative;
     top: -20px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     background-color: #192233;
     border-radius: 5px;
}

.search-section .search-area input {
     margin: 0 auto;
     width: 300px;
     height: 40px;
     border: none;
     background-color: transparent;
     color: #fff;
     text-align: center;
}

.search-section .search-area input:focus-visible {
     border: none;
     outline: none;
}

 /* END OF SEARCH */

 /* POPULAR */
.popular h2 {
     font-size: 45px;
     margin-bottom: 15px;
     z-index: -1;
     color: #fff;
     font-family: 'Montserrat', sans-serif;
}
.popular .boxes{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
}

.popular .boxes .box {
     margin: 0 10px 35px;
     border-radius: 10px;
     overflow: hidden;
     position: relative;
}

.popular .boxes .box:hover {
     box-shadow: 0px 0px 10px 3px rgba(0,113,188,0.5);
}

.popular .boxes .box img {
     width: 200px;
     display: block;
}


.popular .boxes .box .game-info {
     position: absolute;
     z-index: 99;
     display: flex;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     background: radial-gradient(circle, rgba(82,182,249,0.8) 50%, rgba(0,113,188,0.9) 100%);
     opacity: 0;
     transition: 0.5s;
     backdrop-filter: blur(3px);
}

.popular .boxes .box:hover .game-info {
    opacity: 1;
}

.popular .boxes .box .game-info h3 {
     text-align: center;
     font-size: 20px;
}

.popular .boxes .box .game-info .meta {
     margin-bottom: 5px;
}

.popular .boxes .box .game-info .meta span {
     background: #fff;
     border-radius: 5px;
     padding: 0 5px;
}

.popular .boxes .box .game-info p {
     text-align: center;
}

.popular .boxes .box .game-info .playbtn a {
     width: 120px;
     font-size: 15px;
     height: 40px;
     border-radius: 5px;
}
 /* END OF POPULAR */

 /* TRENDING */
.trending .boxes .box {
     border: 1px solid red;
     width: 200px;
}

.trending .boxes .box .game-icon img {
     width: 200px;
}
 /* END OF TRENDING */



/* EDITOR'S PICK */
.recommended_row {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
}


.recommended_row .editors-area {
     width: 100%;
     margin-right: 15px;
     margin-bottom: 50px;
     position: relative;
}

.recommended_row .editors-area h2 {
     margin-bottom: 15px;
     font-size: 45px;
     z-index: -1;
     color: #fff;
     font-family: 'Montserrat', sans-serif;
}

.recommended_row .editors-area .editors-content {
     background: var(--recommended-background);
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 28px;
     border-radius: 15px;
     margin-bottom: 20px;
}

.recommended_row .editors-area .editors-content:last-child {
     margin-bottom: 0;
}

.recommended_row .editors-area .editors-content .game-info {
     margin-right: 15px;
}

.recommended_row .editors-area .editors-content .game-info .game-name {
     margin-bottom: 0;
     color: #fff;
     font-size: 18px;
     font-weight: 600;
     text-transform: uppercase;
}

.recommended_row .editors-area .editors-content .game-info .game-meta {
     margin-bottom: 0;
     color: #fff;
}

.recommended_row .editors-area .editors-content .game-info .game-meta span {
     background: var(--meta-background-color);
     padding: 2px 5px;
     font-size: 12px;
     border-radius: 3px;
}

.recommended_row .editors-area .editors-content .game-info .game-desc {
     margin-bottom: 0;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp:3;
     overflow: hidden;
     margin-bottom: 5px;
     color: #fff;
}

.recommended_row .editors-area .editors-content .game-info .playbtn a {
     width: 180px;
     height: 40px;
     font-size: 18px;

}

.recommended_row .editors-area .editors-content .game-icon img {
     width: 150px;
     height: 150px;
     border-radius: 15px;
}

.recommended_row .categories {
     width: 100%;
     position: relative;
}

.recommended_row .categories h2 {
     margin-bottom: 15px;
     font-size: 45px;
     z-index: -1;
     color: #fff;
     font-family: 'Montserrat', sans-serif;
}

.recommended_row .categories .categories-content {
     background: var(--recommended-background);
     width: 100%;
     display: flex;
     flex-direction: column;
     padding: 15px;
     border-radius: 15px;
     overflow: hidden;
     
}

.recommended_row .categories .categories-content .cat-tab {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
   
.recommended_row .categories .categories-content .cat-tab button {
     background-color: inherit;
     border: none;
     height: 40px;
     outline: none;
     cursor: pointer;
     transition: 0.3s;
     font-size: 17px;
     margin: 5px;
     border-radius: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     color: var(--recommended-cat-button-color);
}

.recommended_row .categories .categories-content .cat-tab button:hover {
     background-color: transparent;
     color: var(--recommended-cat-button-hover-color);
}
   
.recommended_row .categories .categories-content .cat-tab button.active {
     border-bottom: 3px solid var(--recommended-cat-button-hover-color);
     color: var(--recommended-cat-button-hover-color);
}
   
.recommended_row .categories .categories-content .catcontent {
     display: none;
     padding: 10px 15px;
     color: #fff;
     border-top: none;
     flex-direction: column;
}

.recommended_row .categories .categories-content .catcontent h3 {
     text-align: center;
     color: var(--category-button-text-color);
     letter-spacing: 1px;
     text-transform: uppercase;
}

.recommended_row .categories .categories-content .catcontent.active {
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
}

.recommended_row .categories .categories-content .catcontent .category-box {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}

.recommended_row .categories .categories-content .catcontent .category-box .item {
     position: relative;
     height: 195px;
     width: 165px;
     overflow: hidden;
     border-radius: 10px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
}

.recommended_row .categories .categories-content .catcontent .category-box .item .game-info .game-icon {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 15px;
}

.recommended_row .categories .categories-content .catcontent .category-box .item .game-info .game-icon img {
     width: 130px;
     height: 130px;
     border-radius: 10px;
     margin: 0 auto;
}


.recommended_row .categories .categories-content .catcontent .category-box .item .game-info .game-name {
     margin-bottom: 0;
     text-align: center;
     font-size: 15px;
     font-weight: 600;
     text-transform: uppercase;
}

/* END OF EDITOR'S PICK */


 /* FOOTER */
footer {
     background: var(--footer-background);
     padding: 25px;
     text-align: center;
     color: var(--footer-text-color);
}
 
footer a {
     text-decoration: none;
     color: var(--footer-text-color);
     font-weight: 500;
}
 
footer a:hover {
     color: var(--footer-text-hover-color);
}
 /* END OF FOOTER */


@media (min-width: 1000px) {
     header .toggle span {
         display: none;
     }
 
     header .menu {
         position: relative;
         flex-direction: row;
         top: 0;
         width: 100%;
         height: 100%;
         border-bottom: none;
         background: none;
         align-items: center;
         justify-content: flex-end;
         transition: none;
         backdrop-filter: none;
     }
 
     header input#menu-toggle:checked ~ .menu {
         border-bottom: none;
         height: auto;
     }
 
     header .menu a {
         margin: 0px 15px;
     }

     .recommended_row {
          flex-direction: row;
     }

     .recommended_row .editors-area {
          width: 35%;
          margin-bottom: 0;

     }

     .recommended_row .categories {
          width: 60%;
     }
 }