/* give Anders some love too! we made this together. https://codepen.io/andersschmidt :-) */
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  background-color: #f3f3f3;
  font-family: "Press Start 2P";
}

#game {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  background-color: white;
}

ui-layer.ui-layer {
  user-select: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: "Press Start 2P", cursive;
}

.c-lung-capacity__label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}
.c-lung-capacity__bars {
  display: flex;
  margin-left: 2px;
}
.c-lung-capacity__bar {
  display: inline-block;
  width: 4px;
  height: 10px;
  background-color: orange;
  box-shadow: 2px 2px 0 0 #333333;
  transition: opacity 140ms ease-in-out;
  opacity: 1;
  will-change: opacity;
}
.c-lung-capacity__bar:not(:last-child) {
  margin-right: 4px;
}

.c-navigator {
  width: 102px;
  height: 102px;
  background-color: rgba(0, 0, 0, 0.15);
  position: absolute;
  bottom: 7.5%;
  right: 7.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-navigator .player {
  display: inline-block;
  width: 4px;
  height: 4px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  position: absolute;
}
.c-navigator .dot {
  width: 4px;
  height: 4px;
  background-color: orange;
  position: absolute;
  top: 0;
  left: 0;
}

.c-score {
  top: 7%;
  left: 7%;
  position: absolute;
}
.c-score label {
  font-size: 12px;
  color: black;
  letter-spacing: -0.05em;
}

.c-dialog {
  position: absolute;
  padding: 20px;
  left: 20%;
  right: 20%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
  display: none;
  text-align: center;
  border: 2px solid rgba(0, 0, 0, 0.05);
  font-size: 13px;
  line-height: 25px;
}

.c-instructions {
  width: 315px;
  height: 300px;
  background-color: #cccaaa;
  box-shadow: 4px 4px 0 0 #aaaaaa;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
  transform: translate(100%, 100%) rotate(45deg);
  opacity: 0;
  will-change: opacity, transform;
}
.c-instructions.in {
  transform: translate(0%, -50%) rotate(0deg);
  opacity: 1;
}
.c-instructions__headline {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  max-width: 75%;
  margin: 0 auto;
  text-align: center;
  font-size: 13px;
  background-color: #cccaaa;
  padding: 5px;
  line-height: 20px;
}
.c-instructions__content {
  border: 4px solid #aaaaaa;
  height: 100%;
  font-size: 9px;
}
.c-instructions__content .c-instructions__checklists {
  padding: 50px 15px 0 15px;
}
.c-instructions__content .c-instructions__checklists section + section {
  margin-top: 25px;
}
.c-instructions__content .c-instructions__checklists ul li {
  line-height: 14px;
}

.uppercase {
  text-transform: uppercase;
}