html, body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-family: 'Special Elite', cursive, Helvetica Neue, Helvetica, Arial, sans-serif;
  background: radial-gradient(transparent, white), #dbe2ef;
}

h1 {
  text-align: center;
  font-family: 'Mystery Quest', cursive;
  font-weight: normal;
  font-size: 10vh;
}

p {
  margin-bottom: 10vh;
  text-align: center;
  font-size: 2.5vh;
}

button {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  color: white;
  outline:none;
}

input {
  border: 0;
  background-color: #dbe2ef;
  border: 1px solid #112d4e;
  font: inherit;
  color: #112d4e;
  outline:none;
}

#content {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transition: top 5000ms;
}

.textInput {
  background-color: transparent;
  width: 85vh;
  height: 12vh;
  text-align: center;
  font-family: 'Mystery Quest', cursive;
  font-size: 9vh;
  text-transform: lowercase;
  border-radius: 10vh;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.section {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 1s;
}

.section.ghost {
  opacity: 0;
  transition: opacity 1s;
}

.text {
  color: #3f72af;
  opacity: 1;
  transition: opacity 1s;
  text-transform: lowercase;
}

.text.hide {
  opacity: 0;
  transition: opacity 1s;
}

.buttons {
  opacity: 0;
  transition: opacity 1s;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.buttons.show {
  opacity: 1;
  transition: opacity 1s;
}

.buttons img {
  max-height: 300px;
  height: 30vw;
}

.buttons>* {
  flex-grow: 1;
  flex-shrink: 1;
}

.downButton {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  bottom: 15vh;
}

.downButton img {
  height: 10vh;
}

.downButton.hide {
  display: none;
}

.bigButton {
  height: 10vh;
  width: 15vh;
  margin: 3vh;
  border-radius: 1vh;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(0, 0, 0, 0);
}

.bigButton:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.endButton {
  font-family: 'Special Elite', cursive, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 5vh;
  height: 10vh;
  width: 20vh;
  border-radius: 4vh;
  margin: 3vh;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #112d4e;
}

#lostCover, #loadCover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: none;
  pointer-events: none;
  transition: opacity 1s;
  background-color: white;
  color: white;
  text-decoration: none;
}

#lostCover.show, #loadCover.show {
  transition: opacity 1s;
  pointer-events: initial;
  opacity: 1;
}

#lostCover>.title {
  font-size: 30pt;
}

#lostCover>.subtitle {
  font-size: 16pt;
  font-style: italic;
}

.blink {
  animation: blink 2s infinite;
  font-size: 3vh;
}

@keyframes blink {
    0%   {opacity: 0}
    40%  {opacity: 1}
    100% {opacity: 0}
}