@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/3;
   grid-row: 1/2; 
   margin-left: 0px;
   margin-top: 0px;
}


.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{
   position: relative;
   display: grid;
   place-items: center;
   height: 70vh;
   width: 100vw;
   margin-bottom:5vw;
   overflow-x: hidden;
}

video.SplashVideo {
   position: absolute;
   z-index: 0;
   object-fit: cover;
   width:100%;
   height:100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   overflow-x: hidden;
}
 



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



.CharSelect{
   display: grid;
   grid-template-columns: 1fr 1fr ;
   column-gap: 1.75vw;
   row-gap: 1.75vw;
   width:100%;
   margin-left:0;
   margin-right:0;
   margin-bottom: 5vw;
}

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

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


#LewisPath, #ViviPath, #ArthurPath, #MysteryPath, #ShiromoriPath, #ReverbPath{
   filter:grayscale(1);
   transition-duration: 250ms;
}

#LewisPath:Hover, #ViviPath:Hover, #ArthurPath:Hover, #MysteryPath:Hover, #ShiromoriPath:Hover, #ReverbPath:Hover{
   filter:grayscale(0);
}

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

.VidGrid{
   display: grid;
   grid-template-columns: 1fr 1fr ;
   column-gap: 3vw;
   row-gap: 3vw;
   width:90%;
   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%;
}