/* Fonts */
/* Brigadier Sans Regular */

@font-face {
    font-family: 'BrigadierSans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Brigadier Sans'), local('Brigadier-Sans'), local('BrigadierSans'),
        url('fonts/BrigadierSans/BrigadierSansRegular.woff2') format('woff2'),
        url('fonts/BrigadierSans/BrigadierSansRegular.woff') format('woff');
}

/* poppins-regular - latin */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Poppins Regular'), local('Poppins-Regular'),
        url('fonts/poppins-v20-latin/poppins-v20-latin-regular.woff2') format('woff2'),
        url('fonts/poppins-v20-latin/poppins-v20-latin-regular.woff') format('woff');
}

/* poppins-italic - latin */

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Poppins Italic'), local('Poppins-Italic'),
        url('../fonts/poppins-v20-latin/poppins-v20-latin-italic.woff2') format('woff2'),
        url('../fonts/poppins-v20-latin/poppins-v20-latin-italic.woff') format('woff');
}

/* poppins-700 - latin */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Poppins Bold'), local('Poppins-Bold'),
        url('fonts/poppins-v20-latin/poppins-v20-latin-700.woff2') format('woff2'),
        url('fonts/poppins-v20-latin/poppins-v20-latin-700.woff') format('woff');
}

/* Merriweather-700 - latin */

@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Merriweather Bold'), local('Merriweather-Bold'),
    url('fonts/Merriweather/MerriweatherBold.woff2') format('woff2'),
    url('fonts/Merriweather/MerriweatherBold.woff') format('woff');
}

/* Colors */

:root{
    --Primary: #DC9375;
}

body {
    margin: 0px;
    color: black;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

.v3d-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #7DABD0;
}

.v3d-mobile-forward{
    visibility: hidden !important;
    display: none !important;    
}

/* removes tap blinking on ios devices */
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }

/* Typography */

h2{
    font-family: 'BrigadierSans', sans-serif;
    font-weight: 400;
    font-size: 90pt;
    line-height: 69pt;
    text-transform: uppercase;
}

@media (max-width: 1200px) and (max-height: 576px){
    h2{
        font-size: 90pt !important;
        line-height: 69pt !important;
    }
}

@media (min-width: 768px){
    h2{
        font-size: 150pt;
        line-height: 115pt;
    }
}

h6{
    font-family: 'Merriweather', sans-serif;
    font-weight: 700;
    font-size: 21pt;
    line-height: 20pt;
    animation-duration: 4s;
    animation-name: Buttom;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@media (min-width: 768px){
    h6{
        font-size: 28pt;
        line-height: 27pt;
    }
}

h6,
a{
    color: black;
    text-decoration: none;
    background: linear-gradient(var(--Primary), var(--Primary)) 100% 75%;
	background-repeat: repeat-x;
	background-size: 100% 50%;
    cursor: pointer;
}

@keyframes Buttom {
    0% {
        background: linear-gradient(var(--Primary), var(--Primary)) 100% 75%;
	    background-repeat: repeat-x;
	    background-size: 100% 50%;
    }
    25% {
        background: linear-gradient(var(--Primary), var(--Primary)) 100% 85%;
	    background-repeat: repeat-x;
	    background-size: 100% 5%;
    }
    25.1% {
        background: linear-gradient(white, white) 100% 85%;
	    background-repeat: repeat-x;
	    background-size: 100% 5%;
    }
    50% {
        background: linear-gradient(white, white) 100% 75%;
	    background-repeat: repeat-x;
	    background-size: 100% 50%;
    }
    75% {
        background: linear-gradient(white, white) 100% 85%;
	    background-repeat: repeat-x;
	    background-size: 100% 5%;
    }
    75.1% {
        background: linear-gradient(var(--Primary), var(--Primary)) 100% 85%;
	    background-repeat: repeat-x;
	    background-size: 100% 5%;
    }
    100% {
        background: linear-gradient(var(--Primary), var(--Primary)) 100% 75%;
	    background-repeat: repeat-x;
	    background-size: 100% 50%;
    }
}

h6:hover,
a:hover{
    background: linear-gradient(white, white) 100% 75%;
	background-repeat: repeat-x;
	background-size: 100% 50%;
}

p{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12pt;
    line-height: 18pt;
}

@media (min-width: 768px){
    p{
        font-size: 15pt;
        line-height: 21pt;
    }
}

p.min{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 10pt;
    line-height: 14pt;
}










/* Custom Preloader */

#preloader{
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: #7DABD0;
    background-image: url("Preloder-BG.png");
    background-blend-mode: multiply;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: baseline;
    z-index: 4000;
}

.pointer-events-none{
    pointer-events: none !important;
}

@media (max-width: 1200px) and (max-height: 576px){
    #preloader{
        flex-direction: column !important;
    }
}

@media (min-width: 768px){
    #preloader{
        flex-direction: row;
    }
}

#project-title{
    position: relative;
    top: 7.5vh;
    right: 5vw;
    bottom: 7.5vh;
    left: 5vw;
    height: 85vh;
    display: flex;
    align-items: baseline;
    justify-content: baseline;
}

