@font-face {
        font-family: 'vcr_osd';
        src: url('../../res/vcr_osd_mono_1.001-webfont.woff2') format('woff2'),
             url('../../res/vcr_osd_mono_1.001-webfont.woff') format('woff');
            
            
        font-weight: normal;
        font-style: normal;
    
    }


*{
        margin: 0;
        padding: 0;
        
       
        scroll-snap-type: y mandatory;
}
.general{
        display: block;
        width: 100%;
        
        
}
.secondary img{
        width: 100%;
        margin: 0;
        padding: 0;
}


#title{
        width: 40%;
        opacity: 0%;
        max-height:60%;
        display: none;
        margin-left: auto;
        margin-right: auto;
}


#game, #dev, #authors, #fullscreen{
        display: none;
}


div{

        display:none;
}

#loading{
        
        display: inline-block;
}

#loading span{

        margin-top: 430px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        animation-name: dots;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        background-color: white;
}

#loading span:nth-child(2){
        background-color: aqua;
        animation-delay: 0.4s;
}

#loading span:nth-child(3){
        background-color: aquamarine;
        animation-delay: 0.8s;
}


@keyframes dots{
        50%{
                opacity: 0;
                transform: scale(0.7) translateY(10);
        }
}


#letters{
        display: none;
        width: 100%;
}

#letters h2{

        opacity: 0%;
        text-shadow: 3px 3px black;
        font-size: 300%;
        margin-top: 4%;
        
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.5%;
    }
    

#letters h3{
        
        opacity: 0%;
        text-shadow: 1px 1px black;
        font-family: -apple-system;
        margin-top: 0.2%;
        font-weight: 100;
        font-size: 200%;
        
        font-style: italic;
        
        color: #fff;
    }
    

#separator{
        background: rgba(255, 255, 255, 0.4);
        height: 2px;
        display: block;
        margin: 0 auto;
        width: 0px;
        animation: 1.3s ease-out 0s 1 slideWidth;
    }


#navigator {
        display: none;
        opacity: 0%;
        justify-content: space-evenly;
        grid-template-columns: auto auto auto;
        
       
        font-size-adjust: 0.6 ;
      
        text-align: center;
        
        margin-bottom: 0;
        padding-bottom: 0;
        
        overflow: hidden;
     
        position: fixed;
         
        width: 100%;
        z-index:100;
        
}

h1{
        margin-top: 0;
        height: 100px;
        width: 100%;
        color: #ebebeb;
        text-align: center;
        background-color: rgb(0, 0, 0);
        padding-top: 60px;
        opacity:0.1;
}
    
    
button:hover{
        cursor: pointer;
        filter: brightness(150%);
        box-shadow: lightcoral;
}
    
   
#navigator span{
        display: block;
        text-align: center;
        letter-spacing: 2px;
        text-decoration: none;
        font: 14px/20px "industry", "Helvetica", "Arial", sans-serif;
        text-transform: uppercase;
        color: #fff;
        text-shadow: -8px -6px 1px rgba(255, 255, 255, 0.2);
        background:url('../../media/web/bg-button.png') no-repeat;
        background-position: center;
}

#nGame{
        margin: 50px 25px 0px 10%;
        padding:  20px 60px 20px 60px;
        
}

#nDev{
        margin: 50px 10% 0px 10px;
        padding:  20px 60px 20px 60px;
}

#nAuthors{
        margin: 50px 50px 0px 10%;
        padding:  20px 60px 20px 60px;
}

#header_dev{
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        opacity: 100%;
        top: -100px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 110px;
        align-items: center;
        padding: 10px;
        z-index: 1000;
        transition: 0.6s;
}

#header_dev a{
        width: 40%;
}   
#header_dev .logo img{
        padding-left: 30px;
        position: relative;
        transition: 0.6s;
        height: 100px;
        transition: 0.6s;
        width: 300px;
        margin-right: 60%;
}
    
#header_dev .logo img:hover{
        opacity: 0.4;
        cursor: pointer;
}
    
#header_dev ul{
        padding-right: 10%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60%;
}
    
#header_dev ul li{
        position: relative;
        list-style: none;
}
    
#header_dev ul li h3{
        position: relative;
        margin: 0 30px;
        font-family: sans-serif;
        color: #fff;
        letter-spacing: 2px;
        font-weight: 300;
        transition: 0.6s;
}
    
#header_dev ul li h3:hover{
        cursor: pointer;
        color: gray;
}








body{
        text-align: center;
        background-color: black;
      scroll-behavior: smooth;
        
}

.background{
        position:absolute;
        z-index: -100;
        opacity: 0%;
        right: 0;
        bottom: 0;
        min-width: 100%; 
        min-height: 100%;
        
        display: none;
        background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)), url(../../media/web/bck3.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        -ms-overflow-style: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
        display: none;
      }
      
      
span:hover{
        
       
        filter: brightness(50%);
        
        cursor: pointer;
       
    
}

