@font-face {
  font-family: geo;
  src: url(/fonts/GeosansLight.ttf);
}
@font-face {
  font-family: geo-oblique;
  src: url(/fonts/GeosansLight-Oblique.ttf);
}

@font-face {
  font-family: apple;
  src: url(/fonts/EarthMomma.ttf);
}
::selection {
  background-color: #ffffff25;
}

body {
  font-family: geo;
  font-size: 28px;
  color: white;
  background-color: #05030f;
  margin: 0;
  padding: 0;
  height: 100vh;
  cursor: url("/assets/cursor/cursor.png"), auto;
}

div:target {
  display: block !important;
}

a,
a:link,
a:visited,
a:active {
  color: white;
  text-decoration: none;
  cursor: url("/assets/cursor/pointer.png"), auto;
}
p {
  margin: 0;
}

input[type="range"] {
  transform: rotate(270deg);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  filter: drop-shadow(0px 0px 5px #fff);
  z-index: 6;
  height: 7px;
}

input[type="range"]:focus {
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  cursor: url("/assets/cursor/pointer.png"), auto;
  box-shadow: 0px 0px 0px #000000;
  background: #ffffff1c;
  border-radius: 1px;
  border: 0px solid #000000;
}

input[type="range"]::-webkit-slider-thumb {
  background: #fff;
  height: 18px;
  width: 18px;
  border-radius: 50px;

  cursor: url("/assets/cursor/pointer.png"), auto;
  -webkit-appearance: none;
  margin-top: -7px;
  transform: translateY(3px);
}
input[type="range"]::-moz-range-track {
  cursor: url("/assets/cursor/pointer.png"), auto;

  border-radius: 1px;
}
input[type="range"]::-moz-range-thumb {
  border: 1px solid #ffffff1c;
  height: 18px;
  width: 18px;
  border-radius: 50px;
  background: #fff;
  cursor: url("/assets/cursor/pointer.png"), auto;
}

hr {
  background-color: #fff;
}

.ui label {
  font-size: 20px;
  position: absolute;
  filter: drop-shadow(0px 0px 5px #ffffff);
  width: fit-content;
  transform: translate(34px, -75px);
  pointer-events: none;
}

.centerPreview {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  text-align: center;
  filter: drop-shadow(0px 0px 10px white);
}

.front {
  background-color: rgba(0, 0, 0, 0.85);
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -4;
  background-blend-mode: screen;
  mix-blend-mode: screen;
  filter: brightness(1.5) blur(2.5px);

  animation: fillIn 2.5s linear;
}
.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.label-text {
  background-color: transparent;
  text-align: left;
  white-space: nowrap;
  z-index: 3;
  display: inline-block;
}

.typewriter p {
  position: relative;
  color: white;
  font-family: geo;
  overflow: hidden;
  border-right: 2px solid white;
  font-size: calc(20px + 1.25vw);
  margin: 0 auto;
  line-height: normal;
  animation: typing 2s steps(30, end), blink-caret 1s step-end infinite;
}

.phrasecontainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  filter: drop-shadow(0px 0px 6px white);
  z-index: 5;
}

.phrasecontainer:hover {
  animation: breathe 0.4s infinite alternate;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.cardContainer {
  pointer-events: none;
  position: fixed;
  top: 10%;
  right: 5%;
  background-color: #ffffff1c;
  padding: 15px;
  border-radius: 5px;
  filter: drop-shadow(0px 0px 5px #ffffff);
  width: 400px;
}

.particles {
  position: fixed;
  z-index: 0;
  filter: blur(2px) drop-shadow(0px 0px 5px #ffffff);
  transform: scaleX(-1);
}

.vButtonContainer {
  transform: translate(18px, 0px);
}

.vButton {
  position: absolute;
  z-index: 6;
  filter: drop-shadow(0px 0px 5px #ffffff);
}
.vButton:hover {
  animation: breathe 0.4s infinite alternate;
  cursor: url("/assets/cursor/pointer.png"), auto;
}

.wBars {
  display: none;
  background-color: black;
  width: 100%;
  height: 10vh;
  position: fixed;
  left: 0;
  z-index: 10;
}

.page {
  display: none;
}

.visible {
  display: block;
}

.hidden {
  display: none;
}

#thegradient {
  z-index: -5;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  background: linear-gradient(
    45deg,
    #ff2400,
    #de0d0d,
    #fe00b1,
    #ccb800,
    #2bc235,
    #00c3ff,
    #9900ff,
    #dd00f3,
    #de0d0d,
    #ff2400
  );
  background-size: 3500% 1000%;
  -webkit-animation: rainbow 30s linear alternate infinite;
  -z-animation: rainbow 30s linear alternate infinite;
  -o-animation: rainbow 30s linear alternate infinite;
  animation: rainbow 30s linear alternate infinite;
  opacity: 0.85;
}
#page1 {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: 100%;
  transition: ease-in-out 1s;
}
#page2 {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 150%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: 100%;
  transition: ease-in-out 1s;
}
#pageS {
  z-index: 100;
  position: fixed;
  top: 50%;
  margin-left: 50px;
  transform: translateY(-50%);
  border-left: #fff solid 2px;
}

#pressKey {
  display: none;
  position: fixed;
  top: 95%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  filter: drop-shadow(0px 0px 6px white);
  font-size: 20px;
  z-index: 10001;
  pointer-events: none;
}

