:root .dark-mode{--bg-color: rgb(31, 31, 31);--bg-color-rgb: 31, 31, 31;--low-opacityBG: rgba(246, 244, 231, .05);--high-opacityBG: rgba(246, 244, 233, .75);--secondary-color: rgb(246, 244, 233);--link-color: rgb(219, 227, 246);--yellow: rgb(252, 202, 128);--green: rgb(206, 251, 206);--red: rgb(255, 105, 105);--selected-blue: rgb(64, 113, 227);--low-opacity-color: rgba(110, 149, 240, .461)}:root .light-mode{--bg-color: rgb(246, 244, 233);--bg-color-rgb: 246, 244, 233;--secondary-color: black;--link-color: rgb(1, 1, 97);--low-opacityBG: rgba(3, 2, 2, .05);--high-opacityBG: rgba(5, 2, 2, .6);--yellow: rgb(255, 85, 0);--green: rgb(53, 138, 53);--red: rgb(123, 0, 14);--selected-blue: rgb(64, 113, 227);--low-opacity-color: rgba(213, 191, 104, .38)}*{font-family:Outfit,sans-serif,Tahoma,Geneva,Verdana,sans-serif;color:var(--secondary-color)}body{margin:0;padding:0;background-color:var(--bg-color);font-size:16px}#cursor-glow{pointer-events:none;position:fixed;width:80px;height:80px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--low-opacity-color) 0%,transparent 70%);opacity:.5;z-index:1;transition:none}.complemntary-text{margin-bottom:0;padding-top:15px;color:var(--yellow);font-size:1.3rem}.main-content{outline-color:#000;min-height:100vh;display:flex;align-items:center;justify-content:center;line-height:4vw;width:100%;overflow-x:hidden;max-width:100%;overflow-y:hidden;animation:fadeIn 1.5s ease-out forwards}.box{flex-flow:row wrap;width:90%;max-width:1500px;display:flex;gap:30px;justify-content:center;align-items:center}.name{outline-color:#9acd32;font-size:3.5rem;margin-bottom:0;color:var(--red)}.hero{outline-color:#ef01bf;width:40%;min-width:500px;line-height:normal}.featured{border:2px solid var(--secondary-color);width:40%;min-width:500px;height:400px;position:relative;overflow:hidden;border-radius:24px;background-color:var(--bg-color);max-width:100%}.featured:hover{box-shadow:0 8px 32px #85311575,0 2.5px 6px #0000001a;transition:box-shadow .3s ease}.sub-content{width:100%;display:flex;flex-direction:column}#navigateDown img{height:100%;width:100%;max-height:130px;outline-color:red;transition:transform .3s ease}#navigateDown img:hover{transform:translateY(10px)}.title{margin:0 10px 10px;outline-color:red;font-size:2.5em;color:var(--green)}.links{display:flex;flex-direction:row;margin:10px;gap:2.5vh;font-size:3rem;color:var(--link-color);border-radius:24px;align-items:center}.internal-link{border-radius:15px;padding:12px 24px;background-color:#ffffff0d;border:3px solid var(--link-color);color:var(--link-color);text-decoration:none;font-size:1.2rem;font-weight:600;transition:all .4s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.internal-link:hover{background-color:var(--link-color);color:var(--bg-color)!important;transform:translateY(-3px);box-shadow:0 10px 20px #0003;border-color:var(--link-color)}.links i:hover{color:#4071e3;transition:color .4s ease}.links i,.icon{color:var(--link-color)}.links a:hover{color:#4071e3;transition:color .4s ease;text-shadow:0 4px 16px rgba(64,113,227,.4),0 1.5px 4px rgba(0,0,0,.15)}.links a:visited:hover{color:#4071e3;transition:color .4s ease}.links a:visited{color:var(--link-color)}.links a{text-decoration:none;color:var(--link-color)}.glow-icon:hover{fill:#4071e3;filter:drop-shadow(0 4px 16px rgba(64,113,227,.4)) drop-shadow(0 1.5px 4px rgba(0,0,0,.15));transition:filter .4s ease,fill .4s ease}.glow-icon-y:hover{fill:#e3cb40;filter:drop-shadow(0 4px 16px rgba(64,113,227,.4)) drop-shadow(0 1.5px 4px rgba(0,0,0,.15));transition:filter .4s ease,fill .4s ease}section{animation:fadeIn 1.5s ease-out forwards}.projects-nav a:hover{font-weight:700;line-height:normal}.project *{color:gray;margin-bottom:0;margin-top:0;transition:color .4s ease,transform .4s ease}.project{font-size:1.5rem;padding:1rem 1.2rem;border-left:3px solid transparent;border-radius:0 8px 8px 0;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:default}.project:hover{background-color:var(--low-opacityBG)}.project:last-child{margin-bottom:0vh}.project.active-project{border-left-color:var(--selected-blue);background-color:var(--low-opacityBG)}.selectedProject,.selectedProject *{color:var(--secondary-color)}html{scroll-behavior:smooth}#projectTitleDiv{display:flex;line-height:0;align-items:center;justify-content:space-around;margin-top:3vh;outline:3px solid var(--secondary-color);width:76%;max-width:1300px;border-radius:12px}#projectTitleDiv p{font-size:2rem;margin-inline:3rem;text-align:center}.myWorkHeader{cursor:pointer;transition:all .3s ease;border-radius:8px;background-color:transparent}.selectedHeader{font-weight:700;background-color:var(--low-opacity-color);transition:all .3s ease}#projectTitleDiv div{width:50%}#projectTitleDiv div:hover{background-color:var(--low-opacity-color);transition:background-color .4s ease}#projectImage{outline:2px solid var(--secondary-color)}#projectPicture{border:2px solid var(--secondary-color);background-color:var(--low-opacityBG);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#projectPoints li{margin-top:5%}#timelineFill{position:absolute;top:0;left:0;width:100%;height:0%;background:linear-gradient(180deg,#4071e359,#4071e326);border-radius:2px}.timeline-dot circle{fill:var(--secondary-color)}#navigateDown{bottom:1%}.square{position:absolute;top:1%;left:2%;height:5VW;width:20VW;background-color:#000;border-radius:20px;opacity:80%;display:flex;justify-content:center;align-items:center}iframe{border:none;outline:none;display:block;transform:scale(.6);transform-origin:top left;width:166.67%;height:166.67%;border-radius:24px;background-color:var(--bg-color)}.cover{position:absolute;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#0009;cursor:pointer;z-index:1;border-radius:24px;left:0}.cover p{color:#f0f8ff;font-size:1.5rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mobile-project{background-color:var(--bg-color);border:2px solid var(--secondary-color);border-radius:15px;margin:25px auto;padding:25px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;max-width:500px;box-shadow:0 4px 6px var(--low-opacityBG);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid var(--high-opacityBG);background:linear-gradient(135deg,var(--low-opacityBG) 0%,var(--bg-color) 100%)}.mobileProjectBox details{width:100%;text-align:left}.mobileProjectBox summary{font-size:2.2rem;color:var(--primary-color);font-weight:700;margin-bottom:.5rem;cursor:pointer;list-style:none;position:relative;padding-right:2.5rem;letter-spacing:-.02em}.mobileProjectBox summary::-webkit-details-marker{display:none}.mobileProjectBox summary:after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);transition:all .4s cubic-bezier(.4,0,.2,1);color:var(--secondary-color);font-size:2.5rem;font-weight:300}.mobileProjectBox details[open] summary:after{transform:translateY(-50%) rotate(45deg);color:var(--yellow)}.mobileSubtitle{margin-top:.2rem;margin-bottom:1.2rem;color:var(--yellow);font-size:1.5rem;font-weight:500;opacity:.9}.mobileDescriptionPoint{font-size:1.1rem;line-height:1.6;color:var(--secondary-color);margin:1rem 0;padding-left:1.2rem;border-left:2px solid var(--low-opacityBG);opacity:.85}.mobileDescriptionPoint:first-of-type{margin-top:1.5rem}.mobileProjectBox img{width:100%;border-radius:8px;margin-bottom:1rem;transition:transform .5s ease;aspect-ratio:16/8;object-fit:cover}.mobileProjectBox:hover img{transform:scale(1.02)}.tech-stack{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.tech-badge{padding:6px 12px;border-radius:20px;font-size:.9rem;background-color:var(--low-opacityBG);color:var(--yellow);border:1px solid var(--yellow);transition:all .3s ease}.mobile-project-links{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}.mobile-project-link{padding:10px 20px;border:2px solid var(--link-color);border-radius:8px;text-decoration:none;color:var(--link-color);font-size:1rem;font-weight:500;transition:all .3s ease;background:transparent;position:relative;overflow:hidden}.mobileProjectBox{background-color:var(--bg-color);border:1px solid rgba(255,255,255,.05);border-radius:20px;padding:2rem;margin:2rem auto;max-width:90%;box-sizing:border-box;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 10px 30px -10px #0000004d,inset 0 0 0 1px #ffffff0d;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);width:100%;background:linear-gradient(165deg,#ffffff08,#ffffff03)}.mobileProjectBox:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--yellow),var(--red),var(--green));transform:scaleX(0);transition:transform .4s ease}.mobileProjectBox:hover:before{transform:scaleX(1)}.mobileLinkContainer{display:flex;justify-content:center;margin-top:2rem}.mobileGithubLink{display:inline-flex;align-items:center;gap:12px;padding:14px 28px;background:rgba(var(--bg-color-rgb),.8);border:3px solid var(--secondary-color);border-radius:50px;color:var(--secondary-color);text-decoration:none;font-size:1.3rem;font-weight:700;transition:all .4s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(10px);box-shadow:0 8px 25px #0003}.mobileGithubLink:hover{background:var(--secondary-color);color:var(--bg-color);transform:translateY(-4px);box-shadow:0 15px 30px #0000004d}.mobileGithubLink i{font-size:1.5rem}.mobileGithubLink .link-icon{width:1.3rem;height:1.3rem;display:block;flex-shrink:0;margin-top:2px}.dark-mode .mobileGithubLink .link-icon,.mobileGithubLink:hover .link-icon{filter:invert(1)}.dark-mode .mobileGithubLink:hover .link-icon{filter:invert(0)}.mobileHeaderPill{display:flex!important;width:90%!important;max-width:600px!important;margin:2rem auto!important;outline:3px solid var(--secondary-color)!important;border-radius:50px!important;position:sticky!important;top:5rem;z-index:100;background-color:var(--bg-color);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);overflow:hidden;padding:0!important;height:4.5rem!important;box-shadow:0 10px 30px #00000026}.mobileHeaderPill div{display:flex!important;align-items:center;justify-content:center;width:50%!important;height:100%!important;transition:all .3s ease;cursor:pointer}.mobileHeaderPill .myWorkHeader{font-size:1.6rem!important;margin:0!important;padding:0!important;font-weight:500;color:var(--secondary-color);opacity:.7;transition:all .3s ease}.mobileHeaderPill div:hover{background-color:rgba(var(--bg-color-rgb),.5)}.mobileHeaderPill{display:flex!important;width:92%!important;max-width:500px!important;margin:3rem auto 1.5rem!important;border:3px solid var(--secondary-color)!important;outline:none!important;border-radius:50px!important;position:sticky!important;top:5rem;z-index:100;background-color:var(--bg-color);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);overflow:hidden;padding:2px!important;height:4.2rem!important;box-shadow:0 12px 30px -10px #00000040;line-height:1!important;box-sizing:border-box!important;align-items:stretch!important}.mobileHeaderPill div{display:flex!important;align-items:center;justify-content:center;flex:1!important;height:100%!important;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:40px!important;margin:0!important;padding:0!important}.mobileHeaderPill .myWorkHeader{font-size:1.8rem!important;margin:0!important;padding:0!important;font-weight:600;color:var(--secondary-color);opacity:.6;transition:all .3s ease}.mobileHeaderPill .selectedHeader{background-color:var(--low-opacity-color)!important}.mobileHeaderPill .selectedHeader .myWorkHeader{opacity:1!important;font-weight:700!important}.mobileHeaderPill div:hover{background-color:rgba(var(--bg-color-rgb),.3)}.dark-mode .mobile-project{box-shadow:0 4px 6px #0003}.dark-mode .mobile-project:hover{box-shadow:0 12px 20px #0000004d}.mobile-project{animation:slideUp .6s ease-out forwards;opacity:0}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.mobile-project:nth-child(1){animation-delay:.1s}.mobile-project:nth-child(2){animation-delay:.2s}.mobile-project:nth-child(3){animation-delay:.3s}.mobile-project:nth-child(4){animation-delay:.4s}.mobile-project:nth-child(5){animation-delay:.5s}
