html,
body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Sriracha', cursive;
  font-size: 2.5vh;
}

a,
a:visited,
a:active {
  color: inherit;
  letter-spacing: 0.2ch;
}
.warn a:hover {
  color: #6c0;
}

.warn-outer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 999;
}
.warn {
  color: chartreuse;
  font-weight: bolder;
  font-size: 3vw;
  margin: 1em;
  background-color: crimson;
}
.warn-inner {
  position: relative;
  padding: 1em;
}
.close {
  position: absolute;
  top: 0.7ch;
  right: 0.7ch;
  line-height: 0.8em;
  font-weight: bolder;
  transition: color 0.15s ease-out;
  color: #6c0;
}

.close:hover {
  color: black;
  cursor: pointer;
}

.sheet {
  position: absolute;
  top: 0;
  background-color: white;
  width: 95%;
  max-width: 40vh;
  height: 69vh;
  margin-left: 0.5vw;
  left: 50%;
  margin-left: -22.5vh;
  padding: 2vh 2vh;
  border: solid 0.3vh hsla(0, 0%, 85%, 0.467);
  z-index: 1;
}

#container {
  position: relative;
  width: 95%;
  max-width: 50vh;
  height: 75vh;
  margin-right: auto;
  margin-left: auto;
}

#content {
  width: 97%;
  max-width: 60vh;
  height: 97vh;
  background-color: lightslategray;
  color: black;
  margin: 1vh auto;
  border: solid 0.5vh;
}
.topbar {
  width: 100%;
  height: 10%;
  background-color: #fff;
}

.latch {
  background-color: black;
  position: relative;
  top: 2%;
  left: 30%;
  width: 40%;
  height: 4%;
  z-index: 2;
}

.logo {
  position: relative;
  background-color: crimson;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
}

.leftarrow {
  position: relative;
  color: white;
  bottom: 2%;
  left: 0;
  font-size: 7vh;
  margin-bottom: 0;
  max-width: 10%;
  cursor: pointer;
}

h1 {
  margin-left: 23%;
  margin-top: -14%;
  margin-bottom: auto;
  font-size: 4.8vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
}
h2 {
  margin: 0;
  margin-bottom: 0.5em;
  font-size: 4vh;
  text-align: center;
}

p {
  margin: 0;
  margin-bottom: 1.5em;
}

.option {
  width: 10vw;
  height: 10vw;
  max-width: 20vh;
  max-height: 20vh;
  border: solid black 0.5vh;
}

.check path {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 20;
  stroke-width: 20%;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw 1s linear forwards;
}

svg {
  overflow: visible;
  position: relative;
  bottom: 50%;
  left: -20%;
  width: 5vh;
  height: 6vh;
}

@keyframes draw {
  from {
    stroke-linecap: round;
  }
  to {
    stroke-linecap: round;
    stroke-dashoffset: 0;
  }
}

.checkbox {
  margin: 1vh 1vh;
  border: 0.4vh solid black;
  width: 5vh;
  height: 5vh;
  float: left;
}
.checkbox:hover {
  cursor: pointer;
}

.check-desc {
  margin: 1.4vh 1vh;
  height: 5vh;
  line-height: 5vh;
  float: left;
}

/* SRC: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
  display: block;
  border: 0;
  margin: 0 auto;
  border-bottom: dotted;
  text-align: center;
  font-family: 'Sriracha', cursive;
  width: 18vw;
  font-size: 3vh;
}

.sheet > img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

#timer {
  position: relative;
  top: 20vh;
  text-align: center;
  min-width: 25vh;
  width: 12%;
  height: 8%;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  border: 0.3vh solid black;
  transition: linear 2s;
  transition-property: top;
}

.thrown-in {
  top: -10.5vh !important;
}

#counter {
  font-size: 80%;
  height: 3vh;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#timer > button {
  border-radius: 10%;
  width: calc(4vh * 1.4);
  height: 4vh;
  font-size: 50%;
  float: left;
  font-weight: 600;
}

#start {
  position: relative;
  left: 100%;
  margin-left: -90%;
  background-color: #5cb85c;
  border-color: #4cae4c;
  color: white;
}

#stop {
  position: relative;
  left: 100%;
  margin-left: -60%;
  background-color: #d9534f;
  border-color: #d43f3a;
  color: white;
}

#reset {
  position: relative;
  left: 100%;
  margin-left: -30%;
}

@media (orientation: portrait) {
  input[type='number'] {
    width: 50vw;
    font-size: 6vw;
  }
  #content {
    font-size: 5vw;
  }
}

@media (max-aspect-ratio: 350/740) {
  .sheet {
    width: 75vw;
    left: 50%;
    margin-left: -43vw;
    height: 67vh;
  }
  #content {
    width: 96vw;
    height: 97vh;
    font-size: 5vw;
  }

  #container {
    width: 75vw;
  }
  h1 {
    font-size: 10vw;
  }
  h2 {
    font-size: 7vw;
  }
  h3 {
    font-size: 4vw;
  }
  p {
    font-size: 5vw;
  }
}