#topHalf,
#bottomHalf,
#topFake,
#bottomFake {
  position: fixed;
  background-color: black;
  width: 100%;
  height: 50%;
  z-index: 10;
}

#topHalf,
#bottomHalf {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
}

#topHalf {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
}

#topHalf,
#topFake,
#bottomFake {
  top: 0;
  left: 0;
}

#bottomHalf,
#topFake,
#bottomFake {
  bottom: 0;
  left: 0;
}

#wtop-bar {
  top: 0;
  animation: wDown 1s cubic-bezier(0.75, 0, 0.3, 1);
  transition: 1s cubic-bezier(0.75, 0, 0.3, 1);
}

#wbottom-bar {
  bottom: 0;
  animation: wUp 1s cubic-bezier(0.75, 0, 0.3, 1);
  transition: 1s cubic-bezier(0.75, 0, 0.3, 1);
}

#pageS a {
  margin: 25px 0px 25px 50px;
  width: fit-content;
  display: block;
  letter-spacing: normal;
  filter: drop-shadow(0px 0px 6px white);
  animation: setIn 0.25s ease-in-out;
}

#pageS a,
#pageS a:nth-last-child(1) {
  font-size: 30px;
}

#pageS a:hover {
  animation: breathe 0.4s infinite alternate;
}

#pageS a:nth-last-child(2) {
  font-size: 20px;
}

#pageS a:nth-last-child(1) {
  margin-top: 75px;
}

#settingsIcon {
  position: absolute;
  filter: drop-shadow(0px 0px 5px #ffffff);
  cursor: url("/assets/cursor/pointer.png"), auto;
  z-index: 6;

  transform: translate(20px, 32px);
}

#settingsIcon:hover {
  animation: breathe 0.4s infinite alternate;
}

#sideArrow {
  pointer-events: none;
  cursor: url("/assets/cursor/pointer.png"), auto;
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateX(-50%) translateY(-50%);
  filter: drop-shadow(0px 0px 5px #ffffff);
  z-index: 6;
}
#sideArrow:hover {
  animation: breathe 0.4s infinite alternate;
}

#logo {
  position: fixed;
  left: 190px;
  bottom: -10px;
  transform: translateX(-50%) translateY(-50%);
  filter: drop-shadow(0px 0px 5px #ffffff);
  pointer-events: none;
  transition: bottom 1s cubic-bezier(0.75, 0, 0.3, 1);
}

#thePreview {
  position: fixed;
  z-index: 100;
  height: 100%;
  width: 100%;
  display: none;
}
#previewBk {
  position: fixed;
  z-index: -5;
  background-image: url("assets/tempImg3.png");
  background-position: center;
  width: 100%;
  height: 100%;
}

#ocean {
  animation: scaleIn 10s ease-in-out;
}

#previewImg {
  width: 75%;
}

