@font-face {
  font-family: "machine";
  src: url("https://cdn.glitch.com/cc1e6163-8bfc-4ebd-a865-f13cb1810749%2FNeueMachina-Regular.otf?v=1614244136763");
}
body {
  font-family: "machine";
}
*{
/* Prevent any object from being highlighted upon touch event*/
  tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}

.display-none {
  display:none;
}
.display-flex {
  display:flex;
}
.display-block{
  display:block;
}
.visibility-hidden{
  visibility:hidden;
}
#enter{
  cursor: pointer;
}
#locationInfo{
  top: 50vh;
  flex-direction: column;
  position: absolute;
  z-index: 300;
/*   visibility: hidden; */
  z-index: 300;
/*   position: relative; */
  margin-left: 2em;
  border-radius: 30px;
  order: 2px solid red;
  border-radius: 50px 20px;
/*   background-color: red; */
  color: white;
  width: 20vw;
}
#interface2{
    display:none;
  }
#artistInfo{
  z-index:400;
  display:flex;
  flex-direction: column;
  position: absolute;
  color: white;
  transform: translate(-50%);
  padding-right: 0em;
  right: 0.1em;
  bottom: 70px;
  font-size: xx-large;
}
#artistName{
    font-size: 1em;
  }
#artistProject{
    font-size: 1em;
  }
.overlay {
  z-index: 300;
  position: absolute;
  margin-top: 10em;
  margin-left: 2em;
  border-radius: 30px;
  order: 2px solid red;
  border-radius: 50px 20px;
  background-color: black;
  color: yellow;
  font-family: "Roboto";
}

.overlay:hover {
  z-index: 300;
  position: absolute;
  margin-top: 10em;
  margin-left: 2em;
  border-radius: 30px;
  order: 2px solid red;
  border-radius: 50px 20px;
  background-color: red;
  color: black;
  font-family: "Roboto";
}


.splash.display-none {
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: black;
  width: 100%;
  height: 100vh;
  z-index: -10;
  text-align: center;
  color: blue;
  opacity: 0;
  transition: all 0.5s;
}

.splash {
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: black;
  width: 100%;
  height: 100vh;
  z-index: 200;
  text-align: center;
  color: purple;
}

.fullscreen {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 20vh;
  width: 40vw;
  min-width: 350px;
  z-index: 190;
  text-align: center;
  transition: all 0.5s;
}

#enter {
  bottom: 0px;
  right: 1%;
  transform: translate(-50%, -50%);
  visibility: visible;
  position: absolute;
  z-index: 400;  
  background-color: transparent;
  color: #8bf875;
  border-radius: 100px;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-family: "machine";
  font-size: 1em;
}

#enter:hover {
  cursor: pointer;
}

.enter2 {
  visibility: visible;
  position: fixed;
  top: 50%;
  left: 50%;
  border: transparent;
  transform: translate(-50%, -50%);
  z-index: 400;
  background-color: transparent;
  color: black;
  font-family: "machine";
  max-width: 7vw;
}

#enter3 {
  z-index: 410;
}

.artefacts-found {
  visibility: hidden;
  position: absolute;
  transform: translate(-50%);
  z-index: 410;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0.8em;
  padding-right: 0em;
  right: 0.1em;
  max-width: 4vw;
  padding-bottom: 2em;
  min-width:3em;
  height: max-content;
  gap: 0.2vh;

}

#artefacts-missing {
  visibility: hidden;
  position: absolute;
  transform: translate(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0.8em;
  padding-right: 0em;
  right: 0.1em;
  max-width: 4vw;
  padding-bottom: 2em;
  min-width:3em;
  height: max-content;
  gap: 0.2vh;
  
}

#artefacts-missing img{

   max-height: 4vw;
  min-height: 3em;
  
}

.artefacts-found img{

   max-height: 4vw;
  min-height: 3em;
 
}

#nav-bar {
  visibility: hidden;
  height:100vh;
}
#mainButtons {
/*   display:flex; */
  flex-direction: row;
  flex-wrap: nowrap;
  
  justify-content: center;
/*   align-items: baseline; */
  position: absolute;
  width: 100vw;
  bottom: 30px;
  width:100vw;
}

#mainButtons img {
  
}




#left {
  visibility: visible;
/*   position: absolute;
  bottom: 70px;
  left: 30vw; */
  border: transparent;
  z-index: 401;
  background-color: transparent;
  margin-right: -4vw;
  cursor: pointer;
}
#right {
/*   visibility: visible; */
/*   position: absolute;
  bottom: 70px;
  right: 40vw; */
  border: transparent;
  z-index: 401;
  background-color: transparent;
  margin-left: -4vw;
  cursor: pointer;
}
.nav {
  max-width: 10vw;
/*   position: fixed; */
}



