@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes glow { from { box-shadow: 0 0 5px hsl(154, 70%, 50%); } to { box-shadow: 0 0 20px hsl(334, 70%, 50%); } }

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

body { font-family: Verdana, sans-serif; background: hsl(124, 70%, 50%); color: #000000; line-height: 1.6; min-height: 100vh; font-size: clamp(14px, 2.5vw, 18px); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(10px, 2vw, 20px); padding: clamp(10px, 2vw, 20px); max-width: 1200px; margin: 0 auto; }

.gallery img { width: 100%; height: 200px; object-fit: cover; border-radius: 0; transition: transform 0.3s ease; cursor: pointer; border: 2px solid hsl(154, 70%, 50%); }

.gallery img:hover { transform: scale(1.05); box-shadow: 1px 6px 24px hsl(124, 70%, 50%); }

header, footer { background: hsl(124, 70%, 50%); padding: 20px; text-align: center; color: #000000; font-size: clamp(12px, 2vw, 16px); }

header ul, footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin: 10px 0; }

main { padding: 20px; max-width: 1200px; margin: 0 auto; }

h1 { color: #000000; text-shadow: 9px 2px 12px hsl(184, 70%, 50%); font-size: clamp(1.8rem, 6vw, 2rem); text-align: center; margin: 20px 0; animation: pulse 2s infinite; }

h2 { color: #000000; font-size: clamp(1.2rem, 4vw, 2.2rem); margin: 15px 0; border-left: 4px solid hsl(184, 70%, 50%); padding-left: 15px; }

h3 { color: #000000; font-size: clamp(1rem, 3vw, 1.8rem); margin: 10px 0; }

p, li, span, div { color: #000000; font-size: clamp(14px, 2.5vw, 18px); }

ul { list-style-type: none; padding-left: 0; margin: 0; }

button, .cta { background: hsl(154, 70%, 50%); color: #000000; border: none; padding: 12px 24px; margin: 10px; cursor: pointer; border-radius: 0; transition: all 0.3s ease; font-weight: bold; font-size: clamp(12px, 2.5vw, 16px); }

button:hover, .cta:hover { transform: scale(1.05); box-shadow: 4px 9px 9px hsl(184, 70%, 50%); }

a { color: #000000; text-decoration: none; font-size: clamp(12px, 2.5vw, 16px); }
a:hover { color: hsl(334, 70%, 50%); text-decoration: underline; }

@media (max-width: 768px) { .gallery { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 10px; } h1 { font-size: clamp(1.5rem, 8vw, 2.5rem); } }
@media (max-width: 480px) { .gallery { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 5px; padding: 8px; width: 100%; } h1 { font-size: clamp(1.3rem, 10vw, 1rem); } h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; } }