@font-face {
  font-family: "TT Norms Pro Light";
  src: url("/fonts/TT Norms Pro Light.ttf") format("truetype");
  font-weight: 100
}

@font-face {
  font-family: "TT Norms Pro Regular";
  src: url("/fonts/TT Norms Pro Regular.ttf") format("truetype");
  font-weight: normal
}

@font-face {
  font-family: "TT Norms Pro Bold";
  src: url("/fonts/TT Norms Pro Bold.ttf") format("truetype");
  font-weight: 700
}

@font-face {
  font-family: "TT Norms Pro Medium";
  src: url("/fonts/TT Norms Pro Medium.ttf") format("truetype");
  font-weight: 500
}

.bg-navy-blue-light{
    background-color: #040C35;  
}

.bg-navy-blue-dark{
    background-color: #0C0F1E;  
}

.bg-black{
    background-color: black;
}

.bg-dark-dark-gray{
    background-color: #202020;
}

.bg-white{
    background-color: white;;
}

.bg-offwhite{
    background-color: #f2eeeb;
}

.text-sliver-gray{
    color: #999999;
}

.text-black{
    color: black;
}

 

.text-cobalt-blue-light{
    color: #0281fe;
}

.text-silver-light{
    color: #CBCBCB;
} 

.main-body-font-style{
    font-family: "TT Norms Pro Regular", sans-serif; 
}

.header-div-section{
    
    width: 100vw;
    height: 140px;
}

.header-banner-image{  
    
  @media only screen and (max-width: 767px)  {
        max-width: 375px;
        width: 40vw;
        min-width: 90px;
        margin-left:auto;
        margin-right:auto;
    }    
  
    @media only screen and (min-width: 768px)  {
        max-width: 375px;
        width: 7vw;
        min-width: 170px;
    } 
}

.header-link-style{
    text-decoration: none;
    color: white;
    font-weight: bold;
    margin-top:7px;
    font-size: 14px;
} 


.below-header-section{
    background-color: white;
}

.below-header-image{
    width: 100%;;
 
}

.title-content-header{
   

    @media only screen and (max-width: 767px)  {
       
        font-weight: bold;
    
        

        font-size: clamp(24px,4vw,30px);
    }    
  
    @media only screen and (min-width: 768px)  {
        
        font-weight: bold;
    
        font-size: 40px;
    } 

}


.video-player-section{
     
    
 
    @media only screen and (max-width: 767px)  {
       
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }    
  
    @media only screen and (min-width: 768px)  {
        
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    } 
    
    
    
     
    
} 

.video-player-ctrl{
    
   @media only screen and (max-width: 767px)  {
       
        width: 100%;
        max-width: 766px;
        height: auto;
        aspect-ratio: 16 / 9;
    }    
  
    @media only screen and (min-width: 768px)  {
        
        width: 100%;
        max-width: 1900px;
        height: auto;
        aspect-ratio: 16 / 9;
       
      
    } 
}
 
.social-media-row{
    

    @media only screen and (max-width: 767px)  {
       
        height: 80px;
    }    
  
    @media only screen and (min-width: 768px)  {
        
        height: 100px;
    } 
}

.social-media-icons{    

    @media only screen and (max-width: 767px)  {
        text-decoration: none;
        font-size: 45px;
    }    
  
    @media only screen and (min-width: 768px)  {
        text-decoration: none;
        font-size: 65px;
    } 
}

 

.join-the-fandom-button{
    color: white;
    background-color:#0281fe;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 24px);
    width: clamp(330px,66vw, 465px); 

 
 
}

.join-the-fandom-button:hover{
    color: white;
    background-color: #326FAD;
 
}

.join-the-fandom-under-button-text{
    margin-top:10px;
    font-size: clamp(14px, 2.7vw, 20px);
}

.first-look-header-text{
   
     @media only screen and (max-width: 767px)  {
        font-size: clamp(24px,4vw,30px);
        font-weight: bold;
    }    
  
    @media only screen and (min-width: 768px)  {
        font-size: 40px;
        font-weight: bold;
    } 
}

.above-footer-section{
    background-color: white;
}

.above-footer-image{
    width: 100%;
}

.footer-link-items{
    cursor: pointer;
    text-decoration: none;
    color: white;
     
}

.footer-link-items a{
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.footer-link-items:hover{
    text-decoration: underline;
}