@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");

* {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
									supported by Chrome and Opera */
}

#gameContainer {
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: fixed;
  height: 100vh;
  background: transparent;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 1;
}

#coverImage {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}
#coverPlate {
  overflow: hidden;
  text-align: center;
  text-justify: auto;
  font-size: 20px;
  padding-top: 30%;
  font-family: "Courier New", Courier, monospace;
  color: aliceblue;
  background: black;
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 5;
  transition: opacity 7s;
}
#coverPlateLeft {
  overflow: hidden;
  background: #e0e0e0;
  width: 0;
  left: 0;
  height: 100vh;
  position: absolute;
  z-index: 3;
  transition: opacity 1s;
}
#coverPlateRight {
  overflow: hidden;
  background: #e0e0e0;
  width: 0;
  right: 0;
  height: 100vh;
  position: absolute;
  z-index: 3;
  transition: opacity 1s;
}

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 4;
  top: 0;
  left: -200px;
  background-color: rgba(1, 1, 1, 0.75);
  /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}
/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  color: #818181;
  display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}
.sidenav2 {
  display: none;
  border-radius: 8px 0 0px 8px;
  height: 16%;
  width: 100px;
  position: fixed;
  z-index: 4;
  top: 10px;
  right: -150px;
  background-color: rgba(1, 1, 1, 0.45);
  border-style: groove;
  border-color: black;
  /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}
/* The navigation menu links */
.sidenav2 a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  font-family: "Roboto", sans-serif;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav2 a:hover {
  color: #f1f1f1;
}

.sidenav3 {
  display: block;
  border-radius: 8px 0 0px 8px;
  height: 5%;
  width: 100px;
  position: fixed;
  z-index: 4;
  top: 10px;
  right: -150px;
  background-color: rgba(1, 1, 1, 0.45);
  border-style: groove;
  border-color: black;
  /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
}
/* The navigation menu links */
.sidenav3 a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  font-family: "Roboto", sans-serif;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav3 a:hover {
  color: #f1f1f1;
}

/*Loading BAR*/

#loader_container {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  top: 70%;
  bottom: 0;
  margin: 0 auto;
  width: 300px;
  text-align: center;
  padding-top: 50px;
}
#bar_container {
  height: 24px;
  background: #dcdbd7;
  border-radius: 20px;
  border-top: 1px solid #cfcec9;
  border-bottom: 1px solid #f7f6f4;
  box-shadow: 0 -1px 0 #bab9b4;
  margin-bottom: 24px;
  position: relative;
}
#progress_bar {
  background-color: #dcf1c6;
  background-image: -webkit-gradient(
    linear,
    center top,
    center bottom,
    color-stop(0%, #9fbff4),
    color-stop(100%, #555bb4)
  );
  background-image: -webkit-linear-gradient(top, #9fbff4 0%, #555bb4 100%);
  background-image: -moz-linear-gradient(top, #9fbff4 0%, #555bb4 100%);
  background-image: -ms-linear-gradient(top, #9fbff4 0%, #555bb4 100%);
  background-image: -o-linear-gradient(top, #9fbff4 0%, #555bb4 100%);
  background-image: linear-gradient(to bottom, #9fbff4 0%, #555bb4 100%);
  height: 110%;
  position: absolute;
  top: -3px;
  left: 0px;
  border-top: 1px solid #e5ebf4;
  border-radius: 20px;
  box-shadow: 0 3px 10px #717171;
  width: 10%;
  transition: width 0.1s ease-in-out;
}
#text_container {
  display: flexbox;
  align-content: center;
  justify-content: center;
  color: #757575;
  font-weight: bold;
  font-size: 22px;
  text-shadow: -1px 1px 1px #d1d0cc;
}
#text_container span {
  display: block;
  font-weight: normal;
  font-size: 11px;
  margin-top: 6px;
}

#icons {
  display: grid;
  align-content: center;
  justify-content: center;
  height: 200px;
  width: 100px;
  position: fixed;
  z-index: 10;
  bottom: 0;
  right: 0px;
  background-color: rgba(1, 1, 1, 0);
  /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
}

#flying {
  padding: 8px;
  height: 0px;
  width: 0px;
}

#degrees {
  padding: 8px;
  height: 0px;
  width: 0px;
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(56deg);
  -webkit-filter: invert(0.5) sepia(1) saturate(5) hue-rotate(56deg);
}

#degrees:hover {
  cursor: pointer;
  transform: scale(1.25);
}

.nonActive:hover {
  cursor: pointer;
  transform: scale(1.25);
}

.nonActive {
  filter: invert(0.5) sepia(1) saturate(50) hue-rotate(1deg);
  -webkit-filter: invert(0.5) sepia(1) saturate(50) hue-rotate(1deg);
}
.active {
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(56deg);
  -webkit-filter: invert(0.5) sepia(1) saturate(5) hue-rotate(56deg);
}

#walking,
#flying,
#degrees {
  transition: all 0.25s ease-in-out;
}

#walking {
  padding: 8px;
  height: 0px;
  width: 0px;
}

/* Loader 2 */
.loader-2 {
  display: block;
  margin: 10px auto;
  height: 32px;
  width: 32px;
  -webkit-animation: loader-2-1 3s linear infinite;
  animation: loader-2-1 3s linear infinite;
}
@-webkit-keyframes loader-2-1 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes loader-2-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader-2 span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 32px;
  width: 32px;
  clip: rect(16px, 32px, 32px, 0);
  -webkit-animation: loader-2-2 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  animation: loader-2-2 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-2-2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes loader-2-2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader-2 span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 32px;
  width: 32px;
  border: 3px solid transparent;
  border-top: 3px solid blue;
  border-radius: 50%;
  -webkit-animation: loader-2-3 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  animation: loader-2-3 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-2-3 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes loader-2-3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader-2 span::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 32px;
  width: 32px;
  border: 3px solid rgba(22, 55, 75, 0.5);
  border-radius: 50%;
}

*:before,
*:after {
  box-sizing: border-box;
}