:root {
  --primary-color: #1e3d59;
  --secondary-color: #f5b301;
  --accent-color: #ff6e40;
  --text-color: #333;
  --light-color: #f5f0e1;
  --dark-color: #1a1a1a;

  --olympian-blue: #214e87;
  --olympian-gold: #d4af37;
  --olympus-marble: #f5f5f5;
  --zeus-lightning: #f4d03f;
  --poseidon-blue: #3498db;
  --athena-silver: #bdc3c7;
  --apollo-sun: #f39c12;
  --hades-dark: #2c3e50;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes lightning {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  11% {
    opacity: 0;
  }
  14% {
    opacity: 0;
  }
  15% {
    opacity: 0.3;
  }
  16% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px var(--olympian-gold);
  }
  50% {
    box-shadow: 0 0 20px var(--olympian-gold), 0 0 30px var(--zeus-lightning);
  }
  100% {
    box-shadow: 0 0 5px var(--olympian-gold);
  }
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--hades-dark);
  color: var(--text-color);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

.olympus-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      to bottom,
      rgba(44, 62, 80, 0.7),
      rgba(0, 0, 0, 0.9)
    ),
    url("https://images.unsplash.com/photo-1603392549944-4ebcde47554e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80")
      no-repeat center center/cover;
  opacity: 0.8;
  z-index: -2;
}

.lightning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  z-index: -1;
  opacity: 0;
  animation: lightning 10s infinite;
  pointer-events: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  padding: 2rem 0;
}

.logo-container {
  margin-bottom: 1rem;
  position: relative;
}

.olympus-emblem {
  width: 100px;
  height: 100px;
  margin: 0 auto 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37'%3E%3Cpath d='M12 2L4 9h16L12 2zm8 8h-3v9h-2v-7h-2v7h-2v-7h-2v7H7v-9H4v9c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: float 6s ease-in-out infinite;
}

.column-decoration {
  position: absolute;
  top: 0;
  width: 30px;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 400' fill='%23d4af37' opacity='0.4'%3E%3Crect x='30' y='0' width='40' height='400' /%3E%3Crect x='20' y='0' width='60' height='40' /%3E%3Crect x='20' y='360' width='60' height='40' /%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-position: center;
  background-size: contain;
  opacity: 0.6;
}

.column-decoration.left {
  left: 0;
}

.column-decoration.right {
  right: 0;
}

header h1 {
  font-size: 4rem;
  color: var(--olympian-gold);
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  display: inline-block;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

header h1::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent,
    var(--olympian-gold),
    transparent
  );
  animation: glow 3s infinite;
}

.subtitle {
  font-size: 1.5rem;
  color: var(--olympus-marble);
  font-weight: 300;
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  margin-top: 0.5rem;
}

.location-info {
  font-size: 1rem;
  color: var(--athena-silver);
  font-weight: 300;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  margin-top: 0.8rem;
  font-style: italic;
}

main {
  flex: 1;
}

.hero {
  background-color: rgba(45, 52, 54, 0.8);
  border-radius: 10px;
  padding: 3rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  border-left: 5px solid var(--olympian-gold);
  color: var(--olympus-marble);
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37' opacity='0.2'%3E%3Cpath d='M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.2;
}

.hero-content {
  max-width: 800px;
}

.zeus-divider {
  margin: 2rem 0;
  text-align: center;
  position: relative;
}

.zeus-divider::before,
.zeus-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--olympian-gold),
    transparent
  );
}

.zeus-divider::before {
  left: 0;
}

.zeus-divider::after {
  right: 0;
}

.zeus-bolt {
  font-size: 2rem;
  color: var(--zeus-lightning);
  padding: 0 1rem;
  animation: pulse 2s infinite;
}

.announcement {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--olympian-gold);
  margin-bottom: 1rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

section {
  margin-bottom: 3rem;
}

.olympian-card {
  background-color: rgba(45, 52, 54, 0.8);
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  color: var(--olympus-marble);
  border-top: 3px solid var(--olympian-gold);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.olympian-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.olympian-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37' opacity='0.1'%3E%3Cpath d='M11,3l2.45,5.6L19,10l-4,3.33l1,6.67l-6-3.33l-6,3.33l1-6.67L1,10l5.55-1.4L11,3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.1;
}

section h2 {
  font-size: 2rem;
  color: var(--olympian-gold);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

section h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--olympian-gold);
}

.icon-scroll {
  transform: rotate(-5deg);
}

.greek-gods {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 2rem;
  gap: 20px;
}

.god-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid var(--olympian-gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
  background-color: rgba(33, 78, 135, 0.7);
}

.god-icon:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 20px var(--olympian-gold);
}

.god-icon.zeus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37'%3E%3Cpath d='M3.9,14.1L9,9l1,5.5L4.9,20L3.9,14.1z M13,9l5.1,5.1L17,20l-5.1-5.5L13,9z M12,6c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S10.9,6,12,6z M14.5,8h-5C8.7,8,8,8.7,8,9.5v0c0,0.8,0.7,1.5,1.5,1.5h5c0.8,0,1.5-0.7,1.5-1.5v0C16,8.7,15.3,8,14.5,8z M13,12l-2,2l2,4l2-4L13,12z M7.5,22h9c0.8,0,1.5-0.7,1.5-1.5v0c0-0.8-0.7-1.5-1.5-1.5h-9C6.7,19,6,19.7,6,20.5v0C6,21.3,6.7,22,7.5,22z'/%3E%3C/svg%3E");
}

