@font-face {
  font-family: MuseoSans;
  src: url(fonts/museo_sans_ssv/Museo\ Sans\ 100/MuseoSans-100.otf);
}

@font-face {
  font-family: MuseoSans;
  src: url(fonts/museo_sans_ssv/Museo\ Sans\ 700/MuseoSans_700.otf);
  font-weight: bold;
}

body {
  background-color: #121212;
  color: #eeeeee;
  font-family: MuseoSans;
}

.corner_text {
  font-size: 5vh;
}

#next_button {
  width: 166px;
  height: 22px;
  cursor: pointer;
}

.gamplay_text {
  font-size: 4vh;
}

.options_text {
  font-size: 2.2vh;
  cursor: pointer;
}

#option1a, #option2a, #option3a, #option4a{ 
  opacity: 0.3;
  cursor: default;
}

.hide_img {
  display: none;
}

#username_textbox {
  width: 100%;
  outline: 0;
  background-color: #121212;
  border-color: #eeeeee;
  border-width: 0 0 2px;
  color: #eeeeee;
}

.items {
  width: 50%;
}

#glitch1{
  position: absolute;
  width: 100%;
  height: 100%;
  border-image-repeat: stretch;
  z-index: 2;
}
#glitch2{
  position: absolute;
  width: 100%;
  height: 55%;
  border-image-repeat: stretch;
  top: 12.5%;
  left: 0%;
}
#cem2{
  position: absolute;
  width: 80%;
  height: 85%;
  border-image-repeat: stretch;
  top: 8%;
  left: 10%;
  cursor: pointer;
}

#dot1, #dot2, #dot3, #dot4, #dot5 {
  height: 2vh;
  width: 2vh;
  border: 0.26vh solid white;
  border-radius: 50%;
  display: block;
  position: relative;
  left: 99%;
  bottom: 0.7%;
  margin-top: -2vh;
  cursor: pointer;

}

@media screen and (max-width: 600px) {
  .items {
    width: 75%;
  }
}

@media screen and (max-width: 400px) {
  .items {
    width: 100%;
  }
}