@import "./button.css";
@import "./button-icon.css";
@import "./header.css";
@import "./hero.css";
@import "./wrapper.css";
@import "./menu.css";
@import "./project.css";
@import "./social.css";
@import "./footer.css";
@import "./form.css";
@import "./tittle.css";
@import "./intro-projects.css";
@import "./carousel.css";

:root {
  --fontBase: "Poppins", sans-serif;
  --headline1: bold 95px/153.71px var(--fontBase);
  --headline2: bold 59px/95px var(--fontBase);
  --headline3: bold 48px/77px var(--fontBase);
  --headline4: bold 34px/55px var(--fontBase);
  --headline5: bold 24px/38px var(--fontBase);
  --body1: 16px/25px var(--fontBase);
  --body2: 14px/22px var(--fontBase);
  --button: bold 14px/22px var(--fontBase);
  --caption: 12px/19px var(--fontBase);
  --gradient: radial-gradient(
      41.48% 11.48% at 2.38% 8.52%,
      #747de9 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(135deg, #72edf2 0%, #5151e5 100%);
  --purple: #310a90;
  --green: #42e2b8;
}

body {
  background: var(--gradient);
  min-block-size: 100vh;
  font: var(--body1);
  color: var(--purple);
  margin: 0;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animationtimingfunction: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animationtimingfunction: cubic-bezier(0, 0, 0.2, 1);
  }
}

.typing-effect {
  width: 9ch;
  animation: typing 1s steps(9), blink 0.3s step-end infinite alternate;
  animation-delay: 2s;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}