@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Khojki:wght@400;500;600;700&display=swap');


body{
    background-color: rgb(0, 0, 0);
}

.header{
    height: 90px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-content: space-between;
    position: fixed;
    top:0px;
    left:0px;
    right:0px;
    background-image: url(Assets/Header.png);
    background-size: cover;
    z-index: 100;
    box-shadow: 0px 0px 15px 3px rgb(255, 0, 221);
}

.LeftHeader{
   grid-column: 1/2;
   grid-row: 1/2; 
   margin-left: 10px;
}

.logo{
   width:auto;
   height:90px; 
}

.RightHeader{
   grid-column: 5/6;
   grid-row: 1/2; 
  margin-top: 20px;
  transition: 250ms;
   filter:opacity(.5);
}

.shop{
   width:75%;
   height:auto; 
}

.RightHeader:Hover{
   transform: scale(1.1); 
   filter:opacity(1);
   transform:translateY(-2px);
}


.Cover{
    background-color: rgb(0, 0, 0);
    top:0px;
    left:0px;
    right:0px;
    height:83px;
}

/* Top ^^^^^, Splash video vvvvv */


.SplashVid{
    background-color: rgb(238, 0, 206);
    Width:100%;
    height:872px;
    margin-bottom: 10vw;
}


/* Splash video ^^^^^ ,Charecter Slect vvvvv*/


.CharSelect{
    position: relative;
    width:82%;
    margin:auto;
    margin-bottom:80px;
}



.TLcrack{
    position: absolute;
    top: 0;
    left:0;
    z-index: 1;
    width:41.6%;
    
}

.TRcrack{
    position: absolute;
    top: 0;
    right:0;
    z-index: 1;
    width:41.6%
    
}

.BLcrack{
    position: absolute;
    Bottom: 5px;
    left:0;
    z-index: 1;
    width:41.6%
    
}

.BRcrack{
    position: absolute;
    Bottom: 5px;
    right:0;
    z-index: 1;
    width:41.6%
    
}

.Midcrack{
    position: absolute;
    top: 21%;
    left:33.2%;
    z-index: 1;
    width:33%;
    
    
}


 #TL{
    filter:grayscale(1);
 }

 #TL:hover{
    filter:grayscale(0);
 }

 #TR{
    filter:grayscale(1);
 }

 #TR:hover{
    filter:grayscale(0);
 }

 #BL{
    filter:grayscale(1);
 }

 #BL:hover{
    filter:grayscale(0);
 }

 #BR{
    filter:grayscale(1);
 }

 #BR:hover{
    filter:grayscale(0);
 }

 #Mid{
    filter:grayscale(1);
 }

 #Mid:hover{
    filter:grayscale(0);
 }



/* Charecter select ^^^^^ , Video grid vvvvvvvvv */

.VidGrid{
   display: grid;
   grid-template-columns: 1fr 1fr ;
   column-gap: 20px;
   row-gap: 20px;
   width:82%;
   margin:auto;
   margin-bottom: 10px;
}

@media (max-width:800px) {
   .VidGrid{
       grid-template-columns: 1fr;
   }
}

@media (min-width:800px) {
   .VidGrid{
       grid-template-columns: 1fr 1fr;
   }
}

.Prev{
   cursor: pointer;
}

.vid{
   position:relative;
   box-shadow: 0px 0px 15px 3px rgb(255, 0, 221);
}

.thumbnail{
   width:100%;
}