body {
  margin: 0;
  background-color:#000000;
}
html,
body {
  height: 19200px;
}
canvas {
  display: block;
  position:fixed;
  top:0px;
  left:0px;
}



.email{
  color:#d9d9d9;
  position:fixed;
  right:20px;
  bottom:20px;
  font-size:20px;
  font-family: "Poppins", sans-serif;
  z-index:10;
  opacity:1;
  transition:color 0.5s;
}

.email a{
  text-decoration: none;
  color:#ffffff;
}

.email:hover{
  opacity:1;
}

@media screen and (max-width: 750px) {

  html,
  body {
    height: 7000px;
  }

  .email{
    bottom: 20px;
    right: 20px;
    font-size: 14px;
  }
}

/* Bouncing scroll arrow */
.scroll-arrow {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0.7;
  transition: opacity 0.5s ease-out;
  animation: bounce 2s infinite;
  cursor: pointer;
}

.scroll-arrow.fade-out {
  opacity: 0;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

.scroll-arrow svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.scroll-arrow:hover {
  opacity: 1;
}