.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

* {
  font-family: 'Rubik', sans-serif;
}

body {
  background-color: #f2f7ff;
}

.fade-enabled {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

.fade-light-dark {
  animation-name: fade-light-dark;
}
.fade-dark-light {
  animation-name: fade-dark-light;
}

@keyframes fade-light-dark {
  from {
    color: #333;
    background-color: #f2f7ff;
  }

  to {
    color: white;
    background-color: #0f274d;
  }
}

@keyframes fade-dark-light {
  from {
    color: white;
    background-color: #0f274d;
  }

  to {
    color: #333;
    background-color: #f2f7ff;
  }
}

.title {
  font-family: 'Arvo', serif;
  color: #333;
}

.description {
  width: 75vw;
  line-height: 1.3;
  color: #6e7681;
}

@media (min-width: 600px) {
  .description {
    width: 400px;
  }
}

a {
  color: inherit;
}

.nap-button {
  display: block;
  margin: 30px auto 0;

  width: 200px;
  height: 200px;
  border-radius: 100%;

  color: white;
  font-size: 40px;
  outline: none;

  background-color: #65acd7;
  border: 0;
  filter: drop-shadow(0px 5px 5px #6e7681);
  
  user-select: none;
}

.nap-button:active {
  background-color: #487a99;
}