#mobilephrase {
  display: none;
}
#phrase {
  display: block;
}

#foundtextWrapper {
  width: 275px;
}

#darken {
  background-color: hsla(0, 0%, 0%, 0.2);
  z-index: -1;
}
#fade {
  background-color: white;
  pointer-events: none;
  opacity: 1;
  z-index: 9;
}

#fade2 {
  background-color: white;
  z-index: 9;
  opacity: 0;
  transition: opacity;
  pointer-events: none;
}

#light {
  background-color: white;
  z-index: -1;
  opacity: 0%;
}

#moosic-wrapper {
  position: fixed;
  z-index: 10;
  width: 100%;
  transform: translateY(70px);
  transition: 1s cubic-bezier(0.75, 0, 0.3, 1);
}

#moosic {
  position: fixed;
  display: table;
  filter: drop-shadow(0px 0px 5px white);
  background-color: #ffffff1c;
  border-radius: 5px;
  padding: 10px 20px 10px 100px;
  opacity: 1;
  transition: opacity 8s 8s ease-in, left 1.5s 1.5s ease-out;
  left: -530px;
  z-index: 6;
}

#artist {
  font-size: 15px;
}
#note {
  width: 30px;
  vertical-align: -4px;
  filter: invert(1);
  position: absolute;
  left: 64px;
}

#card {
  height: 175px;
  position: absolute;
  bottom: -35%;
  left: 70%;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
}

#comment {
  font-size: 15px;
}
#stickersFound {
  position: absolute;
  font-size: 17.5px;
  top: 105px;
  left: 50px;
}

#foundText {
  font-size: 25px;
}

#info {
  pointer-events: none;
  text-align: center;
  width: 810px;
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 14px;
  /* opacity: 0.75; */
  filter: drop-shadow(0px 0px 6px white);
  transition: bottom 1s cubic-bezier(0.75, 0, 0.3, 1);
}
#audioInfo {
  display: none;
  pointer-events: none;
  text-align: center;
  width: 810px;
  position: fixed;
  top: 94%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 14px;
  opacity: 0.5;
}
#tempImg {
  position: fixed;
  z-index: -5;
  background-image: url("assets/tempImg.png");
  width: 100%;
  height: 100%;
}
#voicesWrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  filter: blur(2px) drop-shadow(0px 0px 6px white);
  opacity: 0.25;
  font-size: 25px;
  text-align: left;
  mix-blend-mode: overlay;
}

#voicesWrapper div {
  position: absolute;
  pointer-events: none;
  width: 1000px;
  font-family: geo-oblique;
  opacity: 0;
}

#backvid,
#backvid2,
#backvid3 {
  transition: 3s ease-in-out;
}

#backvid3 {
  filter: brightness(1) blur(1px);
  display: none;
}

#interacts {
  position: fixed;
  bottom: 100px;
  right: 0px;
  z-index: 6;
  transition: bottom 1s cubic-bezier(0.75, 0, 0.3, 1);
}

#settingsVer {
  pointer-events: none;
  font-size: 15px;
  opacity: 0.5;
  filter: drop-shadow(0px 0px 6px white);
  transition: 1s ease-in-out;
  margin-left: 20px;
}

@keyframes float {
  from {
    top: 66%;
  }
  to {
    top: 70%;
  }
}

@keyframes textInOut {
  0% {
    opacity: 0;
    transform: rotate(-390deg) translate(0px, 0px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-390deg) translate(150px, 0px);
  }
}

@keyframes breathe {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.35;
  }
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 99%;
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: white;
  }
}

/* Infinite */
@keyframes backgroundScroll {
  0% {
    background-position: 0px 0px;
    filter: opacity(100%) blur(1px);
  }
  50% {
    background-position: 0px -234px;
    filter: opacity(50%) blur(1px);
  }
  100% {
    background-position: 0px -468px;
    filter: opacity(100%) blur(1px);
  }
}
/* Infinite  */
@keyframes backgroundScroll2 {
  0% {
    background-position: 0px 0px;
    filter: opacity(100%) blur(1px);
  }
  50% {
    background-position: 0px -234px;
    filter: opacity(100%) blur(1px);
  }
  100% {
    background-position: 0px -468px;
    filter: opacity(100%) blur(1px);
  }
}