#location {
  visibility: visible;
  align-items: flex-start;
/*   position: absolute; */
  z-index: 400;
/*   bottom: 0px;
  left: 50%;
  transform: translate(-50%, -50%); */
  
  height: 10vh;
  
}

#location2 {
  visibility: hidden;
  z-index: 399;
  max-width: 20vw;
/*   justify-content: center; */
/*   align-items: baseline; */
  position: absolute;
/*   width: 100vw; */
/*   bottom: 70px; */
/*   left: 50%;
  transform: translate(-50%); */
  height: max-content;
}

#location3 {
  visibility: hidden;
  z-index: 398;
  max-width: 20vw;
/*   justify-content: center; */
/*   align-items: baseline; */
  position: absolute;
/*   width: 100vw; */
/*   bottom: 70px; */
/*   left: 50%; */
/*   transform: translate(-50%); */
  height: max-content;

}




.button {
  visibility: visible;
  position: absolute;
  z-index: 400;
  background-color: transparent;
  color: black;
  font-family: "Roboto";
  max-width: 10vw;
  tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}



#logo {
  visibility: visible;
  position: absolute;
  z-index: 400;
  padding-left: 0.5em;
  padding-top: 1em;
  max-width: 20vw;
  min-width:8em;
  cursor: pointer;
}


/* .collect {

  bottom: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 4050;  
  background-color: #f1f1f1;
  color:black;
  border-radius: 100px;
  padding-left: 1em;
  padding-right: 1em;
  font-family: "machine";
  font-size: 1em;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
-moz-animation: glow 2s ease-in-out infinite alternate;
animation: glow 2s ease-in-out infinite alternate;
} */
/* #collect-div{
  
} */
.collect {
  visibility: hidden;
  bottom: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  position: absolute;
  z-index: 4050;  
  background-color: #f1f1f1;
  color:black;
  border-radius: 100px;
  padding-left: 1em;
  padding-right: 1em;
  font-family: "machine";
  font-size: 1em;
}

.collect:hover {
  visibility: hidden;
  bottom: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  position: absolute;
  z-index: 4050;  
  background-color: #f1f1f1;
  color:black;
  border-radius: 100px;
  padding-left: 1em;
  padding-right: 1em;
  font-family: "machine";
  font-size: 1em;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
-moz-animation: glow 2s ease-in-out infinite alternate;
animation: glow 2s ease-in-out infinite alternate;
}
/* 
#collect2 {
  visibility: hidden;
  z-index: 405; 
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 405;
  color: black;
  font-family: "machine";
  font-size: 1em;
}

#collect3 {
  visibility: hidden;
  z-index: 405; 
  position: fixed;
}

#collect4 {
  visibility: hidden;
  z-index: 405; 
  position: fixed;
}

#collect5 {
  visibility: hidden;
  z-index: 405; 
  position: fixed;
} */

#ending{
visibility: hidden;  
background-color: black;
width: 100%;
height:100%;
z-index: 410;
position: fixed;
top: 0px;
left: 0px;
color: white;
text-align: center;
opacity: 0.9;
font-family: "machine";
font-size:1.5em;
-webkit-animation: glow 2s ease-in-out infinite alternate;
-moz-animation: glow 2s ease-in-out infinite alternate;
animation: glow 2s ease-in-out infinite alternate;
padding-top: 30vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#endingtxt{
  text-align: left;
  max-width: 37ch;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  font-size:0.5em;
  padding-bottom: 0vh;
  padding-top: 20vh;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #40e738, 0 0 30px #dfdb16, 0 0 40px #dfdb16, 0 0 50px #df4e16;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #40e738, 0 0 40px #ff4da6, 0 0 50px #121230, 0 0 60px #df4e16;
  }
}

#info {
  bottom: 0px;
  left: 5%;
  transform: translate(-50%, -50%);
  visibility: visible;
  position: absolute;
  z-index: 400;  
  background-color: transparent;
  color:white;
  border-radius: 100px;
  padding-left: 1em;
  padding-right: 1em;
  font-family: "machine";
  font-size: 1em;
}

#infotext{
visibility: hidden;  
background-color: #1d1d1b;
width: 100%;
height:100%;
z-index: 410;
position: fixed;
top: 0px;
left: 0px;
color: white;
text-align: center;
opacity: 1;
font-family: "machine";
font-size:1em;
padding-top: 30vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#i-text{
background-color: #1d1d1b;
width: 100%;
height:100%;
z-index: 410;
position: fixed;
top: 0px;
left: 0px;
color: white;
text-align: center;
opacity: 1;
font-family: "machine";
font-size:1em;
overflow:auto;
margin-top: 30vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 60ch;
}

