@import url("https://fonts.googleapis.com/css2?family=Bangers&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap");

body {
  scrollbar-width: none;
  font-family: "Patrick Hand", cursive;
}

/* index */
.spider-title {
  font-family: "Bangers", cursive;
  color: #f6d8d5;
  letter-spacing: 2px;
}

.spider-title::before {
  content: attr(data-text);
  position: absolute;
  top: 0.04em;
  left: 0.04em;
  color: #313f97;
  z-index: -1;
  width: 100%;
}

.spider-title::after {
  content: attr(data-text);
  position: absolute;
  left: -0.04em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #ec2225;
}

.spiderman-img {
  width: 300px;
  animation: animar 2s infinite alternate;
}

.shadow {
  animation: sombra 2s infinite alternate;
}

@keyframes animar {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0px);
  }
}

@keyframes sombra {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }
  100% {
    transform: scale(0.6);
    opacity: 0.1;
  }
}

/* contact */
button:hover {
  background-color: dimgrey;
}