html, body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  width: 100dvw;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('imgs/background.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}

.error {
  display: none;
}

p {
  margin: 0;
}

.container {
  opacity: 0;
}

.fade-in {
  animation: fadeInOpacity 2s ease-in 0s forwards;
}

.fade-out {
  animation: fadeOutOpacity 0.5s ease-in 0s forwards;
}

@keyframes fadeInOpacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@keyframes fadeOutOpacity {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}