:root {
  --purple: #9FA8DA;
  --white: #ECEFFF;
  --black: #202036;
  --comforta: "Comfortaa", sans-serif;
}

body {
  color: var(--white);
  cursor: default;
}

.typewriter {
  padding: 0rem 0rem 5rem 1rem;
  display: flex;
  justify-content: center;
}

.typewriter h1 {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--type);
  animation: typing 3.5s steps(26) forwards, blink 1s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 14.5ch;
  }
}

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

h1,
h2,
h3,
h4,
p {
  padding: 1rem 0rem 0rem 1rem;
}

h1,
h2,
h3,
.star_h2 {
  font-family: "Oooh Baby", cursive;
  cursor: default;
}

h1 {
  font-size: 3rem;
  font-optical-sizing: auto;
  font-weight: 800;
}

h2,
.star_h2 {
  font-weight: 700;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
  font-weight: 600;
}

h4,
.star_h2 {
  font-size: 1.5rem;
}

h4 {
  font-weight: 500;
}

p,
.btn {
  font-size: 1rem;
  font-weight: 400;
}

p,
ul,
.btn {
  font-family: var(--comforta);
}

.link {
  color: var(--black);
  font-weight: 400;
}

.link:hover {
  color: var(--purple);
}

.btn:hover,
.btn:focus {
  color: var(--black) !important;
}

/*/*/
/*/*/
/*/*/
/*/*/
/*/*/
/*/*/
/*/*/
/*/*
RESPONSIVE
/*/
/*/*/
/*//*/
/*//*/
/*//*/
/*//*/
/*//*/
@media only screen and (max-width: 768px) {
  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  p,
  .btn {
    font-size: 0.95rem;
  }
}

@media only screen and (max-width: 576px) {
  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.1rem;
  }

  p,
  .btn {
    font-size: 0.9rem;
  }
}

@media only screen and (max-width: 450px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1rem;
  }
}