html {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

body {
  margin: 0;
  background-color: #333;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100vh;
}

main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dvd-screen {
  background-color: #000;
  width: 600px;
  height: 450px;
  position: relative;
  border-radius: 1rem;
}

.dvd-logo {
  width: 100px;
  height: 43.88px;
  position: absolute;
  top: 0;
  fill: currentColor;
  color: white;
  animation: bounceX 4s infinite alternate linear, bounceY 3s infinite alternate linear, colorChange 12s infinite steps(1),
    colorChangeY 15s infinite steps(1);
}

h1 {
  font-size: 2rem;
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: -5rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.footer {
  color: #fff;
  font-weight: bold;
  position: absolute;
  bottom: -3rem;
  left: 50%;
  transform: translateX(-50%);
}

.version-1 {
  color: #fff;
  text-decoration: none;
}

.version-1:hover {
  color: rgba(255, 255, 255, 0.75);
}

.version-1:active {
  color: red;
}

@keyframes bounceX {
  0% {
    left: 0;
  }
  100% {
    left: 500px;
  }
}

@keyframes bounceY {
  0% {
    top: 0;
  }
  100% {
    top: 406.12px;
  }
}

@keyframes colorChange {
  0%,
  100% {
    fill: red;
  }
  8.33% {
    fill: red;
  }
  16.67% {
    fill: red;
  }
  25% {
    fill: orange;
  }
  33.33% {
    fill: yellow;
  }
  41.67% {
    fill: yellow;
  }
  50% {
    fill: green;
  }
  58.33% {
    fill: green;
  }
  66.67% {
    fill: blue;
  }
  75% {
    fill: purple;
  }
  83.33% {
    fill: purple;
  }
  91.67% {
    fill: purple;
  }
}