/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!
  \*************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;600&display=swap);
/*!*****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/index.scss (1) ***!
  \*****************************************************************************************************************************************/
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: black;
  overflow: hidden;
}

.controls {
  position: absolute;
  justify-content: left;
  margin: 0;
  padding-left: 2vw;
  padding-top: 7vw;
}

#wheelContainer {
  width: 30vw;
  margin: 0;
}

.link {
  z-index: 5;
  position: absolute;
  height: 20vh;
  width: 30vw;
}

#explore {
  width: 40%;
  margin-left: 30%;
  margin-top: 7%;
}

#mbt {
  z-index: 6;
  width: 65px;
  position: absolute;
  top: 20px;
  left: 20px;
}

#li {
  z-index: 6;
  width: 40px;
  position: absolute;
  top: 20px;
  left: 80px;
}

#gh {
  z-index: 6;
  width: 40px;
  position: absolute;
  top: 80px;
  left: 20px;
}

.spinning {
  animation-name: spin;
  animation-duration: 20000ms;
  /* How long lasts 1 turn */
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spinwheel {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.5;
  animation-timing-function: linear;
}

.rotate {
  transform: rotate(75deg);
}

.s0 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.2083;
  animation-timing-function: linear;
}

.r0 {
  transform: rotate(75deg);
}

.s1 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.2916;
  animation-timing-function: linear;
}

.r1 {
  transform: rotate(105deg);
}

.s2 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.4583;
  animation-timing-function: linear;
}

.r2 {
  transform: rotate(165deg);
}

.s3 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.375;
  animation-timing-function: linear;
}

.r3 {
  transform: rotate(135deg);
}

.s6 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.5416;
  animation-timing-function: linear;
}

.r6 {
  transform: rotate(195deg);
}

.s10 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.652;
  animation-timing-function: linear;
}

.r10 {
  transform: rotate(225deg);
}

.s11 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.7083;
  animation-timing-function: linear;
}

.r11 {
  transform: rotate(255deg);
}

.s9 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.7916;
  animation-timing-function: linear;
}

.r9 {
  transform: rotate(285deg);
}

.s8 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.875;
  animation-timing-function: linear;
}

.r8 {
  transform: rotate(315deg);
}

.s7 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.9583;
  animation-timing-function: linear;
}

.r7 {
  transform: rotate(345deg);
}

.s4 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.125;
  animation-timing-function: linear;
}

.r4 {
  transform: rotate(45deg);
}

.s5 {
  animation-name: spinWheel;
  animation-duration: 2000ms;
  animation-iteration-count: 0.0416;
  animation-timing-function: linear;
}

.r5 {
  transform: rotate(15deg);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes spinWheel {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.welcome {
  position: absolute;
  right: 0px;
  width: 70vw;
  margin: 0;
}

.explore-directions {
  display: flex;
  position: absolute;
  align-items: center;
  left: 200px;
  top: 25px;
  height: 50px;
  width: 480px;
  font-family: "Titillium Web", sans-serif;
  color: white;
}
.explore-directions p {
  width: 430px;
  margin: 0;
}
.explore-directions button {
  width: 30px;
  height: 50px;
  margin-right: 20px;
  border: none;
  border-radius: 100%;
  background-color: transparent;
  color: white;
  font-size: 25px;
  text-indent: -2px;
}

.far-out {
  display: block;
  position: absolute;
  font-family: "Titillium Web", sans-serif;
  color: white;
  height: 200px;
  width: 200px;
  overflow: scroll;
  bottom: 30px;
  right: 30px;
}
.far-out a {
  color: blue;
}

.hide {
  display: none;
}

.highlight {
  animation: highlight 2s linear 0s infinite;
  -webkit-animation: highlight 2s linear 0s infinite;
}

@keyframes highlight {
  0% {
    stroke: white;
    stroke-width: 0px;
    filter: drop-shadow(0px 0px 0px #fff);
    -webkit-filter: drop-shadow(0px 0px 0px #fff);
  }
  25% {
    stroke: white;
    stroke-width: 2.5px;
    filter: drop-shadow(0px 0px 10px #fff);
    -webkit-filter: drop-shadow(0px 0px 10px #fff);
  }
  50% {
    stroke: white;
    stroke-width: 5px;
    filter: drop-shadow(0px 0px 20px #fff);
    -webkit-filter: drop-shadow(0px 0px 20px #fff);
  }
  100% {
    stroke: white;
    stroke-width: 0px;
    filter: drop-shadow(0px 0px 0px #fff);
    -webkit-filter: drop-shadow(0px 0px 0px #fff);
  }
}
@media (max-width: 800px) {
  .links {
    top: 70%;
  }

  #welcome {
    position: absolute;
    top: 25px;
  }
  #welcome #welcomeText {
    width: 70vw;
  }

  .controls {
    position: absolute;
    width: 400px;
    bottom: 25px;
    padding: 0;
    margin: 0;
  }
  .controls #wheelContainer {
    height: 350px;
    width: 350px;
  }
  .controls #explore {
    position: absolute;
    width: 80px;
    bottom: 20px;
    right: 0px;
    margin: 0;
  }

  .explore-directions {
    left: 10px;
    top: 200px;
    height: 50px;
    width: 100vw;
  }

  .hide {
    display: none;
  }
}
@media (max-width: 450px) {
  .controls {
    display: flex;
    justify-content: center;
    width: 100vw;
    bottom: 0;
    padding: 0;
    margin: 0;
  }
  .controls #explore {
    width: 18%;
    position: absolute;
    bottom: 330px;
    left: 20px;
  }

  .links {
    top: 70%;
  }

  #welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    position: absolute;
    width: 100vw;
    top: 150px;
  }
  #welcome #welcomeText {
    width: 95%;
  }

  #li {
    z-index: 5;
    margin: 0;
    width: 50px;
    position: absolute;
    left: 80px;
    top: 10px;
  }

  #gh {
    z-index: 5;
    margin: 0;
    width: 50px;
    position: absolute;
    left: 10px;
    top: 80px;
  }

  #mbt {
    z-index: 6;
    width: 80px;
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .explore-directions {
    left: 10px;
    top: 300px;
    height: 50px;
    width: 100vw;
  }

  .hide {
    display: none;
  }
}