body {
  /* Initially hide the body content to prevent a flash of unstyled content */
  opacity: 0;
  /* Apply the animation */
  animation-name: fadeInAnimation;
  animation-duration: 1.5s;
  /* Retain the end state of the animation (opacity: 1) */
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  /* Start with full transparency */
  0% {
    opacity: 0;
  }
  /* Still full transparency */
  50% {
    opacity: 0;
  }
  /* End with full opacity */
  100% {
    opacity: 1;
  }
}

body.darkmode {
  /* Initially hide the body content to prevent a flash of unstyled content */
  opacity: 0;
  /* Apply the animation */
  animation-name: fadeInAnimationDark;
  animation-duration: 1s;
  /* Retain the end state of the animation (opacity: 1) */
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimationDark {
  /* Start with full transparency */
  0% {
    opacity: 0;
    background-color: #0a0a0a;
  }
  /* Still full transparency */
  50% {
    opacity: 0;
    background-color: #0a0a0a;
  }
  /* End with full opacity */
  100% {
    opacity: 1;
  }
}