@media (min-width: 768px){
    #project-title{
        left: 2.5vw;
        right: 2.5vw;
    }
}

#I-container{
    position: relative;
    height: 85vh;
    width: 40pt;
}

@media (max-width: 1200px) and (max-height: 576px){
    #I-container{
        width: 40pt !important;
    }
}

@media (min-width: 768px){
    #I-container{
        width: 65pt;
    }
}

#I{
    position: absolute;
    height: calc(85vh - 60pt);
    width: 37.5pt;
    background-color: black;
}

@media (max-width: 1200px) and (max-height: 576px){
    #I{
        height: calc(85vh - 60pt) !important;
        width: 37.5pt !important;
    }
}

@media (min-width: 768px){
    #I{
        height: 100%;
        width: 60pt;
    }
}

#project-title h2{
    transform: translateY(-130pt);
}

@media (max-width: 1200px) and (max-height: 576px){
    #project-title h2{
        transform: translateY(-130pt) !important;
    }
}

@media (min-width: 768px){
    #project-title h2{
        transform: translateY(-115pt);
    }
}

#bar-and-progress-container{
    position: relative;
    top: 7.5vh;
    right: 5vw;
    bottom: 7.5vh;
    left: 5vw;
    height: 60pt;
    width: calc(100% - 10vw);
    transform: translateY(-50pt);
}

#loading_progress_container{
    height: 20pt;
    width: calc(100% - 10vw);
    margin: 0;
    padding: 0;
}

#loading_progress{
    height: 20pt;
    width: calc(100% - 10vw);
    margin: 0;
    padding: 0;
    transform: translateX(-12.5pt);
}

#loading_bar_container,
#loading_bar{
    height: 40pt;
    left: 5vw;
    border-radius: 1vmin;
}

#loading_bar_container{
    width: calc(100% - 10vw);
    background: black;
}

#loading_bar{
    width: 100%;
    background: white;
}

#project_introduction{
    position: absolute;
    top: 5vh;
    right: 5vw;
    bottom: 7.5vh;
    left: 15vw;
    height: 85vh;
    display: flex;
    flex-direction: column;
}

@media (max-height: 735px){
    #project_introduction{
        top: 5vh !important;
    }
}

@media (max-width: 1200px) and (max-height: 576px){
    #project_introduction{
        left: 30vw !important;
    }
}

@media (min-width: 332px){
    #project_introduction{
        top: 25vh;
        left: 15vw;
    }
}

@media (min-width: 992px){
    #project_introduction{
        left: 30vw;
    }
}

#first_row,
#second_row{
    display: flex;
}

#project_introduction p{
    margin-left: 16pt;
}

#project_introduction p br{
    display: none;
}

@media (min-width: 576px){
    #project_introduction p br{
        display: inline;
    }
}

.label{
    width: 80pt;
    text-align: right;
}

#close_introduction{
    position: absolute;
    transform: translate(128pt, 48pt);
}

@media (min-width: 576px){
    #close_introduction{
        position: relative;
        transform: translate(0pt, 16pt);
    }
}

@media (min-width: 768px){
    #close_introduction{
        transform: translate(48pt, 16pt);
    }
}

@media (min-width: 992px){
    #close_introduction{
        transform: translate(80pt, -35pt);
    }
}

@media (min-width: 1400px){
    #close_introduction{
        transform: translate(160pt, -35pt);
    }
}

@media (min-width: 1800px){
    #close_introduction{
        transform: translate(240pt, 32pt);
    }
}










/* Commands tutorial */

#command_tutorial{
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: rgba(255,255,255,0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    pointer-events: none;
    text-align: center;
    z-index: 3000;
}

#command_ok{
    padding: 0;
    margin: 0;
    margin-bottom: 15vh;
    display: none;
}

@media (min-width: 768px){
    #command_ok{
        margin-bottom: 20vh;
    }
}

#loading{
    padding: 0;
    margin: 0;
    margin-bottom: 15vh;
    background: none !important;
    animation-name: LoadingText;
    animation-duration: 0.75s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@media (min-width: 768px){
    #loading{
        margin-bottom: 20vh;
    }
}

@keyframes LoadingText {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 0.5;
    }
}

#command_tutorial-2{
    max-height: 100vh;
    width: 95vw;
    max-width: 2400px;
    right: 2.5vw;
    left: 2.5vw;
    margin-bottom: 5vh;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (max-height: 576px){
    #command_tutorial-2{
        margin-bottom: 0vh !important;
    }
}

@media (min-width: 576px) and (max-height: 576px){
    #command_tutorial-2{
        margin-bottom: 0vh !important;
        flex-direction: row !important;
    }
}

@media (min-width: 768px){
    #command_tutorial-2{
        margin-bottom: 10vh;
        flex-direction: row;
    }
}

