body {

  background-image: url("https://cdn.viewing.nyc/assets/media/9ba0e3f8f22fe5fc87f153bf2877b324/elements/d39e46b94d80969d448fc768ba410710/ed525f87-f8b6-4d6d-965c-a05a33c4285a.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
@font-face {
  font-family: 'MyCustomFont';
  src: url('Daredevil-WpMz.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1, .custom-text {
  font-family: 'MyCustomFont', sans-serif;
}


.rain-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Keeps rain behind text content but above background */
  pointer-events: none; /* Allows users to click on links/buttons underneath */
  overflow: hidden;
}

/* Individual raindrop design */
.raindrop {
  position: absolute;
  top: -20px; /* Starts just off-screen */
  width: 1.5px;
  height: 20px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.4)); /* Semi-transparent streak */
  animation: fall linear infinite;
}

/* Keyframe movement to make rain fall downwards */
@keyframes fall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(105vh); /* Moves completely past the bottom screen */
  }
}