/** let's go wild! add ur styles here *******/
/* Disco Robot Container */
.disco-robot {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: fit-content;
  padding: 20px;
  background: linear-gradient(45deg, #ff00cc, #ffcc00, #00ff66, #00ccff, #ff3399, #ff0066);
  background-size: 300% 300%;
  animation: gradientBackground 6s ease infinite, colorPulse 3s ease infinite;
}
.disco-robot img {
  filter: saturate(1) contrast(4);
}

.da-da-robot img {
  height: 420px;
}

/* Time-based background animation */
@keyframes gradientBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Time-based color modulation animation */
@keyframes colorPulse {
  0%, 100% {
    filter: saturate(3) contrast(1);
  }
  50% {
    filter: saturate(5) contrast(2);
  }
}

/* Button Container to align buttons side by side */
.button-container {
  display: flex;
  justify-content: center;
  gap: 20px; /* Space between the buttons */
  margin-top: 20px;
}

/* Base styles for both buttons */
.button {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.button a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  padding: 15px 30px;
  box-sizing: border-box;
  text-align: center;
}

.button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
  transition: all 0.5s ease;
  z-index: -1;
}

.button:hover::before {
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  background-color: rgba(255, 255, 255, 0.2);
}

/* Unique styles for each button */
.button-left {
  background-color: #1e90ff;
  box-shadow: 0 4px 15px rgba(30, 144, 255, 0.75);
}

.button-left:hover {
  background-color: #1c86ee;
  transform: translateY(-3px) rotate(-3deg);
}

.button-right {
  background-color: #32cd32;
  box-shadow: 0 4px 15px rgba(50, 205, 50, 0.75);
}

.button-right:hover {
  background-color: #2eb82e;
  transform: translateY(-3px) rotate(3deg);
}