body {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background-color: #000640;
    color: white;
    font-size: 1.1rem;
}
h1 {
  font-family: "Bitcount Grid Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
  font-size: 3.4em;
  line-height: 0.8;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}
.crazy-box {
  width: 300px;
  height: 300px;
  border-radius: 12px;
  background: conic-gradient(
    from 0deg,
    orange,
    red,
    orangered,
    darkorange,
    crimson,
    orange
  );
  animation: spin 8s linear infinite;
  box-shadow: 0 0 20px rgba(255, 80, 0, 0.4);
  margin: 2rem auto;
  background: radial-gradient(circle at 50% 50%, orange, red, orangered, darkred);
}
.whirly-box {
  height: 10em;
  background: linear-gradient(
    -45deg,
    orange,
    orangered,
    crimson,
    darkorange,
    tomato
  );
  background-size: 400% 400%;
  animation: flowColors 6s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(255, 100, 0, 0.4);
  margin: 2rem auto;
}
  
@keyframes flowColors {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


@keyframes spin {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(1turn);
  }
}

@media (max-width: 600px) {
  body {
    padding: 1rem;
  }

  .container {
    padding: 0rem;
    border-radius: 0;
    box-shadow: none;
  }

  h1 {
    font-size: 3rem;
  }

  p {
    font-size: 1rem;
  }
}
a {
  color: hotpink;
}

mark {
  color: white;
  background-color:#000640;
}
.wavy-title {
  color: white;                       /* text color */
  font-weight: 700;
  background: linear-gradient(
    45deg,
    #fa1849,
    #ffc355
  );
  background-size: 400% 400%;
}

/* The same keyframes as your animated box */
@keyframes wavyAnim {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}