/* Basic fade-in animation for the wrapper */
.wrapper {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

/* Corrected fade-in animation for the canvas */
#dotCanvas {
  opacity: 0;
  animation: fadeInCanvas 2s ease-in-out forwards;
  animation-delay: 1s; /* Start after the wrapper has faded in */
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeInCanvas {
  to {
    opacity: 1;
  }
}

/* Placeholder styles */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #a0aec0;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #a0aec0;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #a0aec0;
}