.command_tutorial_section{
    width: 100%;
    padding-right: 2.5vw;
    padding-left: 2.5vw;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (max-height: 576px){
    .command_tutorial_section svg{
        max-height: 25vh;
    }
}

.command_tutorial_section svg{
    height: 45%;
}

@media (min-width: 768px){
    .command_tutorial_section svg{
        height: 100%;
    }
}


  
  
  
  
  
  
  
  
/* Credits */
  
#credits{
    position: fixed;
    width: 100vw;
    display: flex;
    justify-content: center;
    bottom: 0;
    pointer-events: none;
    z-index: 4500;
}

#credits p{
    pointer-events: all;
}

#Copyright{
    position: fixed;
    bottom: 0;
    width: 100vw;
    padding-left: 5.5vw;
    display: flex;
    justify-content: left;
    z-index: 4500;
    display: none;
}

#Designer{
    display: none;
}

#Privacy-policy{
    position: fixed;
    bottom: 0;
    width: 100vw;
    padding-right: 7.5vw;
    display: flex;
    justify-content: right;
    z-index: 4500;
    display: none;
}

@media (min-width: 576px){
    #Copyright,
    #Designer,
    #Privacy-policy{
        display: flex;
    }
}


  
  
  
  
  
  

/* VR */
  
  #enter_vr_button{
    position: fixed;
    z-index: 3500;
}










/* Controller */

#Arrows{
    position: fixed;
    bottom: 1.5rem;
    right: calc((100vw - 10rem) / 2);
    width: 10rem;
    height: 10rem;
    cursor: pointer;
    visibility: hidden;
    z-index: 100;
}

.show-Arrows{
    visibility: visible !important;
}

.button-arrow{
    position: absolute;
    height: 30%;
    width: 30%;
    background-color: #5C89AD;
    border-radius: 0.5rem;
}

.button-arrow img{
    margin-top: 10%;
    margin-left: 10%;
    height: 80%;
    width: 80%;
    transition-duration: 0.5s;
    transition-property: margin-top;
    transition-timing-function: ease-out;
}

.button-arrow-active{
    margin-top: -10% !important;
    transition-timing-function: ease-in !important;
}

#W{
    top: 0%;
    left: 35%;
}

#A{
    top: 35%;
    left: 0%;
    transform: rotate(270deg);
}

#S{
    top: 35%;
    left: 35%;
    transform: rotate(180deg);
}

#D{
    top: 35%;
    left: 70%;
    transform: rotate(90deg);
}










/* Pointer */

#pointer-container{
    position: fixed;
    height: 100vh;
    width: 100vw;
    pointer-events: none;
    z-index: 2000;
}

#pointer-container circle{
    pointer-events: all;
}

#Pointer-1{
    fill: white;
    stroke-width: 0rem;
    transition-duration: 0.25s;
    stroke: white;
    transition-property: stroke-width;
    transition-timing-function: ease-out;
}

.pointer-scale-1{
    transition-duration: 0.5s !important;
    transition-timing-function: ease-in !important;
    stroke-width: 36px !important;
}

#Pointer-2{
    fill: black;
    stroke-width: 0rem;
    transition-duration: 0.25s;
    transition-delay: 0.25s;
    stroke: black;
    transition-property: stroke-width;
    transition-timing-function: ease-out;
}

.pointer-2-white{
    fill: white !important;
}

.pointer-scale-2,
.pointer-scale-3{
    animation-duration: 1s;
    animation-name: PointerScale;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.pointer-scale-2{
    stroke: var(--Primary) !important;
}

.pointer-scale-3{
    stroke: #33D8EB !important;
}

@keyframes PointerScale {
    from {
        stroke-width: 9px;
    }
    to {
        stroke-width: 24px;
    }
}










/* Music */

#Music{
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: rgba(255,255,255,0.50);
    pointer-events: all;
    visibility: hidden;
    z-index: 1000;
}

#Spotify{
    position: relative;
    height: 80vh;
    width: 90vw;
    top: 15vh;
    left: 5vw;
}

@media (min-width: 992px){
    #Spotify{
        height: 70vh;
        width: 50vw;
        top: 15vh;
        left: 25vw;
    }
}

.show-overlays{
    visibility: visible !important;
}

#Close-X{
    position: absolute;
    height: 10vh;
    top: 2.5vh;
    width: 90vw;
    left: 5vw;
    display: flex;
    align-items: center;
    justify-content: right;
    z-index: 3500;
    pointer-events: none;
    visibility: hidden;
}

@media (min-width: 992px){
    #Close-X{
        width: 75vw;
        left: 12.5vw;
    }
}

#Close-X svg{
    stroke: black;
    fill: rgba(255,255,255,0.27);
    stroke-width: 4px;
    stroke-linecap: round;
    pointer-events: all;
    cursor: pointer;
}

#Close-X:hover svg{
    stroke: var(--Primary);
}










/* Final viewport */

#final-viewport{
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: rgba(255,255,255,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3000;
    visibility: hidden;
}

#restart{
    position: absolute;
    cursor: pointer;
    top: 3.25vh;
    left: 5vw;
}

@media (min-width: 992px){
    #restart{
        left: 12.5vw;
    }
}

a.copy-link-visited,
a.copy-link-visited:hover{
    background: linear-gradient(white, white) 100% 75% !important;
	background-repeat: repeat-x !important;
	background-size: 100% 50% !important;
}