@font-face {
  src: url('/Sora-VariableFont_wght.ttf');
  font-family: "Sora";
  font-weight: 400;
}

:root {
  --backdrop-dark: #0F172A;
  --backdrop-light: #334155;
  --accent-low: #7c9a6d;
  --accent-medium: #C26A2E;
  --accent-high: #8B3A3A;

  --text-light: #D9D9D9;
  --text-dark: #0F172A;

  --accent-light: #D1E5CE;

  --difficulty-color: var(--accent-high);
}

:root, html, body
{
  font-family: "Sora", Arial, Helvetica;
  font-size: 30px;
  font-weight: 400;  
  color: var(--text-light);
  text-align:center;
  text-wrap: balance;
  
  margin: 0;
  padding: 0;

  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
}

@keyframes slideDown {
  0% {
    transform: translateY(-2vh);
    filter: opacity(0%);
  }

  100% {
    transform: none;
  }
}

@keyframes popUp {
  0% {
    filter: opacity(0%);
    transform: translateY(2vh);
  }

  75% {
    filter: opacity(100%);
    transform: translateY(-5px);
  }
  
  100% {
    transform: none;
  }
}