:root{--bg-color:18, 13, 23;--off-white:245, 245, 245;--accent:200, 190, 216;--purple:162, 147, 255;--accent-back:34, 32, 45;--tooltip-text-color:white}html{scroll-behavior:smooth}body{background-color:rgb(var(--bg-color));margin:0}.overlay{z-index:10;pointer-events:none;width:100%;height:100dvh;position:fixed;overflow:hidden}.tooltip{z-index:-1;opacity:0;transition:opacity .25s linear;display:none}.tooltip-text{color:var(--tooltip-text-color);z-index:100;white-space:nowrap;background-color:rgb(var(--bg-color));border-radius:6px;margin:0;padding:6px 9px;font-family:Roboto Mono,monospace;font-size:18px;font-style:normal;font-weight:600;position:absolute;transform:translate(-50%)}.tooltip-arrow{border:6px solid #0000;border-top-color:rgb(var(--bg-color));width:0;height:0;position:absolute;transform:translate(-50%)}.grain{opacity:.3;mix-blend-mode:exclusion;background-image:url(../images/bg-texture.png);width:300%;height:300%;animation:.75s step-end infinite grain;position:relative}@keyframes grain{0%{background-position:0 0}33%{background-position:-500px 500px}66%{background-position:500px -500px}to{background-position:1000px 1000px}}.fades{width:100%;height:100%;position:absolute}.fade{width:100%;height:20vh;position:absolute}.fade-top{background:linear-gradient(#000000bf,#0000);top:0}.fade-bottom{background:linear-gradient(#0000,#000000bf);bottom:0}@media screen and (width<=850px){.fade-top{background:linear-gradient(#0006,#0000)}.fade-bottom{background:linear-gradient(#0000,#0006)}}@media (hover:hover) and (pointer:fine){.tooltip{display:block}}.unselectable{-moz-user-select:-moz-none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}.bold{font-weight:700}.light-purple{color:rgb(var(--accent))}.purple{color:rgb(var(--purple))}.bounce-char{cursor:-webkit-grab;cursor:grab;position:relative;bottom:0}.section-wrapper{flex-direction:column;display:flex}.section{margin-bottom:1.5vh}.section-header{z-index:100;pointer-events:none;justify-content:flex-start;padding-inline:4vh;display:flex;position:sticky;top:0}.section-link{text-decoration:none}.section-title{width:fit-content;color:rgb(var(--off-white));opacity:calc(var(--top-percent) * var(--top-percent) * var(--top-percent) * .65 + .1);margin:0;padding-top:4vh;font-family:Merriweather,Cambria,Cochin,Georgia,Times,Times New Roman,serif;font-size:64px;font-style:normal;font-weight:600;line-height:54px;transition:opacity .1s linear}.section-header-right{margin-left:auto}.section-content{opacity:calc(var(--top-percent) * var(--top-percent) * var(--top-percent) * 2 + .1);padding-top:4vh;padding-bottom:4vh;transition:opacity .1s linear;overflow:hidden}@media screen and (width<=850px){.section-header{padding-inline:3vh}.section-title{padding-top:1.5vh;font-size:48px}.section-content{margin-top:0}}@media screen and (width<=400px){.section-title{font-size:46px}}#intro-content{margin-top:var(--header-offset);box-sizing:border-box;justify-content:center;align-items:center;gap:50px;min-height:100svh;display:flex;position:relative}.intro-img-wrapper{aspect-ratio:1;position:relative}.intro-img{perspective:15px;z-index:3;width:350px;cursor:-webkit-grab;cursor:grab;position:relative}.intro-img>img{aspect-ratio:1;-o-object-fit:cover;object-fit:cover;-webkit-user-drag:none;user-drag:none;border-radius:50%;width:100%;transition:transform .15s linear;display:block}.social-bubble{aspect-ratio:1;background-color:rgba(var(--accent-back), .75);z-index:3;width:20%;height:20%;box-shadow:inset 0 0 0 3px rgba(var(--accent), .5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:50%;transition:transform .15s ease-out,box-shadow .15s ease-out,background-color .15s ease-out;position:absolute;transform:translate(-50%,-50%)}.social-bubble>img{opacity:.75;cursor:pointer;-webkit-user-drag:none;user-drag:none;width:50%;height:50%;transition:opacity .15s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.github-bubble{top:95%;left:25%}.linkedin-bubble{top:100%;left:50%}.email-bubble{top:95%;left:75%}.intro-text{text-align:center;max-width:525px;color:rgb(var(--off-white));z-index:2;position:relative}.intro-text>h3{--font-size:32px;font-family:Merriweather,Cambria,Cochin,Georgia,Times,Times New Roman,serif;font-weight:400;font-size:var(--font-size);margin:0}.intro-text>p{margin:32px 0 0;font-family:Merriweather,Cambria,Cochin,Georgia,Times,Times New Roman,serif;font-size:24px}.intro-link{color:rgb(var(--off-white));transition:text-decoration-color .25s ease-out,color .25s ease-out}.intro-btns{flex-wrap:wrap;justify-content:center;gap:32px;margin-top:32px;display:flex}.intro-btn{box-shadow:inset 0 0 0 3px rgba(var(--accent), .5);color:rgba(var(--off-white), .75);background-color:rgba(var(--accent-back), .75);border-radius:8px;padding:7px 17px 9px;font-family:Roboto Mono,monospace;font-size:28px;font-weight:600;text-decoration:none;transition:background-color .15s ease-out,color .15s ease-out,box-shadow .15s ease-out,transform .15s ease-out}.intro-btns.mobile{display:none}.intro-bubble{aspect-ratio:1;background-color:rgba(var(--accent-back), .75);z-index:-1;filter:blur(2px);border-radius:50%;position:absolute;transform:translate(-50%)translateY(-50%)}.intro-bubble.mobile{display:none}.intro-animation{pointer-events:none;z-index:10;width:100%;height:100%;position:absolute}.intro-animation-back{background:linear-gradient(180deg, rgba(var(--bg-color), 1) 0%, rgba(var(--accent-back), 1) 50%, rgba(var(--bg-color), 1) 100%);opacity:1;width:100%;height:100%;animation:1.75s ease-in-out 1s forwards intro-back;position:absolute}@keyframes intro-back{0%{opacity:1}to{opacity:0}}.intro-animation-text{z-index:10;white-space:nowrap;width:min-content;color:rgb(var(--off-white));opacity:.8;margin:0;font-family:Merriweather,Cambria,Cochin,Georgia,Times,Times New Roman,serif;font-size:10vw;transition:transform .75s ease-in-out;animation:.75s ease-out intro-text-fade-in,1s ease-in-out 2s forwards intro-text-fade-out;position:relative;top:50%;left:50%;transform:translate(-50%)translateY(-50%)scale(1)}@keyframes intro-text-fade-out{0%{color:rgb(var(--off-white));opacity:.8}to{color:rgb(var(--purple));opacity:0}}@-webkit-keyframes intro-text-fade-in{0%{opacity:0;transform:translate(-50%)translateY(-50%)scale(.6)}to{opacity:.8;transform:translate(-50%)translateY(-50%)scale(1)}}@keyframes intro-text-fade-in{0%{opacity:.3;transform:translate(-50%)translateY(-50%)scale(.8)}to{opacity:.8;transform:translate(-50%)translateY(-50%)scale(1)}}.name-title{white-space:nowrap;opacity:0;transition:opacity 1s ease-in-out .75s}@media screen and (width<=950px){.intro-text{max-width:450px}.intro-text>h3{--font-size:28px}.intro-text>p{margin-top:32px;font-size:20px}.intro-btn{border-radius:8px;padding:4px 14px 6px;font-size:28px}.intro-btns{gap:32px;margin-top:32px}}@media screen and (width<=850px){#intro-content{flex-direction:column;gap:20px;margin:0 auto;padding-inline:20px}.intro-img-wrapper{width:min(65vw,300px);margin-bottom:-38px;position:relative}.intro-img{z-index:1;width:min(65vw,300px);position:relative}.social-bubble{width:22%;height:22%}.github-bubble{top:23%;left:93%}.linkedin-bubble{top:50%;left:100%}.email-bubble{top:77%;left:93%}.intro-text{box-sizing:border-box;background-color:rgba(var(--accent-back), .75);border-radius:16px;max-width:350px;padding:18px 10px}.intro-text>h3{--font-size:20px}.intro-text>p{margin-top:20px;font-size:16px;line-height:24px}.intro-btn{border-radius:8px;padding:4px 14px 6px;font-size:20px}.intro-btns{z-index:2;gap:20px;margin-top:0}.intro-btns.desktop{display:none}.intro-btns.mobile{z-index:3;display:flex}.intro-bubble.desktop{display:none}.intro-bubble.mobile{z-index:-5;display:block}}@media (hover:hover) and (pointer:fine){.social-bubble:hover{background-color:rgba(var(--accent-back), 1);box-shadow:inset 0 0 0 3px rgba(var(--purple), 1);transform:translate(-50%,-50%)scale(1.1)}.social-bubble:hover>img{opacity:1}.intro-link:hover{-webkit-text-decoration-color:rgb(var(--purple));-webkit-text-decoration-color:rgb(var(--purple));text-decoration-color:rgb(var(--purple));color:rgb(var(--purple))}.intro-btn:hover{box-shadow:inset 0 0 0 3px rgba(var(--purple), 1);color:rgba(var(--off-white), 1);background-color:rgba(var(--accent-back), 1);transform:scale(1.1)}}#skills-content{flex-direction:column;justify-content:center;align-items:center;display:flex}.skill-group-wrapper{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}.skill-group-wrapper:not(:first-child){margin-top:min(100px,10vw)}.skill-group-title{text-align:center;color:rgba(var(--off-white), .8);margin:0 0 min(50px,5vw);font-family:Merriweather,Cambria,Cochin,Georgia,Times,Times New Roman,serif;font-size:clamp(25px,7vw,60px);font-weight:400}.skill-group{-moz-column-gap:5%;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:min(20px,3vw) 5%;width:840px;display:flex}.skill{flex-direction:column;align-items:center;width:min(168px,22%);margin-bottom:min(40px,4vw);text-decoration:none;display:flex;position:relative}.skill-images{flex-direction:column;align-items:center;width:95%;display:flex;position:relative}.skill-images>img{z-index:1;-webkit-user-drag:none;user-drag:none;width:100%}.skill-name{text-align:center;color:rgba(var(--off-white), .75);margin-top:min(20px,2vw);font-family:Merriweather,Cambria,Cochin,Georgia,Times,Times New Roman,serif;font-size:min(30px,3.2vw);display:block}@media screen and (width<=850px){.skill-group{-moz-column-gap:min(20px, 3vw);column-gap:min(20px,3vw);width:90vw}.skill{margin-inline:0}.skill-images>img:last-child{display:none}}@media not ((hover:hover) and (pointer:fine)){.skill-images>img:last-child{display:none}}@media (hover:hover) and (pointer:fine){.skill-images>img:last-child{z-index:0;filter:blur(15px);opacity:.1;transition:opacity .25s ease-in-out,filter .25s ease-in-out;position:absolute}.skill:hover>.skill-images>img:last-child{opacity:.75}.skill{transition:transform .25s ease-in-out,filter .25s ease-in-out,opacity .5s ease-in-out}#skills-content:has(.skill:hover) .skill:not(:hover){filter:blur(.8px);opacity:.5}.skill-images{transform-style:preserve-3d;transform:perspective(1000px) rotateX(var(--rotateX)) rotateY(var(--rotateY))}.skill-images>.skill-perspective:nth-child(2n){transform:translateZ(-100px)}}#portfolio-content{box-sizing:border-box;min-height:calc(100vh - (var(--header-height)));flex-direction:column;justify-content:center;align-items:center;display:flex}.projects{flex-wrap:wrap;justify-content:center;gap:20px;max-width:1250px;padding-inline:40px;display:flex}.project{box-sizing:border-box;background-color:rgba(var(--project-bg-color), .25);border-radius:24px;max-width:400px;height:min-content;padding:15px;transition:background-color .25s ease-in-out,transform .25s ease-in-out,box-shadow .25s ease-in-out,opacity .25s linear,filter .25s ease-in-out;position:relative;overflow:hidden}.project>a{text-decoration:none}.project>.project-top{flex-direction:column;transition:filter .25s ease-in-out,transform .25s ease-in-out;display:flex;position:relative}.project-image,.project-title,.project-label{transition:border-radius .25s ease-in-out}.project-image{aspect-ratio:3/2;border-radius:10px 10px 0 0;width:100%}.project-title{box-sizing:border-box;text-align:center;background-color:rgba(var(--project-bg-color), .8);width:100%;color:rgb(var(--project-text-color));border-radius:0 0 10px 10px;margin:0;padding:8px;font-family:Merriweather,Cambria,Cochin,Georgia,Times,Times New Roman,serif;font-size:24px;font-style:normal;font-weight:600}.project-tags{flex-wrap:wrap;gap:8px;margin-top:12px;margin-bottom:8px;display:flex}.project-tags>a{text-decoration:none;transition:transform .25s ease-in-out,background-color .25s ease-in-out,box-shadow .25s ease-in-out}.project-tag{box-sizing:border-box;width:fit-content;color:rgb(var(--off-white));background-color:rgba(var(--tag-color), .6);border-color:rgb(var(--tag-color));border-style:solid;border-width:2px;border-radius:6px;padding:1px 5px;font-family:Roboto Mono,monospace;font-size:16px;font-style:normal;font-weight:600;line-height:21px;display:inline-block;position:relative}.project-label{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:rgba(var(--tag-color), .8);border-width:0;max-width:calc(100% - 10px);padding:7px 10px;font-size:20px;font-weight:400;position:absolute;top:4px;left:4px}.project-description{box-sizing:border-box;width:100%;color:rgba(var(--project-text-color), .8);margin:0;padding:0 4px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:1.25}.project-links{box-sizing:border-box;width:fit-content;margin-top:12px;margin-left:auto;display:flex}.project-link{width:38px;height:38px;margin-left:8px;display:block}.project-link-icon{opacity:.75;width:38px;height:38px;transition:transform .25s ease-in-out,filter .25s ease-in-out,opacity .25s ease-in-out;position:relative}@media screen and (width<=1000px){.projects{padding-inline:0}}@media screen and (width<=850px){.project-image{border-radius:10px}.project-title{box-sizing:border-box;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:10px;width:fit-content;max-width:calc(100% - 30px);margin:-23.2px auto 0;padding:8px 24px}}@media (hover:hover) and (pointer:fine){.projects:has(.project:hover) .project:not(:hover){filter:blur(.8px);opacity:.5;transform:scale(.98)}.project:hover{background-color:rgba(var(--project-bg-color), .4);box-shadow:0px 0px 5px rgba(var(--project-bg-color), .4);transform:scale(1.02)}.project>a:has(img):hover{filter:drop-shadow(0px 0px 8px rgba(var(--bg-color), .8));transform:scale(1.01)}.project>a:has(img):hover>.project-image{border-radius:15px 15px 0 0}.project>a:has(img):hover>.project-title{border-radius:0 0 15px 15px}.project>a:has(img):hover>.project-label{border-radius:12px 6px 6px}a.project-tag:hover{background-color:rgb(var(--tag-color));box-shadow:0px 0px 5px rgba(var(--tag-color), .5);transform:scale(1.05)}.project-link-icon:hover{filter:drop-shadow(0px 0px 2.5px rgba(var(--off-white), .5));opacity:.8;transform:scale(1.06)}}@media screen and (width<=850px) and (hover:hover) and (pointer:fine){:is(.project>a:has(img):hover>.project-image,.project>a:has(img):hover>.project-title){border-radius:20px}}