#back{
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 8.5%;
  visibility:hidden;
  position: relative;
  z-index: 4050;  
  background-color: #1d1d1b;
  color:white;
  border-radius: 100px;
  padding-left: 1em;
  padding-right: 1em;
  font-family: "machine";
  font-size: 1em;
}

#exit{
  left: 0.5em;
  top: 0em;
  position: absolute;
  z-index: 400;  
  background-color: transparent;
  color: #e3e3e3;
  border: none;
  font-family: "machine";
  font-size: 2em;
  text-shadow: 0px -1px 0px rgba(255,255,255,.5);
}

#exit:hover{
  color: #868686;
  cursor:pointer;
  text-shadow: 0px -1px 0px rgba(255,255,255,1);
}

#archive{
  background-color: transparent;
  border-radius: 100px;
  padding-left: 1em;
  padding-right: 1em;
  margin-top: 20vh;
  font-family: "machine";
  font-size: 1em;
  color: #8bf875;
}

#archive:hover{
  cursor: pointer;
}

a {
  color: #40e738;
}

#start{    
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: visible;
  position: relative;
  z-index: 4050;  
  font-family: "machine";
  background-color: black;
  border-radius: 100px;
  padding-left: 2em;
  padding-right: 2em;
  font-family: "machine";
  font-size: 0.8em;
  color: #8bf875;
  box-shadow: 1px 1px 150px #8bf875;
  cursor: pointer;
}

#start:hover{    

  box-shadow: 1px 1px 50px #8bf875;
  transition-timing-function: ease-in-out;
}

#background{
visibility: visible;  
background-color: black;
width: 100%;
height:100%;
z-index: 4049;
position: fixed;
top: 0px;
left: 0px;
color: white;
text-align: center;
opacity: 0.9;
font-family: "machine";
font-size:2em;
-webkit-animation: glow 2s ease-in-out infinite alternate;
-moz-animation: glow 2s ease-in-out infinite alternate;
animation: glow 2s ease-in-out infinite alternate;
padding-top: 30vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#introtxt{
  position: absolute;
  max-width: 57ch;
  min-width: 300px;
  left: 50%; 
  transform: translate(-50%);
  padding-bottom: 1.5em;
  padding-top: 50vh;
  text-align: left;
  color: white;
  z-index: 5000;
  font-size: 0.8em;
line-height: 160%;}

@media screen and (max-width: 768px) {
  
  .fullscreen{
    top: 10%;
  }
  
  #introtxt{
    
    padding-top: 40vh;
    line-height: 130%;
  }
  
  #enter{
    transform: translate(-10%, -50%);
  }
  #info{
    transform: translate(-10%, -50%);
  }
  #logo{
    transform: translate(-10%, 0%);
    padding-top: 4vh;
  }
  .artefacts-found{
    transform: translate(-10%, 0%);
  }
  #artefacts-missing{
    transform: translate(-10%, 0%);
  }
  #interface, #interface2{
    display:none;
  }
  #mainButtons{
    bottom: 2vh;
  }
  #location{
    
    max-height: 10vh;
  }
/*   #location2{
    max-width:70vw;
    height: max-content;

  }
  #location3{
    max-width:70vw;
    height: max-content;
  
  } */
  #right{
    margin-left:-17vw;
  }
  #left{
    margin-right:-17vw;
  }
  .nav{
    max-width: 17vw;
    margin-top: -2px;
  }
  #infotext{
    overflow: scroll;
    padding-top: 10vh;
  }
  #i-text{
    margin-top: 15vh;
/*     max-width: 75vw; */
    width: auto;
    top: 0;
    left: 0;
    transform: translate(0%, 0%);
    margin-left: 10vw;
    margin-right: 10vw;
    height: 150vh;
  } 
  #back{
    bottom: 95vh;
    left: 6vw;
    padding-left: 0.5em;
    padding-right: 0.6em;
    font-size: 1.5em;
    padding-top: 0.1em;
    padding-bottom: 0.2em;
  }
  #artistName{
    font-size: 0.7rem;
  }
  #artistProject{
    font-size: 0.7rem;
  }
}

button:hover{cursor: pointer;}


#badge{
  max-width: 30vw;
  min-width: 250px;
left: auto; 
  padding-bottom: 1.5em;}



.relic-review{
  
  max-width: 10vw;
  min-width: 250px;
  left: 50%;
  top: 20%;
  text-align: center;
  position: absolute;
  z-index: 5100;
  transform: translate(-50%);

  
}

#aff1-watchback{visibility: hidden;}
#aff2-watchback{visibility: hidden;}
#aff3-watchback{visibility: hidden;}
#aff4-watchback{visibility: hidden;}
#aff5-watchback{visibility: hidden;}

.card-button{background-color: transparent;
border: none;
  padding: 0em;
  margin: 0em;
}