body,
html {
  background-color: rgb(24, 24, 28);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* font-size: 5.7rem; */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgb(255, 255, 255);

}

canvas {
  /* position: absolute; */
  /* top: 0; */
  /* left: 0;    */
  margin: 0;
  padding: 0;
  z-index: 3;

}

::-moz-selection {
  color: rgb(255, 255, 255);
  background: rgb(47, 49, 58);
}

::selection {
  color: rgb(255, 255, 255);
  background: rgb(47, 49, 58);
}

.scrollbar {
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #4800ff;
  overflow-y: scroll;
  margin-bottom: 25px;
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(80, 2, 170, 0.3);
  box-shadow: inset 0 0 6px rgba(80, 2, 170, 0.3);
  background-color: #222027;
}

body::-webkit-scrollbar {
  width: 6px;
  background-color: #4d2424;
}

body::-webkit-scrollbar-thumb {
  /* a color which looks good with #181225 */
  background-color: #4800ff;
  background-image: -webkit-linear-gradient(12deg, #4800ff, #9469ff);
}



/* position: absolute; */
/* top: 0; */
/* left: 0;/ */
/* width:100vw; */
/* height:100vh; */

.settings {
  color: rgb(107, 107, 107)
}

.input_video {
  /* align center */
  /* position: absolute; */
  top: 0%;
  left: 50%;
  transform: translate(0%, 0%);
  z-index: -5;
  /* width: 100%; */
  /* transition: 500ms; */
}

.toggle_button {
  /* size the button to be big and have a blue color and rounded corners */
  /* width: 16vw; */
  /* height: 5vh; */
  background-color: rgb(39, 37, 44);
  border-radius: 12px;
  border: none;
  /* 1px solid rgba(255, 0, 55, 0.479); */
  color: rgb(255, 255, 255);
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
  padding: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;

  margin-top: 10px;
  margin-left: 10px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: 300ms;
}

.toggle_button:hover {
  background-color: rgb(255, 0, 106);
  /* border: 1px solid rgba(76, 0, 255, 0.39); */
  color: rgb(255, 255, 255);
}

.quiz_button { 
  background-color: rgb(37, 37, 40);
  font-size: 50px;
  /* make the text bold */
  font-weight: bold;
  padding-left: 7rem;
  padding-right: 7rem;
}
.camera_settings {
  float: right;
}

.content {
  text-align: center;
  color: rgb(172, 172, 172);
  font-size: 1.3vw;
  padding-left: 4vw;
  padding-right: 4vw;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.content h1 {
  color: rgb(197, 201, 212);

  font-size: 4vw;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.322);
  text-decoration-thickness: 0.2rem;
}

.ruleimage {
  margin: 3rem;
  filter: contrast(60%) grayscale(30%);
}

.previewimage {
  filter: brightness(80%);
}

footer {
  width: 100%;
  background-color: rgb(22, 22, 22);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 1rem;
}

.corner {
  align-self: right;
  filter: invert(60%);
}

.corner_left {
  margin-right: calc(50vw - 140px);
}

.corner_right {
  margin-left: calc(50vw - 140px);
  transform: rotateY(180deg);
}

.range {
  display: inline-block;
  margin: 16px 5px 5px
}

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

input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 2px;
  border: none;
  border-radius: 3px
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 12px;
  width: 12px;
  border-radius: 510%;
  background: #141414;
  border: 2px solid #515151;
  margin-top: -5px;
  cursor: pointer
}

.focused::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.15)
}

.clicked::-webkit-slider-thumb {
  transform: scale(2.3);
  -webkit-transform: scale(2.3);

}

.disabled::-webkit-slider-thumb {
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
  box-shadow: 0 0 0 3px #141414;
  background: #515151 !important;
  border-color: #515151 !important
}

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

.rangeM input[type=range].disabled::-webkit-slider-runnable-track {
  background: #515151 !important
}

.rangeM input[type=range]::-webkit-slider-thumb {
  background: #3f51b5;
  border-color: #3f51b5
}

.range:hover input[type=range]:before {
  color: white;
  content: '50';
  position: absolute;
  font-family: Roboto Slab;
  top: -49px;
  background: #3f51b5;
  padding: 8px 0 3px;
  font-size: 1rem;
  width: 30px;
  text-align: center;
  border-radius: 100% 100% 0 0
}

.range:hover input[type=range]:after {
  content: '';
  position: absolute;
  top: -19px;
  left: 50px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 8px solid #3f51b5;
  font-family: Roboto Slab;
}

.slider_text {
  /* font-size: 1.1rem; */
  color: rgb(204, 204, 204)
}

.toggle_settings {
  font-size: 1vw;
}