:root {
     --fire: #FF6B6B;
     --earth: #51CF66;
     --air: #339AF0;
     --water: #9775FA;
     --dark-blue: #0F1C3F;
     --star-yellow: #FFE066;
 }
 
 body {
     font-family: 'Noto Serif SC', serif;
     line-height: 1.8;
     color: #333;
     margin: 0;
     padding: 0;
     background-color: var(--dark-blue);
     background-image: 
         radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
         radial-gradient(circle at 90% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
         radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 20%);
     min-height: 100vh;
 }
 
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
 }
 
 header {
     text-align: center;
     padding: 40px 0;
     margin-bottom: 50px;
     position: relative;
     overflow: hidden;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     background: linear-gradient(135deg, rgba(15, 28, 63, 0.8) 0%, rgba(47, 53, 94, 0.9) 100%);
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 header::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="50,0 61,35 98,35 68,57 79,92 50,70 21,92 32,57 2,35 39,35" fill="%23FFE066" opacity="0.3"/></svg>');
     background-size: 50px 50px;
     opacity: 0.3;
     z-index: 0;
 }
 
 h1 {
     margin: 0;
     font-size: 3em;
     font-family: 'Ma Shan Zheng', cursive;
     position: relative;
     text-shadow: 0 0 10px rgba(255, 224, 102, 0.5);
     color: var(--star-yellow);
 }
 
 .subtitle {
     font-size: 1.3em;
     margin-top: 15px;
     font-weight: 300;
     position: relative;
     opacity: 0.9;
 }
 
 .zodiac-container {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 30px;
     margin-bottom: 60px;
 }
 
 .zodiac-card {
     background: rgba(255, 255, 255, 0.95);
     border-radius: 15px;
     padding: 25px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .zodiac-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 5px;
     background: linear-gradient(90deg, var(--element-color) 0%, rgba(255,255,255,0) 100%);
 }
 
 .zodiac-card:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
 }
 
 .zodiac-card h2 {
     color: var(--dark-blue);
     border-bottom: 2px solid rgba(0, 0, 0, 0.1);
     padding-bottom: 15px;
     margin-top: 0;
     margin-bottom: 15px;
     display: flex;
     align-items: center;
     font-size: 1.8em;
     font-weight: 700;
 }
 
 .zodiac-card h2 span {
     margin-left: 15px;
 }
 
 .date {
     color: #666;
     font-style: italic;
     margin: 5px 0 20px;
     display: flex;
     align-items: center;
     font-size: 0.95em;
 }
 
 .date::before {
     content: "📅";
     margin-right: 8px;
 }
 
 .element {
     display: inline-block;
     padding: 5px 12px;
     border-radius: 20px;
     color: white;
     font-size: 0.9em;
     margin-bottom: 15px;
     background-color: var(--element-color);
     font-weight: bold;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .fire { --element-color: var(--fire); }
 .earth { --element-color: var(--earth); }
 .air { --element-color: var(--air); }
 .water { --element-color: var(--water); }
 
 .zodiac-card p {
     margin-bottom: 15px;
     color: #444;
 }
 
 .zodiac-card strong {
     color: var(--element-color);
 }
 
 .zodiac-icon {
     width: 36px;
     height: 36px;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
 }
 
 footer {
     text-align: center;
     padding: 30px;
     margin-top: 60px;
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.9em;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     position: relative;
 }
 
 footer::before {
     content: "✨";
     position: absolute;
     top: -15px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 24px;
     background: var(--dark-blue);
     padding: 0 20px;
 }
 
 .constellation {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     pointer-events: none;
     z-index: -1;
 }
 
 .star {
     position: absolute;
     background-color: white;
     border-radius: 50%;
     animation: twinkle 2s infinite alternate;
 }
 
 @keyframes twinkle {
     0% { opacity: 0.3; }
     100% { opacity: 1; }
 }
 
 @media (max-width: 768px) {
     .zodiac-container {
         grid-template-columns: 1fr;
     }
     
     h1 {
         font-size: 2.2em;
     }
 }