body {
  font-family: Arial, sans-serif;
  margin: 0;
  overflow-x: hidden;
  background: #0a0a0a;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

h1, h4, img {
  position: relative;
  z-index: 1;
  color: white; /* if your h1 needs contrast against the dark bg */
}


.button {
  background-color: #4a90d9;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

img {
    user-select: none;
    display: block;
    -webkit-user-drag: none;
}

.particle-container{
  position: relative;

}

#toad {
    position: relative;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 20px;      /* adjust to taste */
    height: 20px;
    pointer-events: none;
    animation: float 1s ease-out forwards;
}

@keyframes float {
    to {
        transform: translate(var(--x), var(--y));
        opacity: 0;
    }
}