<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=
    , initial-scale=1.0"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Disco</title>
  </head>
  <body>
    <div class="container">
      <h1>D I S C O</h1>
    </div>
  </body>
</html>
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: rgb(188, 215, 236);
  height: 100vh;
  width: 100vw;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
h1 {
  position: absolute;
  color: yellow;
  font-weight: 900;
  text-shadow: 0 0 15px yellow, 0 0 25px yellow;
  animation: bounce-disco 10s ease-in-out infinite;
}
body:hover {
  animation: disco 20s linear infinite;
}
@keyframes disco {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(1turn);
  }
}

@keyframes bounce-disco {
  0% {
    left: 10px;
    top: 10px;
    filter: hue-rotate(0deg);
  }
  50% {
    left: 90%;
    top: 10px;
  }
  100% {
    left: 10px;
    top: 90%;
    filter: hue-rotate(1turn);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.