styles.css

:root{--font-color:255,255,255;--text-shadow:2px 3px 5px rgba(0,0,0,.7);--primary-color:#242d37;--t1:#95bbe6;--t2:#2b4d85;--t3:#5788be;--t4:#5dabf0;--t5:#e1eaf7}.show-mobile{display:none}.hide-mobile{display:flex}::-moz-selection{-moz-user-select:none;user-select:none}*,::-moz-selection,::selection{-moz-user-select:none;user-select:none}@keyframes slidein{to{filter:blur(0);transform:translateX(0);opacity:1}}@keyframes gogo{0%{transform:scaleX(0)}to{transform:scaleX(100px)}}@keyframes staggerdown{0%{transform:translateY(0);filter:blur(0);opacity:1}to{transform:translateY(-300px);filter:blur(10px);opacity:0}}@keyframes staggerup{to{transform:translateY(-50px);filter:blur(10px);opacity:0}0%{transform:translateY(0);filter:blur(0);opacity:1}}@keyframes body-fade-in{0%{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-arrow{0%{opacity:0;transform:translateY(-200px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(200px)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slidein-reverse{to{filter:blur(15px);transform:translateX(-200%)}}@keyframes textreveal{0%{opacity:0;filter:blur(5rem)}to{opacity:1}}@keyframes openhr{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes bounce{0%{transform:translateY(0)}50%{transform:translateY(10px)}to{transform:translateY(0)}}@keyframes scaleXY{0%{position:fixed;opacity:0;display:none;height:0;width:0;padding:0}1%{display:block;opacity:1;height:0;width:0;padding:0}40%{height:0;width:70vw;padding:0}to{height:70vh;width:70vw;padding:clamp(10px,5vw,70px);position:fixed}}@keyframes goofyClick{0%{opacity:1}to{transform:translateY(80%);opacity:0}}html{font-size:16px}body{margin:0;background:var(--primary-color);font-family:sans-serif;height:100vh;overflow-x:hidden;font-smooth:always;animation:body-fade-in 1s}
.container{display:flex}.menu-closed{z-index:9998;margin:23px;position:absolute;padding:4px;opacity:0;border-radius:100%;animation:fade-in 3s .5s forwards}.menu-closed:hover{cursor:pointer}.menu-closed:hover i{background-color:var(--t3)}.menu-closed i{display:block;width:clamp(30px,4.5vw,45px);height:2px;margin:10px;background-color:#fff;transition:all .45s cubic-bezier(.43,.77,.15,1.5)}.menu-closed i:first-child{transform:translateX(5px)}.menu-closed i:nth-child(3){transform:translateX(-5px)}.menu-closed:hover i:first-child{transform:translate(2px,3px)}.menu-closed:hover i:nth-child(3){transform:translate(-2px,-3px)}.menu-open i{display:block;width:clamp(30px,5vw,50px);height:2px;margin:10px;background-color:var(--t3);transition:all .45s cubic-bezier(.43,.77,.15,1.5)}.menu-open i:first-child{transform:translateY(-7px)}.menu-open i:nth-child(3){transform:translateY(7px)}.menu-open:hover i:first-child{transform:translateY(-12px)}.menu-open:hover i:nth-child(3){transform:translateY(12px)}.navbar{z-index:9996;background-color:#0606066f;opacity:1;flex-wrap:wrap;transform:translateY(0)}.navbar,.navbar-hidden{position:fixed;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;margin:0 auto;transition:all .45s cubic-bezier(.17,.2,.23,1.01);font-size:clamp(30px,6vh,75px);font-family:Manrope,sans-serif;font-weight:800}.navbar-hidden{z-index:2;background-color:var--(--primary-color);transform:translateY(-100%)}.current-tab a{color:rgba(87,137,190,.683)!important}.navbar-item-hidden{opacity:0;border-radius:20px}.navbar-item{opacity:1;border-radius:20px;padding:clamp(5px,3vh,35px);transform:translateY(0);transition:all .5s cubic-bezier(.22,0,.11,1)}.navbar-item a:hover{color:#5788be!important;transition:all .45s ease;text-shadow:0 0 40px rgba(36,222,213,.228)}.navbar a:link,.navbar-hidden a:link{font-family:Manrope,sans-serif;text-decoration:none;transition:all .45s ease;color:#a6a6a6}.navbar a:visited,.navbar-hidden a:visited{color:#a6a6a6;text-decoration:none}.navbar-item:hover img{opacity:.5}#landingpagecontainer{flex-wrap:wrap;align-items:center;justify-content:center;height:100vh;width:100%;gap:clamp(5px,7vw,50px);overflow:hidden}.Portrait img{z-index:2;filter:blur(5px);transform:translateX(-400%);height:clamp(100px,21.5vw,500px);animation:slidein 3s ease 0s 1 forwards;border-radius:100%;border:.2vw solid #fff;transition:height .1s ease}.titletext{color:rgb(var(--font-color));font-size:clamp(25px,2vw,35px);text-shadow:var(--text-shadow);font-family:Manrope,sans-serif;font-weight:800}#hey{font-size:clamp(.5em,3vw,5.3em);animation:slidein 3s ease 0s 1 forwards;transition:filter 1s ease;font-weight:700}#hey,#myname{transform:translateX(-200%);font-family:Manrope,sans-serif}#myname{font-size:clamp(.5em,4vw,6em);color:#cfcfff;animation:slidein 3s ease 1s 1 forwards;font-weight:800}#description{text-align:left;transform:translateX(-200%);max-width:45vw;font-size:clamp(16px,4.5vw,30px);animation:slidein 4s ease 1s 1 forwards;font-weight:600;font-family:Manrope,sans-serif}#aboutme-title{font-weight:100}#about-container{justify-content:space-evenly;overflow:hidden}#about-text-container{height:100vh;width:500px;padding-left:50px;flex-direction:column;justify-content:center;align-self:center;overflow-y:auto}#about-image-gallery{height:100vh;flex-direction:column;justify-content:flex-start;gap:20px}.imageWrapper{position:relative}.aboutimage{width:clamp(150px,27vw,450px);height:auto;border-radius:25px;border:2px solid var(--t5);transition:all 1s ease;filter:grayscale(.8);opacity:.7}.aboutimage:hover{opacity:.6;cursor:pointer;background:linear-gradient(0deg,rgba(0,0,0,.874),rgba(0,0,0,.538))}.aboutimage-hovered{filter:grayscale(0);opacity:1}.imageDescription{position:absolute;color:#fff;opacity:0;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;text-align:center;word-wrap:break-word;transition:all 1s ease;pointer-events:none}.aboutimage:hover+.imageDescription{opacity:1}.description-text{font-weight:400;color:var(--t5);text-shadow:var(--text-shadow);font-size:clamp(14.5px,1.2vw,19.2px)}.description-text,.imageDescription{font-family:Manrope,sans-serif}#goofyClick{font-size:clamp(18px,1.2vw,25px);font-weight:0;opacity:0;position:absolute;animation:goofyClick .6s linear forwards;text-shadow:0 0 0 #000,}.downarrow{position:absolute;left:clamp(50px,5vw,155px);filter:invert();animation:fade-in-arrow 5s linear infinite}#personal{display:flex;padding:20px;justify-content:center;align-items:center}#Label{font-size:clamp(12px,3vw,20px);text-decoration:underline;font-family:Manrope,sans-serif}#projectspage-container{height:100vh;width:100vw;overflow:hidden;flex-direction:column;justify-content:center}#my-projects-container{flex-wrap:wrap;gap:.6em;width:100vw;color:rgb(var(--font-color));text-shadow:var(--text-shadow);margin:0 auto;border-radius:3%;justify-content:center;align-items:center}#my-projects-title{text-align:center;flex:100%;padding:1em}.project-card-popup{z-index:10;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);overflow-y:auto;height:0;width:0;color:rgb(var(--font-color));text-shadow:var(--text-shadow);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);justify-content:center;align-items:center;background-color:rgba(50,59,68,.911);box-shadow:0 0 150px hsla(0,0%,100%,.2),0 0 10px rgba(65,136,217,.2);border-radius:10px;border:.02px solid rgba(107,148,169,.648);animation:scaleXY 1s cubic-bezier(.76,0,.29,1) 0s forwards}.reverse-project-card{position:absolute;height:70vh;width:70vw;padding:clamp(30px,70px,100px);animation:scaleXY 4s cubic-bezier(.76,0,.29,1) 3s reverse forwards}.project-card-popup .title{font-size:clamp(16px,3vw,40px);text-align:center;padding:clamp(10px,2vh,30px) 0}.project-card-popup .project-description{display:block;font-size:clamp(16px,1.4vw,20px);padding:clamp(10px,20px,30px) 0}.project-extended-description{display:none}.extended-description{font-size:clamp(16px,1.4vw,20px);padding:clamp(10px,20px,30px) 0}.project-card-hidden{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;aspect-ratio:10/12;transform:translateX(-15%);box-shadow:0 3px 6px hsla(0,0%,100%,.1),0 3px 6px rgba(240,13,13,.23);border-radius:8%;border:.02px solid hsla(0,0%,76%,.9);transition:transform .45s ease}.project-card,.project-card-hidden{display:flex;justify-content:center;text-overflow:ellipsis;align-items:center;font-size:2rem;overflow:hidden;width:25vw;height:20vw;background-color:hsla(0,0%,49%,.2)}.project-card{z-index:3;flex-direction:column;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);aspect-ratio:12/12;transform:translateX(0);opacity:.6;box-shadow:0 0 hsla(0,0%,100%,.1),0 3px 6px rgba(240,13,13,.23);border-radius:3%;border:.02px solid hsla(0,0%,76%,.9);transition:all .45s ease;transform:scale(.99)}.project-card-clicked{transform:scale(.8)}.project-card:hover{transform:scale(1);box-shadow:0 0 50px hsla(0,0%,100%,.6),0 0 10px rgba(65,136,217,.5);cursor:pointer;opacity:1}.project-card:hover .project-title{filter:blur(0)}.project-card-image img{z-index:-1;height:100%;width:100%;position:absolute;top:0;left:0;-o-object-fit:cover;object-fit:cover}.project-title{font-family:Manrope,sans-serif;align-items:center;justify-content:center;text-align:center;font-size:clamp(20px,1.3vw,25px);transition:transform .25s ease-in-out;text-shadow:1px 2px 4px #000}.project-image{opacity:.25}.popup-Project-initial,.project-description{display:none}#close-project:hover{cursor:pointer;font-style:italic}#xmark{position:absolute;top:20px;right:20px}#xmark img{filter:invert();transition:all .1s ease-in-out}.xmark{position:absolute;top:0;opacity:0;transition:opacity 1s 5s}#xmark:hover img{cursor:pointer;transform:scale(80%)}.xmark-show{position:absolute;opacity:1;display:block}#disclaimer{font-family:Manrope,sans-serif;color:#fff;display:flex;justify-content:center;text-align:center}.mobileDisclaimer{display:none}#experience-page-container{display:flex;padding:10px 20px 20px 100px}
#experience-lists-container{display:flex;height:100%;flex-direction:column}#experience-list{width:clamp(300px,50vw,1000px)}#experience-images-container{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.experience-image{border:1px solid var(--t5);border-radius:50px;aspect-ratio:9/10;width:60%;-o-object-fit:cover;object-fit:cover}#list-container,.list{flex-direction:column}#list-container{margin-top:clamp(20px,1vw,50px);padding:1vw;text-shadow:var(--text-shadow)}.year{font-family:Manrope,sans-serif}.list-item{font-size:clamp(15px,1vw,19.2px);opacity:0;filter:blur(5px);transform:translateX(-5%)}.list-item,.list-item-hidden{margin-left:1.2vw;padding:1vw;transition:all 1s ease}.list-item-hidden{font-size:1.5em;opacity:.2;filter:blur(20px);transform:translateX(-2%)}hr{transform-origin:left;transform:scaleX(0);border:none;height:2px;background-color:#f5f4f4;animation:openhr 2s cubic-bezier(.14,.03,.26,1.01) 4s 1 forwards}#icon-container{gap:12px;margin-top:25px;height:20px}.icon{font-size: 15px;display:flex;opacity:0;transform:translateX(-25%);animation:slidein .5s ease 5s forwards}.icon:nth-child(2){animation-delay:5.2s}.icon:nth-child(3){animation-delay:5.4s}.icon img{aspect-ratio:1/1;height:clamp(25px,4vw,50px);filter:grayscale(30%)}.icon:hover{cursor:pointer;opacity:60%}#linkedinlogo img{border-radius:20%;box-shadow:5px 10px 20px var(--shadow-color)}#githublogo img{border-radius:20%}.hovericons{display:none;position:absolute;background-color:gray;border-radius:2%;padding-top:10px;font-size:10px;align-items:center;justify-content:center;width:0;height:0}.hiddeninfo-hidden{opacity:0;position:absolute;animation:gogo 10s ease}.hiddeninfo-show{justify-content:center;font-size:15px}#contact{padding:2px;display:flex}#outer-contact-container{width:100vw;justify-content:center}#contact-container{flex-direction:column;gap:25px;height:100vh;width:clamp(400px,45vw,1000px);justify-content:center;align-items:center;text-align:center;overflow:hidden}#contact-description{text-align:center;text-shadow:var(--text-shadow)}#contact-page-list{text-align:left;font-family:Manrope,sans-serif;text-shadow:var(--text-shadow)}#contact-page-list .list-item:hover .list-item{opacity:.6}#contact-description strong{text-decoration:underline;font-weight:123321}a{font-family:Manrope,sans-serif}a:link,a:visited{color:var(--t4)}a:hover{transition:all .45s ease}ul{list-style:none;padding:0}li{color:rgb(var(--font-color))}li:before{content:"- "}.Manrope{color:#fff;font-family:Manrope,sans-serif;font-size:clamp(15px,1vw,19.2px)}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#555;border-radius:50px;border:1px solid #373737;width:20%;height:clamp(6px,1.5%,10px)}.slider:hover{cursor:pointer;background-color:rgba(85,85,85,.474)}input[type=range i]::-webkit-slider-thumb{background:#6a6a6a;border:1px solid #232323}input[type=range]::-moz-range-thumb{background:#6a6a6a;border:1px solid #232323}.circle{z-index:9997;position:fixed;top:0;left:0;height:35px;width:35px;border:1.2px solid #fff;border-radius:4000px;transition:height .2s ease,width .2s ease,border .2s ease}.circle,.circle-hovering{overflow:hidden;pointer-events:none}.circle-hovering{height:25px;width:25px;border:1.2px solid var(--t1);border-radius:4000px;cursor:pointer}.text-toggle{display:none}