:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0;padding:0;min-width:320px;min-height:100vh;background-color:#0a192f;overflow-x:hidden}*{margin:0;padding:0;box-sizing:border-box}#root{width:100%;height:100vh;background-color:#0a192f}.app{width:100vw;min-height:100vh;background-color:#0a192f;display:flex;justify-content:center}.content{width:100%;max-width:1200px;padding:5rem 2rem}h1{font-family:Fira Code,monospace;color:#64ffda;font-size:3rem;text-transform:lowercase;letter-spacing:2px;margin-bottom:4rem}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.cursor{animation:blink 1s step-end infinite;font-weight:100}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.projects-section{opacity:0;transform:translateY(20px);transition:opacity .5s ease-out,transform .5s ease-out}.projects-section.show{opacity:1;transform:translateY(0)}.section-header{font-family:Fira Code,monospace;color:#e6f1ff;font-size:2rem;margin-bottom:2rem;position:relative;padding-left:1rem}.section-header:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:1.5rem;background-color:#64ffda}.games-header{margin-top:4rem}.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-bottom:2rem}@media (max-width: 768px){.projects{grid-template-columns:1fr}}.resume-card,.linkedin-card,.github-card{background-color:#112240;border-radius:8px;overflow:hidden;border:1px solid #233554;position:relative;cursor:pointer;transition:transform .2s ease-in-out;text-decoration:none}.resume-card:hover,.linkedin-card:hover,.github-card:hover{transform:translateY(-5px)}.resume-image,.linkedin-image,.github-image{width:100%;height:200px;overflow:hidden;border-bottom:1px solid #233554}.resume-image img,.linkedin-image img,.github-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease-in-out}.resume-card:hover .resume-image img,.linkedin-card:hover .linkedin-image img,.github-card:hover .github-image img{transform:scale(1.05)}.resume-content,.linkedin-content,.github-content{padding:1.5rem}.resume-content h2,.linkedin-content h2,.github-content h2{color:#e6f1ff;font-family:Fira Code,monospace;font-size:1.5rem;margin-bottom:1rem}.resume-content p,.linkedin-content p,.github-content p{color:#8892b0;line-height:1.6;font-size:1rem}.resume-options,.linkedin-options,.github-options{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#112240f2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;opacity:0;transition:opacity .2s ease-in-out}.resume-options.show,.linkedin-options.show,.github-options.show{opacity:1}.resume-button,.linkedin-button,.github-button{padding:.75rem 1.5rem;border-radius:4px;font-family:Fira Code,monospace;font-size:1rem;cursor:pointer;transition:all .2s ease-in-out;text-decoration:none;border:none}.resume-button.download{background-color:#64ffda;color:#0a192f}.resume-button.preview,.linkedin-button,.github-button{background-color:transparent;color:#64ffda;border:1px solid #64ffda}.resume-button:hover,.linkedin-button:hover,.github-button:hover{transform:translateY(-2px)}.project-card{background-color:#112240;border-radius:8px;overflow:hidden;text-decoration:none;transition:transform .2s ease-in-out;border:1px solid #233554}.project-card:hover{transform:translateY(-5px)}.project-image{width:100%;height:200px;overflow:hidden;border-bottom:1px solid #233554}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease-in-out}.project-card:hover .project-image img{transform:scale(1.05)}.project-content{padding:1.5rem}.project-card h2{color:#e6f1ff;font-family:Fira Code,monospace;font-size:1.5rem;margin-bottom:1rem}.project-card p{color:#8892b0;line-height:1.6;font-size:1rem}.game-card{width:100%;background-color:#112240;border-radius:8px;overflow:hidden;border:1px solid #233554;transition:transform .2s ease-in-out}.game-card:hover{transform:translateY(-5px)}.game-content{padding:1.5rem}.game-content h2{color:#e6f1ff;font-family:Fira Code,monospace;font-size:1.5rem;margin-bottom:1rem}.game-content p{color:#8892b0;line-height:1.6;font-size:1rem;margin-bottom:1.5rem}.rap-name-form{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.form-group{display:flex;flex-direction:column}.form-group input{padding:.5rem;border-radius:4px;border:1px solid #233554;background-color:#0a192f;color:#e6f1ff;font-family:Fira Code,monospace;font-size:.8rem}.form-group input:focus{outline:none;border-color:#64ffda}.generate-button{padding:.5rem 1rem;border-radius:4px;font-family:Fira Code,monospace;font-size:.9rem;cursor:pointer;transition:all .2s ease-in-out;background-color:#64ffda;color:#0a192f;border:none;margin-top:.5rem}.generate-button:hover{transform:translateY(-2px);background-color:#4cd8b2}.generate-button:disabled{background-color:#233554;cursor:not-allowed;transform:none}.error-message{color:#ff6b6b;margin-top:.5rem;font-size:.8rem}.rap-name-result{margin-top:1rem;padding:1rem;background-color:#0a192f;border-radius:4px;border:1px solid #233554;display:flex;flex-direction:column;gap:1rem}.rap-name-result h3{color:#64ffda;font-family:Fira Code,monospace;font-size:1rem;margin-bottom:.5rem}.generated-name{color:#e6f1ff;font-size:1.2rem;font-weight:700;text-align:center;margin-bottom:.5rem}.games-section{margin-top:4rem;opacity:0;transform:translateY(20px);transition:opacity .5s ease-out,transform .5s ease-out}.games-section.show{opacity:1;transform:translateY(0)}.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:2rem}.rapper-image{margin:1.5rem 0;border-radius:8px;overflow:hidden;border:1px solid #233554}.rapper-image img{width:100%;height:auto;display:block}.loading-message{color:#64ffda;text-align:center;margin:1rem 0;font-family:Fira Code,monospace;font-size:.9rem}.generate-button.image-button{background-color:transparent;color:#64ffda;border:1px solid #64ffda}.generate-button.image-button:hover{background-color:#64ffda1a}.generate-button.try-again{margin-top:.5rem}.generate-button.download-button{background-color:#64ffda;color:#0a192f;border:none;font-weight:700}.generate-button.download-button:hover{background-color:#4cd8b2}.canvas-container{position:relative;width:100%;height:300px;background-color:#0a192f;border-radius:4px;overflow:hidden;border:1px solid #233554}.canvas-container canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.game-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#0a192fe6}.game-overlay p{color:#e6f1ff;font-size:1.5rem;margin-bottom:1rem}.score{position:absolute;top:1rem;right:1rem;color:#64ffda;font-family:Fira Code,monospace;font-size:1.2rem}.skills-section{width:100%;margin-top:2rem;margin-bottom:2rem;padding:0 60px;position:relative}.skills-title{color:#e6f1ff;font-family:Fira Code,monospace;font-size:2rem;margin-bottom:2rem;text-align:center}.skills-carousel{position:relative;width:100%;overflow:visible;margin:0 auto}.skills-track{width:100%;position:relative;overflow:hidden}.skills-grid{display:flex;align-items:center;justify-content:center;gap:20px;padding:2rem 0;width:calc(100% + 40px);margin:0 -20px;will-change:transform}.skill-item{flex:0 0 20%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;transition:all .3s ease}.skill-item.center{transform:scale(1.15)}.skill-item.adjacent{transform:scale(1.05)}.skill-item.outer{transform:scale(.95);opacity:.8}.skill-icon{width:60px;height:60px;margin-bottom:.8rem;transition:transform .3s ease;display:block}.skill-name{color:#8892b0;font-family:Fira Code,monospace;font-size:1.1rem;text-align:center;margin-top:.5rem}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#64ffda;font-size:2.5rem;cursor:pointer;z-index:10;transition:color .3s ease;padding:1rem;border-radius:50%;width:3.5rem;height:3.5rem;display:flex;align-items:center;justify-content:center}.carousel-button:hover{color:#e6f1ff}.carousel-button.prev{left:-3.5rem}.carousel-button.next{right:-3.5rem}.carousel-dots{display:flex;justify-content:center;margin-top:1rem}.dot{height:8px;width:8px;margin:0 5px;background-color:#233554;border-radius:50%;cursor:pointer;transition:background-color .3s ease}.dot.active{background-color:#64ffda}@media (max-width: 768px){.skills-section{padding:0 40px}.skill-item{padding:1rem}.skill-icon{width:45px;height:45px}.skill-name{font-size:1rem}.carousel-button{font-size:2rem;width:3rem;height:3rem}.carousel-button.prev{left:-2.5rem}.carousel-button.next{right:-2.5rem}}@media (max-width: 480px){.skills-section{padding:0 30px}.skill-icon{width:35px;height:35px}.skill-name{font-size:.9rem}.carousel-button.prev{left:-2rem}.carousel-button.next{right:-2rem}}