html {
  height:100%;
}

body {
  margin:0;
  font-family:"Noto Sans", sans-serif;
  height:100%;
  -webkit-text-size-adjust: 100%;
}

* {
  touch-action: manipulation;
}

#countdown {
  height:85%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

#soManyTitle {
  font-family:courier, serif;
  font-size:7vmin;
  opacity:0.6;
  margin:0 0 0.25em 0;
}

.mathMode {
  font-family:courier,serif;
  font-size:9vmin;
  opacity:0.6;
  margin:0 0 0.25em 0;
  letter-spacing:0.5em;
  margin-right:-0.5em;
}

#countdownNumber {
  font-family:"noto sans", sans-serif;
  font-size:14vmin;
  margin:0 0 0 0;
}

#main-game {
  height:100%;
  display:none;
  grid-template-rows: auto 1fr 5%;
}

.HUDwrapper {
  width:100%;
}

.HUD {
  margin:0 auto;
  width:90%;
}

.math-problem-grid {
  display:flex;
}

.gauge {
  background-color:#dadada;
  margin:16px 0 15px 0;
  height:30px;
  border-radius:10px;
  box-shadow:0 1px 4px 0 rgba(0,0,0,.2);
  display:flex;
  align-items:center;
}

#active-gauge {
  background-color:#1da2e6;
  height:30px;
  width:0%;
    border-radius:10px;
  transition: width 0.2s ease-out;
}

#percentageBar {
  color:#fff;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  font-size:17px;
}

.currentGameStats {
  width:92%;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 16% 1fr;
}

#score-meter {
  font-size:8vmin;
  padding-left:10px;
}

#timer-area-outside {
  text-align:right;
  font-size:8vmin;
  white-space:nowrap;
}

#timer-area {
  border-radius:15px;
  transition:background-color 0.5s;
  padding: 0 10px;
}

#home-area-outside {
  display:flex;
  align-items:center;
  justify-content:center;
}

#home-area {
  cursor:pointer;
  opacity:0.25;
  display:inline-flex;
  align-items:flex-end;
}

#home-area:hover {
  opacity:1;
}

.problem-area {
  margin:auto;
  position:relative;
}

#non-math-area {
  display:none;
  text-align:center;
}

#encouragement {
  text-align:center;
  font-size:8vmin;
  position:absolute;
  left:50%;
  top:23%;
  transform: translateX(-50%);
  z-index:2;
  opacity:0;
  color:#000;
  transition:opacity 0.75s;
  width:90vw;
}

#encouragement-words {
  background-color:#d0ebfb;
  border-radius:12px;
  padding: 4px 15px;
}

#math-problems {
  text-align:center;
  font-size:13vmin;
}

#set1, #set5 {
  transform: scale(0.65);
  opacity:0.13;
}

#set2, #set4 {
  transform: scale(0.9);
  opacity:0.26;
}

#set3 {
  transform: scale(1);
  transition: transform 0.1s;
}

#set1, #set2, #set3, #set4, #set5 {
  padding-bottom:0.08em;
}

#set1 *, #set2 *, #set3 *, #set4 *, #set5 * {
  display:inline-block;
}

.math-box {
  text-align:center;
  width:2em;
  margin:0;
  padding:1px;
  background-color:#fff;
  color:#000;
  border:1px solid #a9a9a9;
  font-size:inherit;
  font-family:inherit;
}

.math-box:focus {
  outline: none;
  border-color: #5473da;
  box-shadow: 0 0 6px #5198e0;
}

.math-box-right:focus {
  outline: none;
  border-color: #45b56d;
  box-shadow: 0 0 9px #51e07d;
}

#gameBG {
  background-color:#fafafa;
  transition: 0.2s;
}

.button-again {
    border: none;
    padding: 5% 8%;
    font-size: 7vmin;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #fff;
    background-color: #b23681;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
    transition:background-color 0.15s;
}

.button-again:hover {
  background-color:#e86198;
}

.button-again:active {
  background-color:#ef4e86;
}

#home-button {
  height:6.5vmin;
}

.congrats {
  font-size:11vmin;
  margin-top:0;
  margin-bottom:0.1em;
}

#results {
  font-size:6vmin;
  line-height:1.8;
  margin-bottom:12px;
}

#buttonsDiv {
  opacity:0;
  transition:opacity 0.4s;
}

.notransition {
  transition: none !important;
}

@media (min-width: 420px) and (min-height: 420px) {

  body {
    overflow-y:hidden;
  }

  #soManyTitle {
    font-size:5.4vmin;
  }

  .mathMode {
    font-size:6.9vmin;
  }

  #countdownNumber {
    font-size:10.8vmin;
  }

  #score-meter, #timer-area-outside, #encouragement {
    font-size:6.15vmin;
  }

  #math-problems {
    font-size:10vmin;
  }

  .congrats {
    font-size:8.5vmin;
  }

  #results {
    font-size:4.6vmin;
  }

  .button-again {
    font-size:5.4vmin;
  }

  #home-button {
    height:5vmin;
  }
}

@media (min-width: 1200px) {
  .HUD {
    width:1080px;
  }
}

@media (min-width: 1000px) and (min-height: 700px) {
  .gauge {
    margin:24px 0 15px 0;
    height:36px;
  }

  #active-gauge {
    height:36px;
  }

  #percentageBar {
    font-size:20px;
  }
}

@media (min-width: 1000px) and (min-height: 950px) {
  .gauge {
    margin:40px 0 25px 0;
    height:50px;
    border-radius:18px;
  }

  #active-gauge {
    height:50px;
    border-radius:18px;
  }

  #percentageBar {
    font-size:28px;
  }

  #encouragement-words {
    border-radius:20px;
  }
}

@media (min-width: 1000px) and (min-height: 1220px) {
  #score-meter, #timer-area-outside {
    font-size:75px;
  }

  #home-button {
    height:61px;
  }
}