/* Custom CSS */

/* Color Scheme */
:root {
  --dark-blue: #0a2342;
  --light-gray: #f8f9fa;
  --white: #ffffff;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Navigation */
.bg-dark-blue {
  background-color: var(--dark-blue) !important;
}

/* Hero Section */
.hero {
  background-color: var(--dark-blue);
  padding: 100px 0;
}

/* Sections */
#rules {
  background-color: var(--white);
}

#social {
  background-color: var(--light-gray);
}

/* Social Icons */
.social-icon {
  margin: 0 15px;
  color: var(--dark-blue);
  transition: color 0.3s;
}

.social-icon:hover {
  color: #0056b3; /* A slightly lighter blue */
}

/* Order Button */
#stripe-checkout {
  background-color: var(--dark-blue);
  border-color: var(--dark-blue);
}

#stripe-checkout:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

/* Footer */
footer {
  background-color: var(--dark-blue);
}

/* Washer Animation */
#washer-animation-container {
  position: relative;
  height: 100px;
  width: 100%;
  overflow: hidden;
}

#washer {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #c0c0c0; /* Silver */
  border-radius: 50%;
  border: 5px solid #a9a9a9; /* Darker silver */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  bottom: 0;
  left: -50px; /* Start off-screen */
  animation: bounce 5s linear infinite;
}

@keyframes bounce {
  0% {
    left: -50px;
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-50px) rotate(90deg);
  }
  50% {
    transform: translateY(0) rotate(180deg);
  }
  75% {
    transform: translateY(-50px) rotate(270deg);
  }
  100% {
    left: 100%;
    transform: translateY(0) rotate(360deg);
  }
}