:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;background-color:#1f2937;--primary-color: rgba(46, 197, 237, 1);--secondary-color: rgba(230, 72, 157, 1);--box-bg: rgb(42, 52, 65);--box-border: rgba(255, 255, 255, .15);--section-bg: rgba(255, 255, 255, .02);--text-color: #ffffff;--input-background: rgba(255, 255, 255, .05)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;color:var(--text-color)}h1{font-size:4em;line-height:1.1}h2{font-size:2.5em;line-height:1.2}h3{font-size:1.75em;line-height:1.3}h4{font-size:1.25em;line-height:1.4}*{margin:0;padding:0;border:0;font-family:sans-serif;font-size:1em;font-weight:400;font-style:normal;text-decoration:none;box-sizing:border-box}html{scroll-behavior:smooth;overflow-y:auto}#root{margin:0 auto;padding:0 2rem;text-align:center}section{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem 0;gap:4rem}.animated-gradient-text{position:relative;margin:0 auto;display:flex;max-width:fit-content;flex-direction:row;align-items:center;justify-content:center;border-radius:1.25rem;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .5s ease-out;overflow:hidden;cursor:pointer}.gradient-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-size:300% 100%;animation:gradient linear infinite;border-radius:inherit;z-index:0;pointer-events:none}.gradient-overlay:before{content:"";position:absolute;border-radius:inherit;width:calc(100% - 2px);height:calc(100% - 2px);left:50%;top:50%;transform:translate(-50%,-50%);background-color:#060606;z-index:-1}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.text-content{display:inline-block;position:relative;z-index:2;background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:gradient linear infinite}.hero-links{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.5rem;margin-top:1rem}.hero-links a{text-decoration:none;color:#ffffffde;font-weight:500;padding:.5rem 1rem;border-radius:.375rem;background-color:#3b82f61a;transform:translateY(0);transition:transform .1s linear}.hero-links a:hover{background-color:#3b82f633;transform:translateY(-4px);transition:transform .1s linear;cursor:pointer}.hero-cta{margin-top:3rem;animation:bounce 1s infinite ease-in}@keyframes bounce{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.about-main-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:stretch;margin:0 10rem}.about-left-column{display:grid;grid-template-rows:1fr 1fr;gap:2rem;height:100%}.about-left-outer-grid{display:flex;flex-direction:row;align-items:center;gap:2rem;background-color:var(--box-bg);border:1px solid var(--box-border);box-shadow:none;border-radius:1rem;overflow:hidden;transition:all .2s;padding:2rem}.about-left-outer-grid:hover{transform:translateY(-3px);box-shadow:0 6px 20px #2632381f}.about-emoji-grid,.about-text-grid{display:flex;align-items:center;justify-content:center}.about-emoji-grid{flex-shrink:0}.about-text-grid{flex:1}.about-emoji{font-size:5rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#6a11cb33,#2575fc33);border-radius:50%;width:7rem;height:7rem;box-shadow:0 2px 8px #26323814}.about-short-text{font-size:1rem;text-align:left;line-height:1.6;display:block;padding:0}.about-timeline-grid{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:2rem 1rem;background-color:var(--box-bg);border:1px solid var(--box-border);box-shadow:none;border-radius:1rem;transition:all .2s}.about-timeline-grid:hover{transform:translateY(-3px);box-shadow:0 6px 20px #2632381f}.about-timeline-grid h3{color:var(--primary-color);margin-bottom:1.5rem;font-weight:600}.timeline-list{list-style:none;margin:0;padding:0;position:relative;width:100%;display:flex;flex-direction:column;align-items:flex-start}.timeline-list:before{content:"";position:absolute;left:.6rem;top:1.25rem;width:3px;height:calc(100% - (2.6rem * var(--timeline-items, 3)));background-color:var(--primary-color);z-index:0}.timeline-item{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:2.5rem;position:relative;padding-top:.3rem;width:90%;transition:all .3s ease}.timeline-point{width:1.5rem;height:1.5rem;border-radius:50%;border:3px solid var(--text-color);background-color:var(--primary-color);box-shadow:0 0 .25rem #0003;flex-shrink:0;margin-right:1.2rem;margin-top:.2rem;transition:all .3s ease}.timeline-item:hover .timeline-point{transform:scale(1.2);box-shadow:0 6px 15px #0006;background-color:var(--secondary-color)}.timeline-content{display:flex;flex-direction:column;align-items:flex-start;padding-left:0;width:100%;transition:all .3s ease}.timeline-item:hover .timeline-content{transform:translate(6px)}.timeline-title{font-weight:600;font-size:1.15rem;color:var(--primary-color);text-align:left}.timeline-date{font-size:.98rem;margin-bottom:.3rem;text-align:left}.timeline-desc{font-size:1rem;text-align:left}.passions-container{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem}.passion-bloc{background-color:var(--box-bg);border:1px solid var(--box-border);box-shadow:none;border-radius:1rem;padding:1.5rem .5rem;transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.8rem}.passion-bloc:hover{transform:translateY(-3px);box-shadow:0 6px 20px #2632381f}.passion-emoji{font-size:3.5rem;display:block;color:var(--primary-color)}.passion-title{font-weight:600;color:var(--primary-color);margin:0;line-height:1.2;text-align:center}.contact-content{display:flex;justify-content:space-between;gap:4rem;width:100%;flex-wrap:wrap;justify-content:center;align-items:center}.contact-info{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:2rem}.speach span{font-weight:700;font-size:1.4rem;margin-bottom:.5rem}.contact-bubbles{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2em}.contact-bubble{display:flex;align-items:center;justify-content:flex-start;padding:1rem 1.5rem;transition:transform .15s linear}.contact-bubble:hover{transform:translateY(-.5rem)}.contact-bubble span{font-size:1.1rem;font-weight:500;color:var(--primary-color)}.contact-form{flex:1;padding:2rem;border-radius:16px;background-color:var(--box-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--box-border);min-width:400px}.form-group{display:flex;flex-direction:column;gap:1rem}.floating-label{position:relative;display:flex;flex-direction:column}.floating-label input,.floating-label textarea{padding:1rem .75rem .25rem;font-size:1rem;border:1px solid var(--box-border);border-radius:8px;background-color:var(--input-background);color:var(--text-color)}.floating-label label{position:absolute;left:.75rem;top:1rem;color:var(--text-color);background-color:var(--input-background);padding:0 .25rem;transition:all .2s ease;pointer-events:none}.floating-label input:focus+label,.floating-label input:not(:placeholder-shown)+label,.floating-label textarea:focus+label,.floating-label textarea:not(:placeholder-shown)+label{top:-.6rem;left:.5rem;font-size:.75rem;color:var(--primary-color)}button[type=submit]{padding:.75rem;background-color:var(--primary-color);color:#fff;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease}button[type=submit]:hover{background-color:var(--secondary-color)}.glare-hover{width:var(--gh-width);height:var(--gh-height);background:var(--gh-bg);border-radius:var(--gh-br);border:1px solid var(--gh-border);overflow:hidden;position:relative;display:grid;place-items:center}.glare-hover:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(var(--gh-angle),hsla(0,0%,0%,0) 60%,var(--gh-rgba) 70%,hsla(0,0%,0%,0),hsla(0,0%,0%,0) 100%);transition:var(--gh-duration) ease;background-size:var(--gh-size) var(--gh-size),100% 100%;background-repeat:no-repeat;background-position:-100% -100%,0 0}.glare-hover:hover{cursor:pointer}.glare-hover:hover:before{background-position:100% 100%,0 0}.glare-hover--play-once:before{transition:none}.glare-hover--play-once:hover:before{transition:var(--gh-duration) ease;background-position:100% 100%,0 0}form{display:flex;flex-direction:column;gap:1.5rem}.floating-label-group{position:relative;margin-bottom:1rem}.floating-input{width:100%;padding:1rem 1rem .5rem;border:2px solid var(--box-border);border-radius:8px;font-size:1rem;background-color:var(--box-bg);color:var(--text-color);transition:all .3s ease;box-sizing:border-box}.floating-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f61a}.floating-label{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1rem;color:#fff;transition:all .3s ease;pointer-events:none;background-color:var(--box-bg);z-index:1}.floating-label.active{top:0;transform:translateY(-50%);font-size:.8rem;color:var(--primary-color);background-color:var(--box-bg);padding:0 .5rem;border-radius:4px}textarea.floating-input{min-height:120px;resize:vertical}textarea.floating-input+.floating-label{top:1.5rem;transform:none}textarea.floating-input+.floating-label.active{top:0;transform:translateY(-50%)}button[type=submit]{padding:1rem;background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));color:#fff;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:1rem;margin-top:1rem}button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 10px 20px #3b82f64d}@keyframes pulse{0%{opacity:1}50%{opacity:.3}to{opacity:1}}#hero{gap:0}.hero-title{font-size:2rem;font-weight:600;color:#ffffffe6;text-align:center;margin:1.5rem 0 2.5rem;line-height:1.4;letter-spacing:.025em}.dot{animation:pulse 1.5s linear infinite;height:max-content}.hero-description{display:flex;flex-direction:row;justify-content:center;align-items:center;border:.125rem solid rgba(0,255,0,.3);border-radius:3rem;background-color:#3a75004d;width:fit-content;height:fit-content;padding:1rem 2rem;margin:2rem 0}.hero-description p{margin:0;padding-right:1rem;font-size:1.25rem;color:#fff;line-height:1.6}.hero-links{display:flex;justify-content:center;align-items:center;gap:2rem;margin:3rem 0;padding:0 2rem}.hero-link{display:flex;align-items:center;justify-content:center;padding:1rem;border-radius:50%;transition:transform .2s ease;width:4rem;height:4rem;min-width:4rem;min-height:4rem}.hero-link:hover{transform:scale(1.1)}.projects-navigation{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;justify-content:center;overflow:hidden}.projects-content{display:flex;flex-direction:column;gap:1rem;align-items:left;text-align:left;justify-content:center;min-width:30%;max-width:85%;margin:0 auto;border:#2574fc37 2px solid;border-radius:1rem;padding:20px;background-color:#0000801a}.project-links{display:flex;align-items:center;gap:1rem}.project-links div{display:flex;align-items:center;justify-content:center;gap:.5rem}.site-link{color:#fff;padding:.5rem 1rem;border-radius:.5rem;background-color:#343434;transition:background-color .3s ease}.site-link a{color:#fff;text-decoration:none}.site-link:hover{background-color:#494949;color:#fff;transition:background-color .3s ease;cursor:pointer}.code-link{color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:.5rem;background-color:#343434;transition:background-color .3s ease}.code-link a{color:#fff;text-decoration:none}.code-link:hover{background-color:#494949;color:#fff;transition:background-color .3s ease;cursor:pointer}.techs{display:flex;flex-wrap:wrap;width:fit-content;gap:.5rem}.techs div{display:flex;align-items:center;justify-content:center;gap:.5rem;background-color:#0000801a;border:1px solid #2574fc37;color:#fff;padding:.25rem .5rem;border-radius:.25rem;font-size:.875rem}.tech-logo{width:1.5rem;height:1.5rem;display:inline-block;background-size:cover;background-position:center}.img-display{width:40rem;aspect-ratio:16 / 9;border:#30363f 10px solid;border-radius:.75rem;background:#30363f;overflow:hidden;position:relative;transform:var(--current-transform, perspective(1200px) rotateX(10deg) rotateY(-20deg) rotateZ(5deg));animation:idle 5s infinite ease-in-out;margin:2.5rem 2rem;transition:transform .5s ease,opacity .5s ease}@keyframes idle{0%{transform:perspective(1200px) rotateX(10deg) rotateY(-20deg) rotate(5deg)}50%{transform:perspective(1200px) rotateX(15deg) rotateY(-22deg) rotate(8deg)}to{transform:perspective(1200px) rotateX(10deg) rotateY(-20deg) rotate(5deg)}}.img-display.transitioning-next{opacity:0;transform:translate(200px) rotateY(-20deg)}.img-display.transitioning-prev{opacity:0;transform:translate(-200px) rotateY(20deg)}@keyframes slideOutRight{0%{transform:var(--current-transform, perspective(1200px) rotateX(10deg) rotateY(-20deg) rotateZ(5deg)) translate(0);opacity:1}to{transform:var(--current-transform, perspective(1200px) rotateX(10deg) rotateY(-20deg) rotateZ(5deg)) translate(200px);opacity:0}}@keyframes slideInFromLeft{0%{transform:perspective(1200px) rotateX(10deg) rotateY(-20deg) rotate(5deg) translate(-200px);opacity:0}to{transform:perspective(1200px) rotateX(10deg) rotateY(-20deg) rotate(5deg) translate(0);opacity:1}}@keyframes slideOutLeft{0%{transform:var(--current-transform, perspective(1200px) rotateX(10deg) rotateY(-20deg) rotateZ(5deg)) translate(0);opacity:1}to{transform:var(--current-transform, perspective(1200px) rotateX(10deg) rotateY(-20deg) rotateZ(5deg)) translate(-200px);opacity:0}}@keyframes slideInFromRight{0%{transform:perspective(1200px) rotateX(10deg) rotateY(-20deg) rotate(5deg) translate(200px);opacity:0}to{transform:perspective(1200px) rotateX(10deg) rotateY(-20deg) rotate(5deg) translate(0);opacity:1}}.mac-window-header{position:absolute;top:0;left:0;width:100%;height:2rem;background:linear-gradient(180deg,#30363f 80%,#30363f);display:flex;align-items:center;padding-left:1rem;gap:.5rem;z-index:2;box-sizing:border-box;border-bottom:1px solid #23232a}.mac-dot{width:.85rem;height:.85rem;border-radius:50%;display:inline-block;margin-right:.3rem;border:1px solid #444;box-shadow:0 1px 2px #0000002e}.mac-dot.red{background:#ff5f56;border-color:#a33a36}.mac-dot.yellow{background:#ffbd2e;border-color:#a6861a}.mac-dot.green{background:#27c93f;border-color:#157a22}.img-display img{display:block;width:100%;height:calc(100% - 2.2rem);object-fit:cover;border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem;margin-top:2rem;background:#23232a;transition:transform .5s ease,opacity .5s ease}.nav-button:disabled{opacity:.6;cursor:not-allowed}.project-indicators{display:flex;justify-content:center;align-items:center;gap:.5rem}.project-indicators .indicator{transition:opacity .2s ease}.project-indicators .indicator:hover{cursor:pointer;opacity:.3}ul{display:flex;justify-content:center;align-items:center;list-style:none;padding:0}.projects-indicator-list li{cursor:pointer;opacity:.6;transition:opacity .2s ease}.project-indicator-item{opacity:.3;transition:opacity .2s ease}.active{opacity:1}.techs-list{position:relative;margin:auto}.tech-bubble{position:absolute;top:50%;left:50%;transform-origin:center;transform:translate(-50%,-50%)}.tech-bubble-inner{position:relative;display:flex;flex-direction:column;align-items:center;transition:transform .3s ease,filter .3s ease}.tech-bubble-inner:hover img{filter:brightness(1.2) contrast(1.1) saturate(1.3);transform:scale(1.1);transition:transform .3s ease,filter .3s ease}.tech-bubble-inner:hover span{filter:brightness(1.2) contrast(1.1) saturate(1.3);transform:translate(-50%,100%);transition:transform .3s ease,filter .3s ease}.tech-bubble img{width:7rem;height:7rem;border-radius:50%;object-fit:contain;box-shadow:inset 0 4px 12px #ffffff4d,inset 0 -4px 8px #0006,0 0 12px #0000004d;filter:brightness(1.1) contrast(1.05) saturate(1.2);background-color:#ffffff0d;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);filter:blur(2px);transition:transform .3s ease,filter .3s ease}.tech-bubble img:hover{transform:scale(1.1);filter:brightness(1.2) contrast(1.1) saturate(1.3)}.tech-bubble span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;background:#0009;padding:.3rem .6rem;border-radius:.5rem;font-size:1rem;color:#fff;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 6px #0000004d;z-index:1;transition:transform .3s ease,filter .3s ease}.tech-bubble:nth-child(1){transform:translate(-50%,-50%) rotate(0) translate(20rem) rotate(0)}.tech-bubble:nth-child(2){transform:translate(-50%,-50%) rotate(45deg) translate(20rem) rotate(-45deg)}.tech-bubble:nth-child(3){transform:translate(-50%,-50%) rotate(90deg) translate(20rem) rotate(-90deg)}.tech-bubble:nth-child(4){transform:translate(-50%,-50%) rotate(135deg) translate(20rem) rotate(-135deg)}.tech-bubble:nth-child(5){transform:translate(-50%,-50%) rotate(180deg) translate(20rem) rotate(-180deg)}.tech-bubble:nth-child(6){transform:translate(-50%,-50%) rotate(225deg) translate(20rem) rotate(-225deg)}.tech-bubble:nth-child(7){transform:translate(-50%,-50%) rotate(270deg) translate(20rem) rotate(-270deg)}.tech-bubble:nth-child(8){transform:translate(-50%,-50%) rotate(315deg) translate(20rem) rotate(-315deg)}