.god-icon.poseidon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233498db'%3E%3Cpath d='M19.5,5.4c-0.5-0.5-1.3-0.5-1.8,0L12,11.1L6.2,5.4c-0.5-0.5-1.3-0.5-1.8,0s-0.5,1.3,0,1.8l4.5,4.5c-4,0.8-7,4.3-7,8.5h1c0-3.9,3.1-7,7-7s7,3.1,7,7h1c0-4.2-3-7.6-7-8.5l4.5-4.5C20,6.7,20,5.9,19.5,5.4z M12,3c0.6,0,1-0.4,1-1s-0.4-1-1-1s-1,0.4-1,1S11.4,3,12,3z M16,13.4c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4s1,0.4,1.4,0S16.4,13.8,16,13.4z M8,15.4c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4s-1-0.4-1.4,0S7.6,15,8,15.4z'/%3E%3C/svg%3E");
}

.god-icon.athena {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bdc3c7'%3E%3Cpath d='M11.5,1L8,3.5V7c0,1.1,0.4,2.2,1,3l-4,4v2h2v2h2v2h2v2h2v-2h2v-2h2v-2h2v-2l-4-4c0.6-0.8,1-1.9,1-3V3.5L11.5,1z M11.5,7.7c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5S12.3,7.7,11.5,7.7z'/%3E%3C/svg%3E");
}

.god-icon.apollo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f39c12'%3E%3Cpath d='M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13h2c0.55,0,1-0.45,1-1s-0.45-1-1-1H2 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13h2c0.55,0,1-0.45,1-1s-0.45-1-1-1h-2c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 S11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0 s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z'/%3E%3C/svg%3E");
}

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 2rem;
}

.challenge-item {
  background: rgba(33, 78, 135, 0.3);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.challenge-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.challenge-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(33, 78, 135, 0.3);
  border-radius: 50%;
  border: 1px solid var(--olympian-gold);
  transition: all 0.3s ease;
}

.challenge-item:hover .challenge-icon {
  transform: rotate(10deg);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.challenge-icon.code-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37'%3E%3Cpath d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E");
}

.challenge-icon.design-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5 0 .12.05.23.13.33.41.47.64 1.06.64 1.67A2.5 2.5 0 0 1 12 22zm0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8c.28 0 .5-.22.5-.5a.54.54 0 0 0-.14-.35c-.41-.46-.63-1.05-.63-1.65a2.5 2.5 0 0 1 2.5-2.5H16c2.21 0 4-1.79 4-4 0-3.86-3.59-7-8-7z'/%3E%3Ccircle cx='6.5' cy='11.5' r='1.5'/%3E%3Ccircle cx='9.5' cy='7.5' r='1.5'/%3E%3Ccircle cx='14.5' cy='7.5' r='1.5'/%3E%3Ccircle cx='17.5' cy='11.5' r='1.5'/%3E%3C/svg%3E");
}

.challenge-icon.data-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37'%3E%3Cpath d='M19 3H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.challenge-icon.team-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

.challenge-item h3 {
  color: var(--olympian-gold);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.challenge-item p {
  font-size: 0.9rem;
  color: var(--olympus-marble);
}

.signup-form {
  display: flex;
  margin-top: 1.5rem;
  max-width: 500px;
}

.signup-form input {
  flex: 1;
  padding: 0.8rem 1rem;
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px 0 0 4px;
  font-family: inherit;
  font-size: 1rem;
  background: rgba(45, 52, 54, 0.5);
  color: var(--olympus-marble);
}

.signup-form input::placeholder {
  color: rgba(245, 245, 245, 0.6);
}

.btn-olympus {
  background: linear-gradient(135deg, var(--olympian-gold), #b8860b);
  color: var(--dark-color);
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-olympus:hover {
  background: linear-gradient(135deg, #b8860b, var(--olympian-gold));
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

.hidden {
  display: none;
}

footer {
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.9rem;
  color: var(--olympus-marble);
  opacity: 0.8;
  margin-top: 2rem;
  position: relative;
}

.footer-decoration {
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' fill='%23d4af37' opacity='0.4'%3E%3Cpath d='M0,15 Q300,0 600,15 T1200,15 V30 H0 Z' /%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: cover;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 1rem;
}

.social-icon {
  color: var(--olympian-gold);
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.social-icon:hover {
  color: var(--zeus-lightning);
  transform: translateY(-3px) scale(1.2);
}

@media (max-width: 768px) {
  header h1 {
    font-size: 2.5rem;
  }

  .subtitle {
    font-size: 1.2rem;
  }

  .announcement {
    font-size: 1.5rem;
  }

  .signup-form {
    flex-direction: column;
  }

  .signup-form input {
    border-radius: 4px;
    margin-bottom: 0.5rem;
  }

  .btn-olympus {
    border-radius: 4px;
    width: 100%;
    justify-content: center;
  }

  .greek-gods {
    gap: 10px;
  }

  .god-icon {
    width: 60px;
    height: 60px;
  }

  .challenge-grid {
    grid-template-columns: 1fr;
  }
}