:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--nav-highlight: #00F3DB}html{scroll-behavior:smooth;font-size:16px}body{margin:0;display:flex;min-width:320px;min-height:100vh}html,body{overflow:hidden}#scene-container{position:absolute;z-index:-10;width:100%;height:100%}.section-title{color:var(--heading-color);text-align:left}nav{display:flex inline;flex-direction:column;width:fit-content;height:100vh;place-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:absolute;z-index:1}#logo{width:50px;height:40px;padding:50px 0;margin-bottom:10vh;border-radius:50%}nav ul{display:flex;flex-direction:column;gap:50px;padding-left:1px}nav ul li{list-style-type:none;text-align:center;width:100px}nav ul li:hover{outline:solid 1px var(--nav-highlight)}nav ul li a{display:block;width:100%;height:100%;text-decoration:none;color:#fff}nav ul li a:hover{color:var(--nav-highlight)}nav a#curPage{color:var(--nav-highlight)}@media screen and (max-width: 500px){nav{display:flex;flex-direction:row;justify-content:space-between;width:100vw;height:auto}#logo{position:absolute;top:0;left:0;padding:10px;margin-bottom:0}nav ul{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;justify-content:center;place-items:center;width:100%}nav ul>:first-child{margin-left:50px}}#main-container{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;width:100vw;height:100vh;gap:clamp(10px,10vw,100px)}@media screen and (max-width: 500px){#main-container{flex-direction:column;gap:0}}#hero-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;place-items:center;justify-content:center;padding:50px 10vw}#intro{display:flex;flex-direction:column;justify-content:center;width:45vw;padding-left:40px}#intro h4{margin:0;font-size:1rem;color:#faebd7}#intro h1{margin-top:0;font-size:4rem}#intro h2{font-size:2rem;color:#faebd7;text-align:center;text-align:left}#intro h1 span{color:beige}#hero-wrapper img{width:clamp(200px,45vw,300px);height:clamp(200px,45vw,300px);object-fit:contain;border-radius:50%;border:dashed 1px var(--nav-highlight);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);filter:drop-shadow(1px 2px 1px var(--nav-highlight));place-self:center}#img-slogan{display:flex;flex-direction:column}#img-slogan h2{font-size:1rem;color:#faebd7;text-align:center}@media screen and (max-width: 500px){#hero-wrapper{flex-direction:column;padding-top:150px}#hero-wrapper{text-align:center}#intro{padding-left:0;width:100%}}@media screen and (max-width: 976px){#intro h1{font-size:3rem}}@keyframes slideIn{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}.section-wrapper{animation:slideIn 1s ease-out;display:flex;place-items:center;justify-content:center}#about{width:100vw;height:100vh;display:flex;flex-direction:row;flex-wrap:wrap;place-items:center;justify-content:space-evenly;padding-left:40px}#intro-container{width:35vw;padding-left:50px}#intro-container h4{margin-bottom:0;font-size:clamp(.5rem,2vw,.8rem)}#intro-container h1{margin-top:0}#intro-container p{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:10px}#services{width:35vw;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(20px,20px + 2vw,100px);place-items:center;justify-content:center}.service-container{position:relative;width:clamp(100px,100px + 4vw,200px);height:clamp(150px,150px + 4vw,250px);display:flex;flex-direction:column;justify-content:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;border:2px solid transparent;border-radius:20px;background-image:linear-gradient(to right,#0c3148,#011d2f),radial-gradient(circle at top left,#0ff,green);background-clip:content-box,border-box}.service-container img{width:50px;height:50px;place-self:center}.three-d-container{width:100px;height:100px;place-self:center;clip-path:inset(10% 0 10% 0)}.three-d-container>div{height:150%!important;display:flex}.service-container h3{text-align:center;font-size:clamp(.8rem,1.5vw,1rem)}@media screen and (max-width: 500px){#about{place-items:normal;padding-left:0;height:fit-content;gap:50px}#intro-container{width:100vw;padding:110px 5vw 0}#services{width:100vw;justify-content:space-evenly;place-items:start}}#work-container{display:flex;flex-direction:column;align-items:center;width:100vw;height:100vh;margin-left:20%;overflow:hidden}#work-exp{display:flex;flex-direction:column;place-self:start;padding-top:100px}#work-exp h4{margin-bottom:0;font-size:clamp(.5rem,2vw,.8rem)}#work-exp h1{margin-top:0}@media screen and (max-width: 500px){#work-container{padding:100px 0 0;margin:0 5%;height:auto}#work-exp{padding-top:0}}#customtimeline-container{display:flex;flex-direction:column;place-self:center;overflow:auto;scrollbar-width:thin;scrollbar-color:cyan transparent;gap:20px;height:70vh;min-height:400px;width:auto}.content-container{width:400px;height:fit-content;border-radius:10px;box-shadow:-1px -1px #0ff;background-image:radial-gradient(circle at top left,#0c3148,#011d2f);scrollbar-width:thin;scrollbar-color:cyan transparent;cursor:pointer;transform:scale(.9)}.content-container:hover{transform:scale(1);transition:all .3s ease-in-out}.content-container *{display:block;text-align:left;height:fit-content;width:fit-content}.MuiTimelineConnector-root{flex-grow:1}@media screen and (max-width: 700px){.content-container{width:auto;transform:scale(.7)}.MuiTimelineOppositeContent-root{display:none}}#box{width:70vw;max-width:400px;min-width:280px;height:fit-content;border-radius:10px;outline:thin ridge cyan;background-image:radial-gradient(circle at center,#0c3148,#011d2f);scrollbar-width:thin;scrollbar-color:cyan transparent;position:relative}#box button{position:absolute;top:5px;right:0;width:fit-content;height:fit-content;color:#0ff;align-self:flex-end}.MuiModal-backdrop{background-color:#0000004d!important}.project-section{display:flex;flex-direction:column;gap:20px;width:80vw;height:calc(100vh - 100px);padding:20px 0 20px 100px;place-items:center}#project-intro{display:flex;flex-direction:column;place-self:start;padding-top:100px;padding-left:40px}#project-intro h4{margin-bottom:0;font-size:clamp(.5rem,2vw,.8rem)}#project-intro h1{margin-top:0}.projects-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:100px;width:90%;height:70vh;overflow:auto;scrollbar-width:thin;scrollbar-color:cyan transparent;padding:20px 10px;border-radius:10px;border-top:1px solid cyan;border-bottom:1px solid cyan;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:grow 1.3s ease-in-out .5s forwards;opacity:0}@keyframes grow{0%{opacity:.5;height:0;width:0}50%{opacity:1;height:0;width:90%}to{opacity:1;height:70vh;width:90%}}.project{display:flex;flex-direction:column;width:100%;height:auto}.project-content{display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;place-items:start center;place-content:start center}.project-image{width:clamp(150px,30vw,250px);filter:drop-shadow(-.5px -.5px .2px cyan);border-radius:15% 5px}.project-details{display:flex;flex-direction:column;width:clamp(300px,100%,40vw);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.project-details p{margin-top:0}.project-name{font-size:1.2rem}.project-buttons{display:flex;justify-content:space-around}.project-buttons button{background:transparent;padding:5px 20px;text-decoration:none;border-radius:5px;border-top:1px solid cyan;border-left:1px solid cyan;border-bottom:transparent;border-right:transparent;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:1px 1px 1px gray}.project-buttons button:hover{filter:brightness(1.2);background-color:#40e0d0;color:#000;transition:background-color .3s ease-in-out;cursor:pointer}.technologies{display:flex;flex-wrap:wrap;gap:20px;align-items:center}.technologies>p{width:100%;font-size:smaller}.technology-tag{width:40px;height:40px;object-fit:contain}.technology-tag:hover{scale:1.3;transition:scale .2s ease-in-out}.tech-name{text-align:center;font-size:xx-small}@media screen and (max-width: 500px){.project-section{gap:20px;padding:0;width:100vw;height:100vh;place-items:center}#project-intro{place-self:center;padding-top:110px;padding-left:0;text-align:center}.project:last-of-type{margin-bottom:50px}}