style.css

html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body{
  background-color: rgb(46, 46, 46);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.question{
  background-image: linear-gradient(white, white, rgba(255, 255, 255, .9), transparent);
  /* filter: drop-shadow(-2px -2px #FF000080) drop-shadow(2px 2px #FFFF0080) drop-shadow(2px -2px #0000FF80) drop-shadow(-2px 2px #00FF0080); */
  color: transparent;
  background-clip: text;
  transition: background-color 1s ease;
}

.letterBox{
  width: max(3vw, 3vh);
  height: max(3vw, 3vh);
  font-size: calc(max(3vw, 3vh) * .75);
  text-align: center;

  background-color: rgba(0, 0, 0, .4);
  margin: 4px;
  margin-bottom: 16px;

  border-radius: 14px;
  
  box-sizing: border-box;
  /* border: 1px solid rgb(100, 100, 100); */

  color: rgb(226, 226, 226);

  border: none;
  box-shadow: 6px 8px 0 -3px #000000;

  transition: background-color .2s, width .2s, height .2s;
}
.letterBox:hover{
  width: max(3.2vw, 3.2vh);
  height: max(3.2vw, 3.2vh);
  background-color: rgb(0, 0, 0);
}

.topBarDrawer{
  position: absolute;
  top: 0;
  left: calc(40% - 3vh);
  width: 2vh;
  height: 3vh;

  border: none;
  background-image: url("dropdownArrow.png");
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;  

  transition: transform .3s ease;

  transform: rotate(90deg);
}

.topBar{
  background-color: rgb(40, 40, 40);
  margin: auto;
  margin-top: 0px;
  
  padding-top: 3px;

  width: 20%;
  height: 6%;
  
  color: rgb(255, 255, 255);

  transition: height .3s ease;

  overflow: hidden;
}

.topBarText{
  margin: 0px;
}

.packSelector{
  display: flex;
  flex-direction: column;
  place-content: center;
  /* width: 80%; */
}
.packCheckbox{
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 6px solid black;
  width: 2em;
  height: 2em;
  transform: translateY(-.85em);
  display: grid;
  place-content: center;
  border-radius: 1em;
  margin: 10px;
}
.packCheckbox::before {
  content: "";
  width: 1.6em;
  height: 1.6em;
  border-radius: .8em;
  transform: scale(0);
  background-color: antiquewhite;
  border: 2px solid black;
  border-width: 900px;

  transition: .2s transform ease-in-out, .2s border-width;
}
.packCheckbox:checked::before {
  transform: scale(1);
  border-width: 6px;
}
.packLabel{
  font-family: system-ui;
  color: white;
  display: grid;
  grid-template-columns: 2.5em auto;
}

.titleBar{
  background-color: rgb(0, 0, 0);
  width: 100%;
  height: 13%;
  top: 0px;

  align-items: center;
}
.title{
  background-image: linear-gradient(90deg, red, blue, red, blue, red, blue, red, blue, red, blue);
  /* filter: drop-shadow(-2px -2px red) drop-shadow(2px 2px green) drop-shadow(2px -2px blue) drop-shadow(-2px 2px yellow); */
  color: transparent;
  background-clip: text;

  /* mix-blend-mode:exclusion; */

  font-size: 100px;

  padding-top: 0;
  margin-top: 0;
}

.spacingBox{
  margin-left: max(.75vw, .75vh);
  margin-right: max(.75vw, .75vh);
}

h1{
  font-size: 50px;
  text-align: center;
}
h2{
  text-align: center;
}
h3{
  font-size: 25px;
}
h4{
  font-size: 25px;
  text-align: center;
}

.colorBox{
  width: min(70vw, 70vh); 
  height: min(30vw, 30vh);
  margin: auto;
  transition: background-color .5s ease, width .5s ease;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
.colorBox:hover{
  width: min(100vw, 100vh); 
}
.colorBoxBorder{
  border: min(2vh, 2vw), dashed, rgba(255, 255, 255, 1);

  box-shadow:
  -5px -5px 0px -3px black, /* Top-left */
  5px -5px 0px -3px black,  /* Top-right */
  -5px 5px 0px -3px black,  /* Bottom-left */
  5px 5px 0px -3px black;   /* Bottom-right */

  mix-blend-mode: difference;

  width: 100%;
  height: 100%;
  z-index: 0;
  
  box-sizing: border-box;

  transition: border-width .5s ease;
}
.colorBoxBorder:hover{
  border-width: min(3vh, 3vw);
}

.questionBox{
  padding-bottom: 1px;
  background-color: rgba(0, 0, 0, .3);
  color: white;
}

.wordBox{
  width: 1%;
  display: flex;
  height: max(3vw, 3vh);
  margin: auto;
  justify-content: center;
  font-size: 0px;
}

.answerBox{
  width: 70%;
  align-items: center;
  margin: auto;
  margin-top: 3vh;
  display: flex;
  flex-direction: column;
  justify-content: center;

  row-gap: 8px;

  /* border: 3px solid purple; */
}
.button{
  padding: 0px;
  margin: 0px;
  width: 48%;
  height: 100%; 

  border: 2px solid transparent;
  background-color: #00000030;
  border-right: 2px solid whitesmoke;
  border-bottom: 2px solid whitesmoke;
  border-top: 2px solid whitesmoke;
  border-left: 2px solid whitesmoke;
  margin-right: 5px;

  color: white;
  font-size: 25px;

  border-radius: 3px;

  transition: background-color .3s, border-width .3s;
}
.button:hover{
  background-color: black;
  border-width: 10px;
  border-bottom: 2px solid whitesmoke;
  border-top: 2px solid whitesmoke;
}
.buttonBox{
  font-size: 0px;
  width: 90%;
  height: 10vh;
  margin: auto;
  padding-top: 1%;
}

.goHome{
  padding: 0px;
  width: 48%;
  height: 20%; 
  margin-left: 26%;

  background-color: #00000030;
  border: 2px solid whitesmoke;

  color: white;
  font-size: 25px;

  transition: background-color .3s, border-width .3s;
  
  overflow: hidden;
}
.goHome:hover{
  background-color: black;
  border-width:10px;
  border-bottom: 2px solid whitesmoke;
  border-top: 2px solid whitesmoke;
  border-color: palegoldenrod;
}

br {
  content: '\A';
  display: contents;
  white-space: pre;
}

.main{
  width: 100%;
  height: 100%;
  margin: auto;

  align-items: center;
  grid-template-columns: 10px, 10px, 10px;
  grid-template-rows: 10px, 10px, 10px;

  box-sizing: border-box;
}
.done{
  width: 70%;
  height: 85%;
  margin: auto;
}
.home{
  width: 100%;
  height: 100%;

  background-color: rgb(40, 40, 40);
}

.segmentTitle{
  color: white;
  margin: 0;
}
a{
  width: 100%;
  height: 100%;
}
.qNum{
  width: 8vw;
  height: 80%;
  font-size: 30px;
  text-align: center;
}
.qNumLabel{
  width: 41%;
  height: 6%;
  color: rgb(240, 240, 240);
  font-size: 45px;
  margin: 14px;
}
.startBut{
  width: 50%;
  height: 10%;
  border: 2px solid rgba(0, 0, 0, 0.5);
  background-color: rgb(35, 138, 35);
  color: white;
  font-size: 25px;

  margin-left: 25%;

  transition: background-color .3s, border-width .3s;
}
.startBut:hover{
  background-color: rgb(50, 205, 50);
  border-width: 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
  border-top: 2px solid rgba(0, 0, 0, 0.5);
}

.settings{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.midBar{
  margin: 0px;
  padding: 0px;
  background-color: rgba(0, 0, 0, .3);
  width: 100%;
  height: 60%;
}

.background{
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.0);
}
.incorrect{
  color: red;
}
.incorrectSlider{
  background-color: gray;
  appearance: none;
  transition: background-color .3s;
  overflow: hidden;
  
  width: 80%;
}
.incorrectSlider:hover{
  background-color: gray;
}
.incorrectSlider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 4px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: black; /* Green background */
  cursor: pointer; /* Cursor on hover */
  box-shadow: -1003px 0 0px 1000px red;
  transition: box-shadow .3s;
  
}
.incorrectSlider::-webkit-slider-thumb:hover{
  box-shadow: -1003px 0 0px 1000px #E00;
}
.correct{
  color: lime;
}
.correctSlider{
  background-color: gray;
  appearance: none;
  transition: background-color .3s;
  overflow: hidden;
  
  width: 80%;
}
.correctSlider:hover{
  background-color: gray;
}
.correctSlider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 4px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: black; /* Green background */
  cursor: pointer; /* Cursor on hover */
  box-shadow: -1003px 0 0px 1000px green;
  transition: box-shadow .3s;
  
}
.correctSlider::-webkit-slider-thumb:hover{
  box-shadow: -1003px 0 0px 1000px lime;
}
.rectangle{
  background-color: white;
  width: 100%;
  height: 1vh;
  display: flex;
  flex-shrink: 0;
}
.summary{
  color: white;
  text-align: right;
}
.timeSummary{
  margin: auto;
  width: 70%;
  position: relative;
}
.penaltyPopup{
  background-color: rgba(0, 0, 0, .8);
  border: 3px solid black;
  color: white;
  width: 83%;
  left: 30%;
  top: 5px;
  text-align: center;
}


.popupText{
  width: 90%;
  margin: auto;
  font-size: 20px;
}
.hoverPopup{
  transition: width .3s, padding .3s, transform .3s;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
  flex: none;
}
.popupDisabled{
  transform: scale(0, 1);
  padding: 0;
}
.popupEnabled{
  transform: scale(1, 1);
}