:root{--color-portal-green: #97ce4c;--color-portal-rim: #e89ac7;--color-neon-green: #b2d038;--color-toxic-green: #44aa44;--color-space-blue: #24325fff;--color-dark-bg: #1a1a1a;--color-black: #050505;--color-white: #ffffff;--color-rick-hair: #aaddff;--color-morty-yellow: #fff355;--color-saul-accent: #e4bb2e;--font-display: "Anton", impact, sans-serif;--font-creep: "Creepster", cursive;--font-body: "Inter", system-ui, sans-serif;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 32px;--spacing-xl: 64px}*{box-sizing:border-box}body{margin:0;background-color:var(--color-dark-bg);color:var(--color-white);font-family:var(--font-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{margin:0;font-weight:400}a{color:inherit;text-decoration:none}button{cursor:pointer}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--color-dark-bg)}::-webkit-scrollbar-thumb{background:var(--color-portal-green);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--color-neon-green)}#root{width:100%;min-height:100vh;margin:0;padding:0}.app-container{display:flex;flex-direction:column;min-height:100vh;position:relative;z-index:1}.portal-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;overflow:hidden;background:radial-gradient(circle at center,#1a2a1a 0%,var(--color-black) 80%)}.portal-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:5px solid transparent;box-shadow:0 0 50px var(--color-portal-green),inset 0 0 20px var(--color-toxic-green);opacity:.6}.ring-1{width:60vh;height:60vh;border-top-color:var(--color-portal-green);border-bottom-color:var(--color-neon-green);animation:spin 10s linear infinite;filter:blur(2px)}.ring-2{width:50vh;height:50vh;border-left-color:var(--color-toxic-green);border-right-color:var(--color-portal-green);animation:spin-reverse 8s linear infinite}.ring-3{width:80vh;height:80vh;border:2px dashed var(--color-portal-green);animation:pulse-spin 20s linear infinite;opacity:.2}.stars{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(white,rgba(255,255,255,.2) 2px,transparent 0),radial-gradient(white,rgba(255,255,255,.15) 1px,transparent 0),radial-gradient(white,rgba(255,255,255,.1) 2px,transparent 0);background-size:550px 550px,350px 350px,250px 250px;opacity:.3}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes spin-reverse{0%{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0)}}@keyframes pulse-spin{0%{transform:translate(-50%,-50%) rotate(0) scale(1)}50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.05)}to{transform:translate(-50%,-50%) rotate(360deg) scale(1)}}.announcement-bar{background:var(--color-toxic-green);color:var(--color-black);text-align:center;padding:.5rem;font-family:var(--font-display);font-size:1.2rem;letter-spacing:1px;z-index:100;position:relative;box-shadow:0 0 10px var(--color-toxic-green);animation:pulse-alert 2s infinite}@keyframes pulse-alert{0%{background-color:var(--color-toxic-green)}50%{background-color:var(--color-portal-green)}to{background-color:var(--color-toxic-green)}}.hero{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;z-index:2;font-family:var(--font-display);text-align:center}.cursor{animation:blink 1s infinite;color:var(--color-portal-green);margin-left:5px}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.intro-text{font-family:var(--font-creep);font-size:2rem;color:var(--color-neon-green);margin-bottom:1rem;letter-spacing:2px;text-shadow:0 0 10px var(--color-toxic-green);animation:float 3s ease-in-out infinite}.main-title{font-size:6rem;line-height:1;display:flex;flex-direction:column;text-transform:uppercase;transform:skew(-5deg);margin-bottom:2rem}.better,.call{font-style:italic;-webkit-text-stroke:2px var(--color-portal-green);color:transparent;position:relative}.better:after,.call:after{content:attr(class)}.iwan{font-size:8rem;color:var(--color-white);text-shadow:3px 3px 0 var(--color-black),6px 6px 0 var(--color-portal-green),9px 9px 0 var(--color-space-blue);font-style:italic;font-weight:700;animation:glitch 5s infinite}.subtitle{font-family:var(--font-body);font-size:1.5rem;color:var(--color-rick-hair);margin-bottom:3rem;letter-spacing:1px}.cta-button{background:var(--color-saul-accent);color:var(--color-black);font-family:var(--font-display);font-size:2rem;padding:1rem 3rem;border:none;transform:skew(-10deg);transition:all .3s;box-shadow:5px 5px 0 var(--color-black);text-transform:uppercase}.cta-button:hover{transform:skew(-10deg) translate(-2px,-2px);box-shadow:7px 7px 0 var(--color-portal-green);background:var(--color-white);color:var(--color-toxic-green)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes glitch{2%,64%{transform:skew(-5deg)}4%,60%{transform:skew(-5deg) translate(-2px)}62%{transform:skew(10deg) translate(2px);filter:hue-rotate(90deg)}}@media(max-width:768px){.main-title{font-size:4rem}.iwan{font-size:5rem}}.projects-section{padding:4rem 2rem;position:relative;z-index:2;background-color:#050505cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section-title{font-family:var(--font-display);font-size:4rem;text-align:center;margin-bottom:3rem;color:var(--color-white);text-transform:uppercase}.highlight{color:var(--color-portal-green);text-shadow:0 0 10px var(--color-neon-green)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;max-width:1200px;margin:0 auto}.project-card{background:#111;border:1px solid var(--color-portal-green);border-radius:var(--spacing-sm);overflow:hidden;transition:transform .3s,box-shadow .3s;position:relative}.project-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #97ce4c33}.card-visual{height:200px;background:#222;position:relative;border-bottom:1px solid var(--color-toxic-green)}.card-content{padding:1.5rem}.category-badge{font-size:.8rem;color:var(--color-saul-accent);text-transform:uppercase;letter-spacing:1px;font-weight:700;display:block;margin-bottom:.5rem}.project-card h3{font-family:var(--font-display);font-size:1.8rem;margin:.5rem 0;color:var(--color-white)}.project-card p{color:#ccc;font-size:.95rem;line-height:1.5;margin-bottom:1.5rem}.tech-stack{position:absolute;top:10px;right:10px;display:flex;gap:5px}.tech-badge{background:#000c;color:var(--color-neon-green);padding:4px 8px;font-size:.7rem;border-radius:4px;border:1px solid var(--color-neon-green)}.view-btn{width:100%;padding:.8rem;background:transparent;color:var(--color-neon-green);border:1px solid var(--color-neon-green);font-family:var(--font-display);text-transform:uppercase;font-size:1.2rem;transition:all .3s}.view-btn:hover{background:var(--color-neon-green);color:var(--color-black)}.about-section{padding:6rem 2rem;background:var(--color-black);color:var(--color-white);text-align:center;position:relative}.about-content{max-width:800px;margin:0 auto}.about-content h2{font-family:var(--font-display);font-size:3.5rem;margin-bottom:2rem;text-transform:uppercase;transform:skew(-2deg)}.bio{font-size:1.5rem;line-height:1.6;margin-bottom:2rem;font-family:var(--font-display);color:var(--color-saul-accent);font-style:italic}.bio-alt{font-family:var(--font-body);color:var(--color-rick-hair);margin-bottom:3rem;font-size:1.1rem}.skills-container{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}.skill-item{background:transparent;border:1px solid var(--color-toxic-green);color:var(--color-toxic-green);padding:.5rem 1.5rem;font-family:var(--font-display);font-size:1.2rem;text-transform:uppercase;transition:all .3s;cursor:default}.skill-item:hover{background:var(--color-toxic-green);color:var(--color-black);box-shadow:0 0 15px var(--color-toxic-green);transform:scale(1.1) rotate(2deg)}.contact-section{min-height:80vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4rem 2rem;background:radial-gradient(circle at center,#222,#000);position:relative}.contact-card{background:#141414e6;border:2px solid var(--color-saul-accent);padding:3rem;max-width:600px;width:100%;border-radius:2px;box-shadow:10px 10px 0 var(--color-portal-green);transform:rotate(-1deg)}.contact-card h2{font-family:var(--font-display);font-size:2.5rem;text-align:center;margin-bottom:2rem;color:var(--color-white)}.call-me{color:var(--color-saul-accent);display:block;font-size:3rem;text-shadow:2px 2px 0 #000}.input-group{margin-bottom:1.5rem}input,textarea{width:100%;padding:1rem;background:#111;border:1px solid #333;color:var(--color-white);font-family:var(--font-body);font-size:1rem;transition:all .3s}input:focus,textarea:focus{outline:none;border-color:var(--color-neon-green);box-shadow:0 0 10px #b2d0384d;background:#000}.submit-btn{width:100%;padding:1rem;background:var(--color-portal-green);color:#000;font-family:var(--font-display);font-size:1.5rem;border:none;text-transform:uppercase;font-weight:700;transition:all .3s}.submit-btn:hover{background:var(--color-neon-green);box-shadow:0 0 20px var(--color-portal-green);letter-spacing:2px}.whatsapp-btn{display:block;width:100%;padding:1rem;background:#25d366;color:#fff;font-family:var(--font-display);font-size:1.2rem;text-align:center;text-decoration:none;border-radius:4px;text-transform:uppercase;transition:all .3s;box-shadow:0 4px 10px #25d3664d;margin-top:1rem}.whatsapp-btn:hover{background:#128c7e;transform:translateY(-2px)}.status-msg{color:var(--color-neon-green);text-align:center;margin-bottom:1rem;font-weight:700}.footer-credits{margin-top:4rem;color:#555;font-size:.9rem;text-align:center}.admin-container{width:100%;padding:4rem 2rem;max-width:1200px;margin:0 auto;color:var(--color-white)}.admin-container h1{font-family:var(--font-display);text-align:center;margin-bottom:3rem;color:var(--color-portal-green)}.logout-btn{background:transparent;border:1px solid var(--color-portal-green);color:var(--color-portal-green);padding:.5rem 1.5rem;cursor:pointer;font-family:var(--font-display);transition:all .3s ease}.logout-btn:hover{background:var(--color-portal-green);color:#000;box-shadow:0 0 15px var(--color-portal-green)}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.admin-card{background:#1a1a1a;border:1px solid #333;padding:2rem;border-radius:8px}.full-width{grid-column:1 / -1}.admin-card form{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem;background:#222;padding:1rem}.admin-card form input,.admin-card form textarea{background:#111;border:1px solid #444;color:#fff;padding:.5rem;font-family:monospace}.admin-card form button{background:var(--color-portal-green);border:none;padding:.5rem;font-weight:700;cursor:pointer;text-transform:uppercase;transition:all .3s ease}.admin-card form button:hover{background:var(--color-neon-green);box-shadow:0 0 10px var(--color-neon-green)}.admin-list{list-style:none;padding:0}.admin-list li{display:flex;justify-content:space-between;padding:.5rem;border-bottom:1px solid #333;align-items:center}.list-item button{background:#f44;color:#fff;border:none;padding:.2rem .8rem;cursor:pointer;font-weight:700;font-family:monospace}.list-item button:hover{background:red}.message-item{background:#111;border-left:3px solid var(--color-saul-accent);padding:1rem;margin-bottom:1rem}.msg-header{display:flex;justify-content:space-between;font-size:.8rem;color:#888;margin-bottom:.5rem}.login-container{height:100vh;display:flex;justify-content:center;align-items:center;background:#000}.login-card{background:#111;border:2px solid var(--color-toxic-green);padding:3rem;width:100%;max-width:400px;text-align:center;box-shadow:0 0 20px var(--color-toxic-green)}.login-card h2{color:var(--color-portal-green);font-family:var(--font-display);margin-bottom:2rem;letter-spacing:2px}.login-card input{margin-bottom:1rem;width:100%;padding:1rem;background:#222;border:1px solid #333;color:#fff;font-family:monospace}.login-card input:focus{border-color:var(--color-portal-green);outline:none}.login-card button{width:100%;padding:1rem;background:var(--color-portal-green);border:none;font-family:var(--font-display);font-size:1.2rem;cursor:pointer;transition:all .3s}.login-card button:hover{background:var(--color-neon-green);letter-spacing:2px}.error-msg{color:red;font-family:monospace;margin-bottom:1rem}
