html,
body {
  scrollbar-width: none;
  background: linear-gradient(to right, #E61C25, #F46F21, #F7934E, #FFFFFF, #E15AA3, #C34E95, #B21E69);
  background-repeat: no-repeat;
  min-height: 100vh;
  min-width: 100vw;
  overflow: hidden;
}

.grid {
  display: grid;
  margin: 1%;
  padding: 1%;
  height: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100%;
  place-items: center;
}

.esquerda, .meio, .direita {
  z-index: 0;
  position: sticky;
  /*border: 2px solid green*/
}

.bola, .bola2 {
  animation: gato-animation 2.5s ease infinite;
  z-index: +1;
  position: sticky;
}

@keyframes gato-animation {
  0% {
    scale: 50%;
  }

  50% {
    scale: 100%;
  }

  100% {
    scale: 50%;
  }
}

a {
  text-decoration: none;
}

@property --rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.cavalo {
  text-decoration: none;
  font-size: 150%;
  text-align: center;
  font-family: monospace;
  background: linear-gradient(var(--rotation), #00aeff, #00aeff, #13a8ce, #5bc8ef, #e7e7e7, #e7e7e7, #e7e7e7, #ee82a5, #ed81a5, #ff4fcd, #ff4fcd);
  background-size: 100% 100%;
  animation: gradient-animation 2.5s linear infinite;
  /*animation: spin-animation 5s linear infinite;*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: +2;
}

@keyframes gradient-animation {
  0% {
    --rotation: 0deg;
  }

  50% {
    --rotation: 180deg;
  }

  100% {
    --rotation: 360deg;
  }
}

@keyframes spin-animation {
  0% {
    transform: rotate3d(0);
  }

  25% {
    transform: rotate3d(1, 1, 1, 45deg);
  }

  50% {
    transform: rotate3d(2, -1, -1, -0.2turn);
  }

  75% {
    transform: rotate3d(0, 1, 0.5, 3.142rad);
  }

  100% {
    transform: rotate3d(0);
  }
}

.xumt {
  position: fixed;
  left: 10px;
  bottom: 10px;
  font-family: "Comic Sans MS";
  color: #f57e34;
}

.xumtbola {
  opacity: 0%;
  width: 10%;
  position: fixed;
  animation: xumt-animation 5s linear infinite;
  z-index: 0;
}

.xumt:hover+.grid .esquerda .xumtbola {
  opacity: 100%;
  width: 10%;
}

.bola:hover~.xumtbola {
  opacity: 100%;
  width: 10%;
  position: fixed;
  animation: xumt-animation 5s linear infinite;
}

@keyframes xumt-animation {
  0% {
    left: 5%;
    top: 40%;
  }

  25% {
    left: 40%;
    top: 80%;
  }

  50% {
    left: 85%;
    top: 40%;
  }

  75% {
    left: 40%;
    top: 5%;
  }

  100% {
    left: 5%;
    top: 40%;
  }
}

.yoru {
  position: fixed;
  right: 10px;
  bottom: 10px;
  font-family: "Comic Sans MS";
  color: #f57e34;
}

.yorubola {
  opacity: 0%;
  width: 10%;
  position: fixed;
  animation: yoru-animation 5s linear infinite;
  z-index: -1;
}

.bola2:hover~.yorubola {
  opacity: 100%;
  width: 10%;
}

@keyframes yoru-animation {
  0% {
    right: 5%;
    top: 40%;
  }

  25% {
    right: 40%;
    top: 80%;
  }

  50% {
    right: 85%;
    top: 40%;
  }

  75% {
    right: 40%;
    top: 5%;
  }

  100% {
    right: 5%;
    top: 40%;
  }
}