@font-face {
  font-family: "Clash Display";
  src: url("Assets/ClashDisplay_Complete/ClashDisplay_Complete/Fonts/TTF/ClashDisplay-Variable.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

.textos h1,
.textos p {
  opacity: 0;
}

header nav a {
  opacity: 0;
}

h1,
.subtitle,
nav a,
#mobile-menu,
.texts,
.buuton {
  font-family: "Clash Display", sans-serif;
}

header {
  background-image: linear-gradient(to bottom, black, transparent);
}

.scroll {
  animation: move_918 1.5s linear infinite;
}

@keyframes move_918 {
  0% {
    bottom: 9px;
  }

  50% {
    bottom: 5px;
  }

  100% {
    bottom: 9px;
  }
}

.esq {
  --ang1: 0.6532950466498733deg;
  --ang2: 359.73379611968994deg;
  --ang3: 359.79896306991577deg;

  background: conic-gradient(
    from 90deg at 50% 50%,
    #101010 var(--ang1),
    #313131 var(--ang2),
    #e9e9e9 var(--ang3)
  );
}

.dir {
  --ang1: 0.6532950466498733deg;
  --ang2: 359.73379611968994deg;
  --ang3: 359.79896306991577deg;

  background: conic-gradient(
    from 90deg at 50% 50%,
    #101010 var(--ang1),
    #313131 var(--ang2),
    #e9e9e9 var(--ang3)
  );

  transform: scaleX(-1);
}

.overlay {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.401),
    transparent,
    rgba(0, 0, 0, 0.406)
  );
}
.button__icon,
.button__icon--copy {
  transform: rotate(90deg);
}

.button__icon--copy {
  position: absolute;
  transform: rotate(90deg) translate(-150%, 200%);
}

.button:hover {
  background: #000;
  transform: scale(1.05);
}

.button:hover .button__icon {
  color: #000;
}

.button:hover .button__icon:first-child {
  transition: transform 0.3s ease-in-out;
  transform: rotate(90deg) translate(150%, -150%);
}

.button:hover .button__icon--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: rotate(90deg) translate(0);
}

@keyframes text-rotation {
  to {
    rotate: 360deg;
  }
}

.mascara {
  background: radial-gradient(
    442.59% 148.33% at 50% 2.92%,
    #151515 0%,
    #888 100%
  );
}

.hands {
  filter: drop-shadow(0 8px 20px #222222);
}

.circulo {
  filter: drop-shadow(0 8px 20px #000000);
}

#svg-global {
  zoom: 1.2;
  overflow: visible;
}

@keyframes fade-particles {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(-40px);
    opacity: 0;
  }
}

#particles {
  animation: fade-particles 5s infinite alternate;
}
.particle {
  animation: floatUp linear infinite;
}

.p1 {
  animation-duration: 2.2s;
  animation-delay: 0s;
}
.p2 {
  animation-duration: 2.5s;
  animation-delay: 0.3s;
}
.p3 {
  animation-duration: 2s;
  animation-delay: 0.6s;
}
.p4 {
  animation-duration: 2.8s;
  animation-delay: 0.2s;
}
.p5 {
  animation-duration: 2.3s;
  animation-delay: 0.4s;
}
.p6 {
  animation-duration: 3s;
  animation-delay: 0.1s;
}
.p7 {
  animation-duration: 2.1s;
  animation-delay: 0.5s;
}
.p8 {
  animation-duration: 2.6s;
  animation-delay: 0.2s;
}
.p9 {
  animation-duration: 2.4s;
  animation-delay: 0.3s;
}

@keyframes bounce-lines {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

#line-v1,
#line-v2,
#node-server,
#panel-rigth,
#reflectores,
#particles {
  animation: bounce-lines 3s ease-in-out infinite alternate;
}
#line-v2 {
  animation-delay: 0.2s;
}

#node-server,
#panel-rigth,
#reflectores,
#particles {
  animation-delay: 0.4s;
}

.card {
  filter: drop-shadow(0 1px 20px #000000);
}