/* GLOBAL STYLES */

html {
  overflow: auto;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  overflow: auto;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: black;
  vertical-align: baseline;
}

body::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}

/*1st Phase*/

.enter {
  color: greenyellow;
  font-size: 5vh;
  font-family: Consolas,monaco,monospace;
}

.enterhint {
  color: transparent;
  font-size: 5vh;
  font-family: Consolas,monaco,monospace;
}

.code {
  width: 100%;
  border-color: transparent;
  background-color: transparent;
  color: #adff2f;
  font-size: 5vh;
  font-family: Consolas,monaco,monospace;
}

input[type="password"],input[type="password"]:focus {
  background: transparent;
  border: none;
  outline-width: 0;
}

/*2nd Phase - Valley*/

#valleymain {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;  
  background: linear-gradient(180deg,rgba(7, 26, 54, 1) 0%, rgba(55, 140, 103, 1) 32%, rgba(52, 69, 141, 1) 67%);
}

#mountain-lod3 {
  position: fixed;
  width: 100vw;
  height: 38vh;
  bottom: 0;
  z-index: -3;
}

#mountain-lod2 {
  position: fixed;
  width: 100vw;
  height: 38vh;
  bottom: -8vh;
  z-index: -2;
}

#mountain-lod1 {
  position: fixed;
  width: 100vw;
  height: 38vh;
  bottom: -20vh;
  z-index: -1;
}

#mountain-lod3::before {
  position: absolute;
  content: '';
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  background-image: url(img/blue.png);
  background-position-y: -87vh;
  background-position-x: -25vh;
  background-repeat: repeat-x;
  background-size: 100vw;
}
#mountain-lod2::before {
  position: absolute;
  content: '';
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  background-image: url(img/blue.png);
  background-position-y: -43.3vh;
  background-position-x: 10vh;
  background-repeat: repeat-x;
  background-size: 100vw;
}
#mountain-lod1::before {
  position: absolute;
  content: '';
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  background-image: url(img/blue.png);
  background-position-y: 0vh;
  background-position-x: -10vh;
  background-repeat: repeat-x;
  background-size: 100vw;
}
#fog-lod2 {
  position: fixed;
  width: 100vw;
  height: 52vh;
  bottom: 0;
  z-index: -2;
}

#fog-lod2::before {
  position: absolute;
  content: '';
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  background-image: url(img/white.png);
  background-repeat: repeat-x;
  background-size: 100vw;
}

#stars {
  position: absolute;
  content: '';
  z-index: -10;
  width: 100%;
  height: 70vh;
  background-size: 160vh;
  background-image: url(img/stars.png);
  background-repeat: repeat-x;
}

/* animations */

@keyframes fadeInColor {
  from {
    background-color: black;
  }
  to {
    background-color: white;
  }
}

@keyframes fadeOut {
  from {
    opacity: 100%;
  }
  to {
    opacity: 0%;
  }
}