@keyframes intoThe {
  from {
    opacity: 100%;
  }
  to {
    opacity: 0%;
  }
}
@keyframes fillIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(1.25);
  }
  to {
    transform: scale(1);
  }
}

@-webkit-keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }
  50% {
    background-position: 100% 19%;
  }
  100% {
    background-position: 0% 82%;
  }
}
@-moz-keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }
  50% {
    background-position: 100% 19%;
  }
  100% {
    background-position: 0% 82%;
  }
}
@-o-keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }
  50% {
    background-position: 100% 19%;
  }
  100% {
    background-position: 0% 82%;
  }
}
@keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }
  50% {
    background-position: 100% 19%;
  }
  100% {
    background-position: 0% 82%;
  }
}

@keyframes moosicin {
  from {
    transform: translate(-2500px, 75px);
  }
  to {
    transform: translate(-6px, 75px);
  }
}
@keyframes moosicout {
  from {
    transform: translate(-6px, 75px);
  }
  to {
    transform: translate(-2500px, 75px);
  }
}
@keyframes wiggle {
  from {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(-10deg);
  }
}
@keyframes settingIn {
  from {
    border-left: #fff solid 75px;
  }
  to {
    border-left: #fff solid 2px;
  }
}

@keyframes setIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes loadAnimation {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes wDown {
  from {
    top: -110px;
  }
  to {
    top: 0;
  }
}
@keyframes wUp {
  from {
    bottom: -110px;
  }
  to {
    bottom: 0;
  }
}

/* FIREFOX */
@-moz-document url-prefix() {
  .ui label {
    transform: translate(49px, -90px);
  }
  .vButton {
    transform: translate(10px, 0px);
  }
  #settingsIcon {
    transform: translate(30px, 45px);
  }
}
/* CHROME */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ui label {
    transform: translate(45px, -85px);
  }
}

@media (orientation: landscape) {
  body {
    letter-spacing: 2px;
  }

  #moosic {
    display: block;
  }

  .ui label {
    display: block;
  }

  .fullscreen-bg {
    display: block;
  }
  #darken {
    box-shadow: 0 0 200px #ffffff8c inset;
  }
}

@media only screen and (max-width: 1650px) {
  #logo {
    bottom: 70px;
    left: 50%;
  }
}
@media only screen and (max-width: 920px) {
  #info {
    width: 510px;
  }
}

@media (orientation: portrait) /* Sincerest apologies to mobile users,
  but this must be done. */ {
  body {
    font-size: 15px;
  }

  input[type="range"] {
    display: none;
  }

  .ui label {
    display: none;
  }

  .phrasecontainer {
    display: none;
  }
  .vButton {
    display: none;
  }

  .cardContainer {
    width: 300px;
    right: 15%;
    top: 7%;
    width: 250px;
  }

  .waveContainer {
    display: none;
  }

  .typewriter p {
    font-size: calc(13px + 1.5vw);
  }

  .fullscreen-bg {
    filter: brightness(1.5) blur(1.5px);
  }

  #thegradient {
    background-size: 100% 2000%;
  }

  #page1 {
    z-index: initial;
  }
  #mobilephrase {
    display: block;
  }
  #phrase {
    display: none;
  }
  #foundtextWrapper {
    width: 175px;
  }
  #moosic {
    display: none;
  }
  #note {
    width: 21px;
    vertical-align: -2px;
    filter: invert(1);
    padding-right: 5px;
  }
  #card {
    height: 105px;
    display: block;
    margin: 15px auto;
  }
  #comment {
    font-size: 12.5px;
  }
  #stickersFound {
    top: 75px;
    font-size: 15px;
  }
  #foundText {
    font-size: 15px;
  }

  #logo {
    width: 150px;
    bottom: 100px;
    left: 50%;
  }
  #info {
    width: 300px;
    font-size: 13px;
  }
  #audioInfo {
    display: none;
  }
  #tempImg {
    display: none;
  }
  #sideArrow {
    display: none;
  }
  #settingsIcon {
    display: none;
  }
}