@font-face {
  font-family: 'Raleway';
  src: url('./Raleway-VF.woff') format('woff');
  font-feature-settings: "lnum", "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
  -webkit-font-feature-settings: "lnum", "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
  -moz-font-feature-settings: "lnum", "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
  -ms-font-feature-settings: "lnum", "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
  -o-font-feature-settings: "lnum", "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
}

* {
  padding: 0;
  margin: 0;
  font-family: 'Raleway', Fallback, 'Courier New', Courier, monospace;
  font-variation-settings: "wght" 400, "GRAD" 88;
}

body {
  font-size: 1vmin;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  top: 0px;
  bottom: 20px;
  width: 100vw;
  
  display: flex;
}

@media (orientation: landscape) {
  body {
    font-size: 1vmax;
    flex-direction: row;
    height: 90vh;
  }


    #slidecontainer {
      
      position: relative;
      display: table;
      text-align: center;
      width: 500px;
      top: 3%;
    }

        .column {
          float: left;
          width: 80%;
        }
    
        .slider {
 
          float: center;
          width: 90%;
          padding: 5%;
        }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
    height: 90vh;
  }

    #slidecontainer {
      position: relative;
      top: 6%;
      display: flexbox;
      text-align: center;
      width: 92vmin;
      margin-left: 4%;
      height: 20%;
      cursor: pointer;
      margin-top: 1%;
    }

        .column {
          float: left;
          width: 33.33%;
        }
    
        .slider {
          margin-top: 5%;
          float: center;
          width: 90%;
          padding: 8%;
        }
}

p {
  color: rgb(102, 0, 255);
  font-size: 3vmin;
  line-height: 1.5em;
}

a {
  display: block;
  color: rgb(102, 0, 255);
  font-size: 4vmin;
  line-height: 1.5em;
  cursor: pointer;
  padding: 3%
}

.bold {
  font-variation-settings: "wght" 800, "GRAD" 88;
}

.yellow {
  color: yellow
}

#scene-container {
  margin-left: 4%;
  margin-right: 4%;
  position: relative;
  top: 3%;
  width: 92vmin;
  height: 92vmin;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: rgb(0, 0, 0);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
}

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

input[type="range"]::-webkit-slider-runnable-track {
  background: rgb(102, 0, 255);
  height: 20%;
}

input[type="range"]::-moz-range-track {
  background: rgb(102, 0, 255);
  height: 10%;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  background:rgb(102, 0, 255);
  margin-top: -5px;
  border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  background: rgb(102, 0, 255);
  margin-top: -5px;
  border-radius: 50%;
}