:root { --crimson: #DC143C; --darkred: #8B0000; --black: #000000; --charcoal: #333333; --gold: #D4AF37; --font-gothic: 'Grenze Gotisch', cursive; --font-body: 'Roboto', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: linear-gradient(-45deg, var(--crimson), var(--darkred), var(--black), var(--darkred)); background-size: 400% 400%; animation: gradientAnimation 15s ease infinite; color: var(--gold); font-family: var(--font-body); line-height: 1.6; } @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } header { background: transparent; text-align: center; padding: 4rem 2rem; position: relative; } header h1 { font-family: var(--font-gothic); font-size: 4rem; color: var(--gold); text-shadow: 0 0 10px var(--crimson); } header p { font-size: 1.5rem; color: var(--charcoal); margin-top: 1rem; } section { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; background-color: rgba(0, 0, 0, 0.6); border-radius: 10px; } section h2 { font-family: var(--font-gothic); font-size: 2.5rem; margin-bottom: 1rem; color: var(--crimson); text-align: center; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .gallery img { width: 100%; height: auto; border: 2px solid var(--gold); transition: transform 0.3s, box-shadow 0.3s; } .gallery img:hover { transform: scale(1.05); box-shadow: 0 0 10px var(--crimson); } /* Responsive */ @media (max-width: 600px) { header h1 { font-size: 2.5rem; } }