#authors{
        margin-top: 7%;
        grid-template-columns: 25% 25% 25% 25%;
        animation: fadein 2.5s forwards;
        position: relative;
}

#authors img{
        position: relative;
        left:5%;
        height: 100%;
        max-width: 70%;
        margin-top: -10%;
        margin-bottom: 5px;
        border: 2px solid #fff;
        border-radius: 30px;
        transition: 0.3s;
}
  
#author-1{
        box-shadow: 0 0 10px #ee30da, 0 0 20px #ee30da, 0 0 40px #ee30da;
        -moz-box-shadow: 0 0 10px #ee30da, 0 0 20px #ee30da, 0 0 40px #ee30da;
        -webkit-box-shadow: 0 0 10px #ee30da, 0 0 20px #ee30da, 0 0 40px #ee30da;
        -khtml-box-shadow: 0 0 10px #ee30da, 0 0 20px #ee30da, 0 0 40px #ee30da;
}
#author-2{
        box-shadow: 0 0 10px #1130ed, 0 0 20px #1130ed, 0 0 40px #1130ed;
        -moz-box-shadow: 0 0 10px #1130ed, 0 0 20px #1130ed, 0 0 40px #1130ed;
        -webkit-box-shadow: 0 0 10px #1130ed, 0 0 20px #1130ed, 0 0 40px #1130ed;
        -khtml-box-shadow: 0 0 10px #1130ed, 0 0 20px #1130ed, 0 0 40px #1130ed;
}
#author-3{
        box-shadow: 0 0 10px #ed7e11, 0 0 20px #ed7e11, 0 0 40px #ed7e11;
        -moz-box-shadow: 0 0 10px #ed7e11, 0 0 20px #ed7e11, 0 0 40px #ed7e11;
        -webkit-box-shadow: 0 0 10px #ed7e11, 0 0 20px #ed7e11, 0 0 40px #ed7e11;
        -khtml-box-shadow: 0 0 10px #ed7e11, 0 0 20px #ed7e11, 0 0 40px #ed7e11;
}
#author-4{
        box-shadow: 0 0 10px #11edac, 0 0 20px #11edac, 0 0 40px #11edac;
        -moz-box-shadow: 0 0 10px #11edac, 0 0 20px #11edac, 0 0 40px #11edac;
        -webkit-box-shadow: 0 0 10px #11edac, 0 0 20px #11edac, 0 0 40px #11edac;
        -khtml-box-shadow: 0 0 10px #11edac, 0 0 20px #11edac, 0 0 40px #11edac;
}
#authors p{
        font-size: 150%;
        padding-right: 15%;
        font-family: sans-serif;
        letter-spacing: 2px;
}

#nia{
        position: relative;
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        width: 400%;
        color: white;
}

#nia-1{
        text-shadow: 0 0 10px #ee30da, 0 0 20px #ee30da, 0 0 40px #ee30da;
        -moz-text-shadow: 0 0 10px #ee30da, 0 0 20px #ee30da, 0 0 40px #ee30da;
        -webkit-text-shadow: 0 0 10px #ee30da, 0 0 20px #ee30da, 0 0 40px #ee30da;
        -khtml-text-shadow: 0 0 10px #ee30da, 0 0 20px #ee30da, 0 0 40px #ee30da;
}   

#nia-2{
        text-shadow: 0 0 10px #1130ed, 0 0 20px #1130ed, 0 0 40px #1130ed;
        -moz-text-shadow: 0 0 10px #1130ed, 0 0 20px #1130ed, 0 0 40px #1130ed;
        -webkit-text-shadow: 0 0 10px #1130ed, 0 0 20px #1130ed, 0 0 40px #1130ed;
        -khtml-text-shadow: 0 0 10px #1130ed, 0 0 20px #1130ed, 0 0 40px #1130ed;  
}

#nia-3{
        text-shadow: 0 0 10px #ed7e11, 0 0 20px #ed7e11, 0 0 40px #ed7e11;
        -moz-text-shadow: 0 0 10px #ed7e11, 0 0 20px #ed7e11, 0 0 40px #ed7e11;
        -webkit-text-shadow: 0 0 10px #ed7e11, 0 0 20px #ed7e11, 0 0 40px #ed7e11;
        -khtml-text-shadow: 0 0 10px #ed7e11, 0 0 20px #ed7e11, 0 0 40px #ed7e11;   
}

#nia-4{
        text-shadow: 0 0 10px #11edac, 0 0 20px #11edac, 0 0 40px #11edac;
        -moz-text-shadow: 0 0 10px #11edac, 0 0 20px #11edac, 0 0 40px #11edac;
        -webkit-text-shadow: 0 0 10px #11edac, 0 0 20px #11edac, 0 0 40px #11edac;
        -khtml-text-shadow: 0 0 10px #11edac, 0 0 20px #11edac, 0 0 40px #11edac;
}