\n:root {\n  --brown: #964B00;\n  --beige: #F5F5DC;\n  --dark-blue: #003366;\n  --orange: #FFA500;\n  --red: #FF0000;\n  --main-font: 'Baskerville', serif;\n  --content-width: min(90%, 1200px);\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: var(--main-font);\n  font-size: 17px;\n  line-height: 1.6;\n  color: #333;\n  background: linear-gradient(135deg, var(--beige) 25%, var(--brown) 75%);\n  background-attachment: fixed;\n  padding: 0;\n  margin: 0;\n}\n\n.container {\n  width: var(--content-width);\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 2rem 0;\n}\n\n.header {\n  background: rgba(0, 0, 0, 0.7);\n  color: white;\n  padding: 1rem 0;\n  text-align: center;\n  position: relative;\n  z-index: 100;\n}\n\n.header h1 {\n  font-size: 2.5rem;\n  margin-bottom: 0.5rem;\n  background: linear-gradient(to right, var(--orange), var(--red));\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.header p {\n  font-size: 1.2rem;\n  color: var(--beige);\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.navbar {\n  background-color: var(--brown);\n  padding: 1rem 2rem;\n  display: flex;\n  justify-content: center;\n  position: sticky;\n  top: 0;\n  z-index: 1000;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.nav-links {\n  display: flex;\n  gap: 2rem;\n  list-style: none;\n}\n\n.nav-links a {\n  color: var(--beige);\n  text-decoration: none;\n  font-size: 1.1rem;\n  font-weight: 500;\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n  transition: all 0.3s ease;\n  position: relative;\n}\n\n.nav-links a:hover {\n  color: var(--orange);\n  transform: translateY(-2px);\n}\n\n.nav-links a::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 0;\n  height: 2px;\n  background: var(--orange);\n  transition: width 0.3s ease;\n}\n\n.nav-links a:hover::after {\n  width: 100%;\n}\n\n.hero {\n  height: 500px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: white;\n  position: relative;\n  overflow: hidden;\n  margin-bottom: 3rem;\n}\n\n.hero::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1;\n}\n\n.hero-content {\n  position: relative;\n  z-index: 2;\n  max-width: 800px;\n  padding: 0 2rem;\n}\n\n.hero h2 {\n  font-size: 3rem;\n  margin-bottom: 1.5rem;\n  color: var(--beige);\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n.hero p {\n  font-size: 1.2rem;\n  margin-bottom: 2rem;\n  color: var(--beige);\n}\n\n.btn {\n  display: inline-block;\n  background: var(--orange);\n  color: white;\n  padding: 0.8rem 2rem;\n  border-radius: 50px;\n  text-decoration: none;\n  font-weight: bold;\n  transition: all 0.3s ease;\n  box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);\n}\n\n.btn:hover {\n  background: var(--red);\n  transform: translateY(-3px);\n  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);\n}\n\n.section {\n  padding: 4rem 0;\n  background: rgba(255, 255, 255, 0.9);\n  border-radius: 10px;\n  margin-bottom: 3rem;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n}\n\n.section-title {\n  text-align: center;\n  margin-bottom: 3rem;\n  position: relative;\n}\n\n.section-title h2 {\n  font-size: 2.2rem;\n  color: var(--dark-blue);\n  display: inline-block;\n  padding-bottom: 1rem;\n}\n\n.section-title h2::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100px;\n  height: 4px;\n  background: var(--orange);\n  border-radius: 2px;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 2rem;\n  padding: 0 2rem;\n}\n\n.card {\n  background: white;\n  border-radius: 10px;\n  overflow: hidden;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n  transition: all 0.3s ease;\n}\n\n.card:hover {\n  transform: translateY(-10px);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);\n}\n\n.card-img {\n  height: 200px;\n  overflow: hidden;\n}\n\n.card-img img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.5s ease;\n}\n\n.card:hover .card-img img {\n  transform: scale(1.1);\n}\n\n.card-content {\n  padding: 1.5rem;\n}\n\n.card-content h3 {\n  font-size: 1.5rem;\n  margin-bottom: 1rem;\n  color: var(--dark-blue);\n}\n\n.card-content p {\n  margin-bottom: 1.5rem;\n  color: #666;\n}\n\n.features {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 1.5rem;\n}\n\n.feature {\n  background: var(--beige);\n  color: var(--brown);\n  padding: 0.3rem 0.8rem;\n  border-radius: 50px;\n  font-size: 0.9rem;\n}\n\narticle {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 2rem;\n  background: white;\n  border-radius: 10px;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n}\n\narticle h2 {\n  font-size: 1.8rem;\n  color: var(--dark-blue);\n  margin: 2rem 0 1rem;\n  position: relative;\n  padding-bottom: 0.5rem;\n}\n\narticle h2::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 50px;\n  height: 3px;\n  background: var(--orange);\n  transition: width 0.3s ease;\n}\n\narticle h2:hover::after {\n  width: 100px;\n}\n\narticle p {\n  margin-bottom: 1.5rem;\n  line-height: 1.7;\n}\n\npre {\n  background: #f5f5f5;\n  padding: 1.5rem;\n  border-radius: 8px;\n  overflow-x: auto;\n  margin: 1.5rem 0;\n  border-left: 4px solid var(--orange);\n}\n\ncode {\n  font-family: 'Courier New', monospace;\n  font-size: 0.9rem;\n  color: #333;\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  margin: 2rem 0;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\ntable th, table td {\n  padding: 1rem;\n  text-align: left;\n  border-bottom: 1px solid #ddd;\n}\n\ntable th {\n  background: var(--dark-blue);\n  color: white;\n}\n\ntable tr:nth-child(even) {\n  background: #f9f9f9;\n}\n\n.footer {\n  background: var(--dark-blue);\n  color: white;\n  text-align: center;\n  padding: 2rem 0;\n  margin-top: 3rem;\n}\n\n.footer p {\n  margin-bottom: 1rem;\n}\n\n.footer-links {\n  display: flex;\n  justify-content: center;\n  gap: 2rem;\n  margin-bottom: 1.5rem;\n}\n\n.footer-links a {\n  color: var(--beige);\n  text-decoration: none;\n  transition: color 0.3s ease;\n}\n\n.footer-links a:hover {\n  color: var(--orange);\n}\n\n.notice {\n  background: rgba(255, 255, 255, 0.9);\n  padding: 1rem;\n  border-radius: 8px;\n  margin: 2rem auto;\n  max-width: 800px;\n  text-align: center;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  border-left: 4px solid var(--orange);\n}\n\n@media (max-width: 768px) {\n  .navbar {\n    padding: 1rem;\n  }\n  \n  .nav-links {\n    flex-direction: column;\n    gap: 1rem;\n  }\n  \n  .hero h2 {\n    font-size: 2rem;\n  }\n  \n  .section-title h2 {\n    font-size: 1.8rem;\n  }\n  \n  article {\n    padding: 1.5rem;\n  }\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.animate {\n  animation: fadeIn 1s ease-in-out;\n}\n\n.theme-toggle {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background: var(--orange);\n  color: white;\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n  z-index: 1000;\n  transition: all 0.3s ease;\n}\n\n.theme-toggle:hover {\n  background: var(--red);\n  transform: scale(1.1);\n}\n