@font-face{
  font-family: American-Typewriter-Regular;
  src: url("/Fonts/American-Typewriter-Regular.ttf") format("truetype");
}
body {
  font-family: American-Typewriter-Regular;
  background-color: #B23B54;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  height: 100svh;
}
.unixBlueBox{
  background: linear-gradient(to bottom, #4A8EBD 70%, #4C7795 30%);
  width: 16vw;
  height: 16vh;
  color: white;
  text-align: center;
  border-radius: 10px;
}

.unixGridContainer{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-content: center;
    padding-top: 1%;
    gap: 0.5vw;
    width: 90%;
    align-items: center;
}


.mainContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  flex-wrap: wrap;
  /* background-color: #B23B54; */
  background-image: url("/Images/background2.png");
  background-position: center;
  background-size: cover;
}



.line{
  width: 70%;
  height: 1px;
  background-color: white;
}

.letter{
  visibility: hidden;
}

.letterGroupContainer{
   display: flex;
}

.letterContainer{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 4.9svh;
  line-height: 4svh;
  font-size: 3.5svh;
}

.slash{
  font-size: 5svh;
  margin-bottom: 1%;
}




.correctAnswer{
  color: #34FF01 !important;
}


.titleBar{
  width: 100%;
  font-size: 2vw;
  border-bottom: 2px solid black;
  color: black;
  background-color: white;
  padding-left: 1%;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

#draggable{
  width: 64vw;
  position: absolute;
  top:545vh;
  border: 2px solid black;
  border-radius: 10px;
}

#answerSlide{
  position: absolute;
  bottom: 0;
  width: 85%;
      padding-left: 2%;
    padding-right: 2%;
  height: 10%;
  background-color: black;
  border: 1px solid #34FF01;
  border-radius: 50px;
  left:50%;
  transform: translateX(-50%);
}

#answerContainer{
  height: 100%;
  width: 100%;
  color: white;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}


.ios-fullscreen-active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: #ffffff; /* Change color as needed */
  overflow-y: auto;
}
body.ios-lock {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

.inputGridContainer{
    width: 109svh;
    height: 72svh;
    position: absolute;
    top: 14%;
    left: 16.5%;
}

.inputContainer{
  position: relative;
  width: 100%;
  height: 100%;
}

.inputBox{
    background: transparent;
    border: 0;
    width: 10%;
    height: 11%;
    position: absolute;
    color: white;
    text-align: center;
    font-size: 0.8rem;
    text-transform: uppercase;
    /* background-color: black;
    border: 1px solid #34FF01;
    border-radius: 3px; */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  .inputBox:focus{
    outline: none;
    border: 0;
    font-size: 1rem;
  }

#nine{
    left: 17.4%;
    top: 10.5%;
}

#twelve{
    top: 10.5%;
    left: 44.4%;
}

#fifteen{
    top: 10.5%;
    left: 71.4%;
}

#one{
    top: 25%;
    left: 3%;
}

#two{
  left: 30.5%;
  top: 25%;
}

#three{
  left: 58.3%;
  top: 25%;
}

#four{
  left: 85%;
  top: 25%;
}

#ten{
  top: 44%;
  left: 17%;
}

#thirteen{
  top: 44%;
  left: 44.5%;
}

#sixteen{
  top: 44%;
  left: 71.5%;
}

#five{
  top: 59.5%;
  left: 2.9%;
}

#six{
  top: 59.5%;
  left: 30.5%;
}

#seven{
  top: 59.5%;
  left: 58.5%;
}

#eight{
  top: 59.5%;
  left: 85.2%;
}

#eleven{
  top: 77.3%;
  left: 17.2%;
}

#fourteen{
  top: 77.3%;
  left: 44.2%;
}

#seventeen{
  top: 77.3%;
  left: 71.7%;
}

#arrow{
  width: 100%;
  background-color:white;
  display: flex;
  justify-content: center;
}

#exitFullscreenContainer{
    display:none;
    position: absolute;
    top: 3%;
    right: 3%;
    width: 7vw;
    background-color: #914B4D;
    border-radius: 50px;
}

#exitFullscreen{
  width: 90%;
  height: 90%;
  margin: auto;
}

#computerBackground{
  height: 100%;
  /* top:-5%;
  transform: scale(1.2); */
}

.computer{
    position: relative;
    height: 100%;

  }


.slideDownAnimation {
  animation: slideDown 1s ease-in-out forwards;
}

.slideUpAnimation {
  animation: slideUp 1s ease-in-out forwards;
}

@keyframes slideDown {
  0% {
      transform: translatey(-74%);
  }
  100% {
      transform: translatey(0%);
  }
}

@keyframes slideUp {
  0% {
      transform: translatey(0%);
  }
  100% {
      transform: translatey(-74%);
  }
}

.keyboard{
    display: none;
  }

#rotateWarning{
  display:none;
}
@media screen and (orientation: portrait){
  #rotateWarning{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5vw;
    color: white;
    width: 100vw;
    height: 100vh;
    background-color:#B23B54;
    z-index: 99999999;
    position: fixed;
  }

  #computer{
    display: none;
  }
}



@media screen and (min-width: 918px){
  .computer{
    position: relative;
    width: 90%;
    height: unset;
    max-width: 1269px;
    z-index: 1;
  }

  #computerBackground{
    height: unset;
    width:100%;
    
  }

  .inputGridContainer{
      max-width: 844px;
      max-height: 563px;
      position: absolute;
      top: 14%;
      left: 16.8%;
      width: 60svw;
      height: 40svw;
  }

  .inputBox{
    font-size: 1.8vw;
  }

  .inputBox:focus{
    font-size: 1.8vw;
  }

  .slash{
    font-size: clamp(20px, 3svw, 30px);
  }

  .letterContainer{
    width: 2svw;
    max-width: 28px;
    line-height: clamp(20px, 2svw, 30px);
    font-size: clamp(20px, 2svw, 30px);
  }

  .keyboard{
    display: block;
    position: absolute;
    max-width: 1600px;
    width: 117vw;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}