*, *::before, *::after{box-sizing: border-box;margin: 0;padding: 0;} :root{--color-green-neon: #50fa7b;--color-pink-neon: #ff79c6;--color-purple-light: #bd93f9;--color-yellow-light: #f1fa8c;--color-background-start: #1a1a2e;--color-background-end: #16213e;--color-background-darker: #111321;--color-card-bg: #282a36;--color-gray-dark: #44475a;--color-gray-medium: #6272a4;--color-text: #e0e0ff;--color-text-secondary: #bdc1d6;--color-text-dark: #282a36;--font-body: 'Roboto', sans-serif;--font-title: 'Press Start 2P', cursive;--font-brand: 'Orbitron', sans-serif;--shadow-color-green: rgba(80, 250, 123, 0.4);--shadow-color-pink: rgba(255, 121, 198, 0.5);--shadow-color-purple: rgba(189, 147, 249, 0.4);--shadow-color-yellow: rgba(241, 250, 140, 0.4);} html{scroll-behavior: smooth;} body{font-family: var(--font-body);background: linear-gradient(135deg, var(--color-background-start), var(--color-background-end));color: var(--color-text);line-height: 1.6;display: flex;flex-direction: column;min-height: 100vh;overflow-x: hidden;} .container{width: 90%;max-width: 1100px;margin: 0 auto;padding: 0 15px;} main{flex: 1 0 auto;} @keyframes fadeInSlideUp{from{opacity: 0;transform: translateY(20px);} to{opacity: 1;transform: translateY(0);}} @keyframes pulseNeon{0%{transform: scale(1);box-shadow: 0 4px 15px var(--shadow-color-green);} 50%{transform: scale(1.04);box-shadow: 0 6px 22px var(--shadow-color-green);} 100%{transform: scale(1);box-shadow: 0 4px 15px var(--shadow-color-green);}} .site-header{background-color: rgba(17, 19, 33, 0.9);padding: 0.8rem 0;position: sticky;top: 0;z-index: 1000;border-bottom: 2px solid var(--color-green-neon);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);} .header-container{display: flex;justify-content: center;align-items: center;gap: 15px;} .header-logo{max-height: 40px;width: auto;display: block;} .header-brand{font-family: var(--font-brand);font-size: 1.5rem;font-weight: 700;letter-spacing: 1px;} .header-brand .geek{color: var(--color-green-neon);} .header-brand .code{color: var(--color-pink-neon);} .hero{background: none;color: var(--color-text);padding: 6rem 0 7rem;text-align: center;position: relative;min-height: 60vh;display: flex;align-items: center;justify-content: center;overflow: hidden;} .hero::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(22, 33, 62, 0.3);z-index: 0;pointer-events: none;} .hero-content{position: relative;z-index: 2;animation: fadeInSlideUp 0.9s ease-out forwards;} .hero-title{font-family: var(--font-title);font-size: 2.8rem;margin-bottom: 1.2rem;color: var(--color-purple-light);text-shadow: 0 0 8px var(--color-purple-light);opacity: 0;animation: fadeInSlideUp 0.9s 0.2s ease-out forwards;} .hero-description{font-size: 1.2rem;margin-bottom: 2.5rem;max-width: 600px;margin-left: auto;margin-right: auto;color: var(--color-text-secondary);opacity: 0;animation: fadeInSlideUp 0.9s 0.4s ease-out forwards;} .hero-description strong{color: var(--color-yellow-light);font-weight: bold;} .cta-button{display: inline-block;background-color: var(--color-green-neon);color: var(--color-text-dark);padding: 1rem 2.5rem;border: none;border-radius: 8px;font-size: 1.1rem;font-weight: bold;text-decoration: none;cursor: pointer;transition: transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;box-shadow: 0 4px 15px var(--shadow-color-green);opacity: 0;animation: fadeInSlideUp 0.9s 0.6s ease-out forwards, pulseNeon 2.8s infinite 1.5s;text-transform: uppercase;letter-spacing: 1px;} .cta-button:hover, .cta-button:focus{background-color: var(--color-pink-neon);color: var(--color-text-dark);transform: translateY(-3px);box-shadow: 0 7px 20px var(--shadow-color-pink);animation-play-state: paused;} .cta-button.secondary{background-color: transparent;color: var(--color-pink-neon);border: 2px solid var(--color-pink-neon);box-shadow: none;animation: fadeInSlideUp 0.8s 1.3s ease-out forwards;opacity: 0;} .cta-button.secondary:hover, .cta-button.secondary:focus{background-color: var(--color-pink-neon);color: var(--color-text-dark);transform: translateY(-3px) scale(1.03);box-shadow: 0 6px 18px var(--shadow-color-pink);} .game-gallery{padding: 5rem 0;background-color: rgba(22, 33, 62, 0.2);text-align: center;border-top: 1px solid var(--color-gray-dark);border-bottom: 1px solid var(--color-gray-dark);} .gallery-title{font-family: var(--font-title);font-size: 2rem;color: var(--color-green-neon);margin-bottom: 1rem;opacity: 0;animation: fadeInSlideUp 0.8s 0.2s ease-out forwards;text-shadow: 0 0 5px var(--color-green-neon);} .gallery-description{color: var(--color-text-secondary);margin-bottom: 3rem;font-size: 1.1rem;opacity: 0;animation: fadeInSlideUp 0.8s 0.4s ease-out forwards;} .game-gallery-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 1.8rem;padding: 0 10px;} .game-card{position: relative;border-radius: 8px;overflow: hidden;background-color: var(--color-card-bg);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);transition: transform 0.3s ease, box-shadow 0.3s ease;cursor: pointer;opacity: 0;animation: fadeInSlideUp 0.7s ease-out forwards;aspect-ratio: 3 / 4;} .game-card:nth-child(1){animation-delay: 0.6s;} .game-card:nth-child(2){animation-delay: 0.65s;} .game-card:nth-child(3){animation-delay: 0.7s;} .game-card:nth-child(4){animation-delay: 0.75s;} .game-card:nth-child(5){animation-delay: 0.8s;} .game-card:nth-child(6){animation-delay: 0.85s;} .game-card:nth-child(7){animation-delay: 0.9s;} .game-card:nth-child(8){animation-delay: 0.95s;} .game-card:nth-child(9){animation-delay: 1.0s;} .game-card:nth-child(10){animation-delay: 1.05s;} .game-card:nth-child(11){animation-delay: 1.1s;} .game-card:nth-child(12){animation-delay: 1.15s;} .game-card:nth-child(13){animation-delay: 1.2s;} .game-card:nth-child(14){animation-delay: 1.25s;} .game-card:nth-child(15){animation-delay: 1.3s;} .game-card:nth-child(16){animation-delay: 1.35s;} .game-card:nth-child(17){animation-delay: 1.4s;} .game-card:nth-child(18){animation-delay: 1.45s;} .game-card img{display: block;width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease, filter 0.3s ease;} .game-card-overlay{position: absolute;bottom: 0;left: 0;width: 100%;background: linear-gradient(to top, rgba(40, 42, 54, 0.95) 25%, transparent 100%);padding: 1.5rem 0.8rem 0.8rem;opacity: 0;transform: translateY(100%);transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);pointer-events: none;} .game-card-title{color: var(--color-yellow-light);font-size: 0.9rem;font-weight: bold;text-align: center;display: block;font-family: var(--font-title);letter-spacing: 0.5px;} .game-card:hover{transform: scale(1.06) translateY(-8px);box-shadow: 0 10px 25px var(--shadow-color-purple);z-index: 10;} .game-card:hover img{transform: scale(1.05);filter: brightness(1.1);} .game-card:hover .game-card-overlay{opacity: 1;transform: translateY(0);} .gallery-cta{margin-top: 3.5rem;opacity: 0;animation: fadeInSlideUp 0.8s 1.5s ease-out forwards;} .features{background-color: transparent;padding: 5rem 0;text-align: center;} .features-title{font-family: var(--font-title);font-size: 1.9rem;color: var(--color-purple-light);margin-bottom: 3.5rem;opacity: 0;animation: fadeInSlideUp 0.8s ease-out forwards;text-shadow: 0 0 5px var(--color-purple-light);} .features-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 2.5rem;} .feature-item{background-color: var(--color-card-bg);padding: 2.5rem 2rem;border-radius: 8px;border: 1px solid var(--color-gray-dark);transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;opacity: 0;animation: fadeInSlideUp 0.7s ease-out forwards;} .feature-item:nth-child(1){animation-delay: 0.3s;} .feature-item:nth-child(2){animation-delay: 0.5s;} .feature-item:nth-child(3){animation-delay: 0.7s;} .feature-item:hover{transform: translateY(-10px);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);border-color: var(--color-pink-neon);} .feature-icon{font-size: 3rem;color: var(--color-purple-light);margin-bottom: 1.5rem;display: inline-block;transition: transform 0.3s ease, color 0.3s ease;} .feature-item:hover .feature-icon{transform: scale(1.1);color: var(--color-green-neon);} .feature-item h4{font-family: var(--font-brand);font-size: 1.3rem;color: var(--color-yellow-light);margin-bottom: 0.8rem;} .feature-item p{font-size: 1rem;color: var(--color-text-secondary);} footer{background-color: var(--color-background-darker);color: var(--color-gray-medium);text-align: center;padding: 2rem 1rem;margin-top: auto;flex-shrink: 0;border-top: 1px solid var(--color-gray-dark);font-size: 0.9rem;} .footer-links{margin-bottom: 1rem;display: flex;justify-content: center;flex-wrap: wrap;gap: 10px 15px;} .footer-links a{color: var(--color-gray-medium);text-decoration: none;transition: color 0.3s ease;} .footer-links a:hover{color: var(--color-green-neon);} .footer-links span{color: var(--color-gray-dark);margin: 0 5px;display: inline-block;} @media (max-width: 600px){.footer-links span{display: none;} .footer-links a{margin-bottom: 5px;}} .footer-developer{margin-bottom: 1rem;} .footer-developer a{color: var(--color-gray-medium);text-decoration: none;transition: color 0.3s ease;} .footer-developer a:hover{color: var(--color-text);} .copyright{margin-top: 0.5rem;font-size: 0.85rem;color: var(--color-gray-medium);} .geek{color: var(--color-green-neon);font-weight: bold;} .code{color: var(--color-pink-neon);font-weight: bold;} @media (max-width: 992px){.hero-title{font-size: 2.4rem;} .hero-description{font-size: 1.15rem;max-width: 85%;} .gallery-title{font-size: 1.8rem;} .game-gallery-grid{grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));gap: 1.5rem;} .features-title{font-size: 1.7rem;}} @media (max-width: 600px){.container{width: 92%;} .header-logo{max-height: 35px;} .header-brand{font-size: 1.3rem;} .hero{padding: 5rem 0 6rem;} .hero-title{font-size: 2rem;} .hero-description{font-size: 1.1rem;max-width: 95%;} .cta-button{padding: 0.9rem 2rem;font-size: 1rem;} .game-gallery{padding: 4rem 0;} .gallery-title{font-size: 1.6rem;} .gallery-description{font-size: 1rem;margin-bottom: 2.5rem;} .game-gallery-grid{grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));gap: 1.2rem;} .game-card-title{font-size: 0.8rem;} .features{padding: 4rem 0;} .features-title{font-size: 1.6rem;} .feature-item h4{font-size: 1.2rem;} .feature-icon{font-size: 2.8rem;} .cta-button:hover, .cta-button:focus{transform: translateY(-2px) scale(1.02);} .cta-button.secondary:hover, .cta-button.secondary:focus{transform: translateY(-2px) scale(1.02);} .game-card:hover{transform: scale(1.04) translateY(-6px);} .footer{padding: 1.5rem;} .footer-links{gap: 5px 10px;}} @media (max-width: 400px){.container{width: 95%;padding: 0 10px;} .header-logo{max-height: 30px;} .header-brand{font-size: 1.1rem;gap: 10px;} .hero{padding: 4rem 0 5rem;} .hero-title{font-size: 1.7rem;} .hero-description{font-size: 1rem;} .cta-button{padding: 0.8rem 1.8rem;font-size: 0.9rem;} .game-gallery{padding: 3rem 0;} .gallery-title{font-size: 1.4rem;} .gallery-description{margin-bottom: 2rem;} .game-gallery-grid{grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));gap: 0.8rem;} .game-card:hover{transform: scale(1.03) translateY(-4px);} .gallery-cta{margin-top: 2.5rem;} .features{padding: 3rem 0;} .features-grid{grid-template-columns: 1fr;gap: 1.5rem;} .features-title{font-size: 1.4rem;margin-bottom: 2.5rem;} .feature-item{padding: 2rem 1.5rem;} .feature-icon{font-size: 2.5rem;} footer{font-size: 0.85rem;padding: 1.5rem 10px;} .footer-links{justify-content: center;text-align: center;} .copyright{font-size: 0.8rem;}}