*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
  -webkit-tap-highlight-color: transparent;
}

body {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  background-image: radial-gradient(
    circle closest-corner,
    transparent 30%,
    gray
  );
}

.parrafo {
  width: 70%;
  --font-size: 4vw;

  .top-and-bottom {
    font-size: var(--font-size);
    text-align: center;
    line-height: 1em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    -webkit-text-stroke: 0.1vw #000;
    color: transparent;
    position: relative;

    &::before,
    &::after {
      content: attr(data-text);
      display: block;
      position: absolute;
      width: 100%;
      height: 0%;
      overflow: hidden;
      transition: height 1s ease;
    }

    &::before {
      top: 0;
      color: #0f0;
    }

    &::after {
      bottom: 0;
      color: #00f;
    }

    &:hover {
      &::before,
      &::after {
        height: 100%;
        background-color: transparent;
      }
    }
  }

  @media (width <= 1111px) {
    --font-size: 5vw;
  }
}