@font-face {
  font-family: "CaveatBrush";
  src: url("CaveatBrush-Regular.ttf");
}

body, html, #main-container {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

body {
  background-color: #604060;
  font-family: "CaveatBrush";
  touch-action: none;
}

#hud, #overlay {
  position: absolute;
  color: white;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#version-info {
  position: absolute;
  width: 100%;
  bottom: 0px;
  pointer-events: none;
  display: none;
}
#hud.startup #version-info {
  display: block;
}

#options {
  position: absolute;
  width: 155px;
  padding: 0px;
  right: -160px;
  top: 10px;
  text-align: right;
  transition: right 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  pointer-events: none;
}
#hud.startup #options, #hud.paused #options {
  right: 10px;
  transition: right 600ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  pointer-events: all;
}

.score {
  text-align: center;
  font-size: 1.5em;
  color: white;
  text-shadow: 0 0 5px black;
}
#level-info {
  position: absolute;
  width: 100%;
  pointer-events: none;
}
#narration.visible p {
  animation: .8s cubic-bezier(0.37, 0.18, 0.4, 1.06) 1.1s normal both running narration-fly-in;
}
#popup.visible .message p {
  animation: .5s cubic-bezier(0.68, -0.55, 0.27, 1.55) .1s normal both running text-fly-in;
}
#popup.visible .message p:nth-child(2), #narration.visible p:nth-child(2) {
  animation-delay: 2.0s;
}
#popup.visible .message p:nth-child(3), #narration.visible p:nth-child(3) {
  animation-delay: 3.0s;
}
#popup.visible .message p:nth-child(4), #narration.visible p:nth-child(4) {
  animation-delay: 4.0s;
}
#popup.visible .message p:nth-child(5), #narration.visible p:nth-child(5) {
  animation-delay: 5.0s;
}
#popup.visible .message p:nth-child(6), #narration.visible p:nth-child(6) {
  animation-delay: 6.0s;
}
@keyframes text-fly-in {
  0% { transform: translateX(50%); opacity: 0 }
  100% { transform: translateX(0); opacity: 1 }
}
@keyframes narration-fly-in {
  0% { transform: translateY(100vh); opacity: .3 }
  100% { transform: translateY(0); opacity: 1 }
}

#overlay {
  pointer-events: none;
}

#popup, #level-list {
  font-size: 2.5rem;
  transform: translateX(-50%) translateY(-10%) scale(0.7);
}
#narration {
  position: absolute;
  top: calc(0.5rem + 20vh);
  left: 50%;
  font-size: 2rem;
  transform: translateX(-40%) translateY(100vh) scale(0.7);
  max-width: 70%;
  max-height: 90%;
}
#narration p {
  margin-bottom: .1rem;
}
#popup, #level-list {
  position: absolute;
  left: 50%;
  top: 50%;
  max-height: 90%;
}
#popup, #level-list, #narration, #hint {
  color: white;
  text-shadow: 0 0 5px black;
  transition: transform 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 800ms;
  display: block;
  opacity: 0;
  text-align: center;
}
#popup, #narration, #hint {
  pointer-events: none;
}
#hint {
  position: absolute;
  bottom: .1rem;
  left: 50%;
  transform: translateX(-50%) translateY(20rem) scale(0.7);
}
#level-list {
  display: none;
  top: 50%;
  width: 90%;
  overflow-y: auto;
  scroll-margin: 0;
}
#level-list::-webkit-scrollbar {
  display: none;
}

#hud.startup #level-list {
  padding-top: calc(55vh);
}

#popup.visible, #hud.startup #level-list, #hud.levelscreen #level-list {
  transform: translateX(-50%) translateY(-50%) scale(1);
  opacity: 1;
  display: block;
  width: 90%;
  transition: transform 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 200ms;
}
#narration.visible {
  transform: translateX(-50%) translateY(1rem) scale(1);
  opacity: 1;
  display: block;
  width: 90%;
  transition: transform 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 1s, opacity 200ms 1s;
}
#hint.visible {
  transform: translateX(-50%) translateY(0rem) scale(1);
  opacity: 1;
  display: block;
  width: 90%;
  transition: transform 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 1s, opacity 200ms 1s;
}
#narration.visible .credits a {
  pointer-events: all;
}

#popup .level-name {
  margin-top: calc(25vh);
}

#hud.narration #popup {
  transform: translateX(-50%) translateY(10%) scale(1);
  transition: transform 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 200ms;
}

#level-list .level-sel {
  width: 130px;
  height: 130px;
  margin: 5px;
  background-color: rgba(130, 120, 140, 0.8);
  border-radius: .4rem;
  /*box-shadow: 0 0 5px black;*/
}
#level-list .level-sel img {
  display: block;
  margin: auto;
  image-rendering: pixelated;
}
#level-list .level-sel .score {
  opacity: 0.6;
  padding-left: 5px;
  font-size: 14px;
  display: block;
}
#level-list .level-sel.score-updated .score {
  color: #ed4;
  opacity: 0.8;
}
#level-list .level-sel.current-level {
  border: 3px solid white;
}
#level-list .level-sel:hover, #level-list .level-sel:focus {
  transform: scale(1.05);
  transition: transform 300ms;
}
a {
  color: #dd33bb;
}
a:hover {
  color: #aa2299;
  text-decoration: none;
}
#level-list .level-sel.social-button {
  margin-left: 20px;
  width: 180px;
  background-color: rgba(60, 60, 60, 0.8);
}

.scene-fadeout {
  background: rgb(40,10,40);
  opacity: 1.0;
  transition: opacity 0.6s;
}
.scene-fadein {
  background: rgb(40,10,40);
  transition: opacity 0.6s;
  opacity: 0.0;
}
#hud.narration #overlay, #hud.lost #overlay {
  background: radial-gradient(circle, rgba(0,212,255,0) 0%, rgba(114,54,124,0) 28%, rgba(2,0,36,1) 100%);
  opacity: 0.8;
}

#hud.startup #overlay, #hud.paused #overlay, #hud.levelscreen #overlay {
  background: radial-gradient(circle, rgba(0,212,255,0) 0%, rgba(114,54,124,0) 28%, rgba(2,0,36,1) 100%);
  opacity: 0.2;
}

@media screen and (max-height: 500px) {
  #narration.visible {
    transform: translateX(-50%) translateY(-2rem) scale(.85);
  }
}