:root{
   font-size: 16px;
}

body{
   background-color: rgb(39,43,48);
   color: rgb(140,142,145);
   font-family: "Comfortaa", cursive;
 

}

header img {
    max-height: 30vh;
    object-fit: cover;
 }


          /*  navbar */

 .navbar img {
    width: 40px;
 }

 

 .w--75{
   width: 75%;
   margin: auto;
 }

 @media screen and (max-width:760px) {
   .w--75{
      width: 90%;
   }

   :root{
      font-size: 13px;
   }
 }

                /* game cards */
                
 .card-body{
   min-height: 290px;
 }
 .mycard{
   filter: grayscale(0.7);
   transition: transform 0.5s, filter 0.5s 0.1s;
   cursor: pointer;
 }

 .mycard:hover{
   transform: scale(1.05);
   filter: grayscale(0);
 }

 
p,
span {
   color: inherit !important;
}


.badge-color {
   background-color: #32383e;
}


.my-border{
   border: rgb(35,35,35) solid 1px;
}

.footer-border{
   border-top:  rgb(35,35,35) solid 1px;
}




 /* loading */

 .loading{
   position: fixed;
   z-index: 9;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color: #272b30e3;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .loader {
   transform: rotateZ(45deg);
   perspective: 1000px;
   border-radius: 50%;
   width: 100px;
   height: 100px;
   color: #fff;
 }
   .loader:before,
   .loader:after {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: inherit;
     height: inherit;
     border-radius: 50%;
     transform: rotateX(70deg);
     animation: 1s spin linear infinite;
   }
   .loader:after {
     color: #FF3D00;
     transform: rotateY(70deg);
     animation-delay: .4s;
   }

 @keyframes rotate {
   0% {
     transform: translate(-50%, -50%) rotateZ(0deg);
   }
   100% {
     transform: translate(-50%, -50%) rotateZ(360deg);
   }
 }

 @keyframes rotateccw {
   0% {
     transform: translate(-50%, -50%) rotate(0deg);
   }
   100% {
     transform: translate(-50%, -50%) rotate(-360deg);
   }
 }

 @keyframes spin {
   0%,
   100% {
     box-shadow: .2em 0px 0 0px currentcolor;
   }
   12% {
     box-shadow: .2em .2em 0 0 currentcolor;
   }
   25% {
     box-shadow: 0 .2em 0 0px currentcolor;
   }
   37% {
     box-shadow: -.2em .2em 0 0 currentcolor;
   }
   50% {
     box-shadow: -.2em 0 0 0 currentcolor;
   }
   62% {
     box-shadow: -.2em -.2em 0 0 currentcolor;
   }
   75% {
     box-shadow: 0px -.2em 0 0 currentcolor;
   }
   87% {
     box-shadow: .2em -.2em 0 0 currentcolor;
   }
 }



 #closeBtn:hover{
   color: white;
   cursor: pointer;
 }