:root{--text-color: rgba(255, 255, 255, .95);--default-text: clamp(.9rem, 2vw, 1.15rem);--dark-grey: rgb(20, 20, 20);--inactive: rgba(255, 255, 255, .5);--shadow-m: inset 0 2px 4px #00000030, 0 4px 8px #00000015}*{margin:0;transition:.5s;color:var(--text-color);font-family:Google Sans Flex,sans-serif}.fadeIn{animation:fadeIn;animation-timeline:view();animation-range:entry 0% cover 30%}@keyframes fadeIn{0%{translate:0 25px;opacity:0}to{translate:0 0;opacity:1}}@media(pointer:none),(pointer:coarse){.fadeIn{animation:none}}button,a{cursor:pointer}p{font-size:var(--default-text);line-height:calc(150% - (150%*(1 - (clamp(1rem,2%,1.5rem)/16px))))}.smallHeader{font-size:clamp(1.25rem,2vw,1.5rem)}::-webkit-scrollbar{width:.3vw}::-webkit-scrollbar-thumb{background-color:gray;height:10px}body{background-color:#000;overflow-x:hidden}#navBar{position:fixed;left:50%;translate:-50% 0;z-index:10;display:flex;justify-content:space-evenly;border-radius:0 0 16px 16px;box-sizing:border-box;padding:50px 0 10px;border:transparent 2px solid;border-top:none;transition:border .5s ease,backdrop-filter .5s ease,padding .5s ease-out .5s}#navBar[data-scrolled=true]{transition:padding .25s ease,border .25s ease .25s,backdrop-filter .25s ease .25s;padding:10px 5px;border:rgba(255,255,255,.5) 2px solid;border-top:none;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px)}#navBar button{background:none;border:none;font-size:clamp(1rem,3vw,1.25rem);padding:0 clamp(10px,3vw,75px);color:var(--inactive);text-shadow:0 0 5px var(--inactive);letter-spacing:.2rem}@media(max-width:550px){#navBar button{letter-spacing:0}}#navBar button.active,#navBar button:hover{color:var(--text-color);text-shadow:0 0 5px var(--text-color)}#home{width:100vw;height:125vh;position:relative;background-image:url(/MyWebsite/assets/bladerunner-kV8DC0mQ.jpg);background-size:cover;-webkit-mask-image:linear-gradient(black,black 75%,transparent);mask-image:linear-gradient(black,black 75%,transparent);background-attachment:fixed;background-repeat:no-repeat;background-position:50% 50%}#home[data-is-ios=true]{background-attachment:scroll}@supports (-webkit-touch-callout: none){#home{background-attachment:scroll}}#home>:first-child{position:absolute;top:50vh;left:50%;translate:-50% -50%;outline:rgba(255,255,255,.5) 2px solid;padding:clamp(1rem,3vw,3rem);border-radius:10px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#00000080}.highlight{text-shadow:0 0 15px white}#home>:first-child p{position:relative;z-index:2;font-size:clamp(3rem,10vw,10rem);font-weight:600;font-family:Roboto Mono,monospace;letter-spacing:1rem;margin-right:-1rem;width:fit-content;line-height:normal}.film{top:0;left:0;z-index:1;position:absolute;width:100%;height:100%;background:linear-gradient(to bottom,rgba(255,255,255,.05),rgba(0,110,255,.05) 3px,transparent 3px,transparent 15px);background-size:auto 15px;animation:downForever 20s linear infinite}@keyframes downForever{to{background-position:0 100%}}#about{width:100vw;display:flex;flex-direction:column;align-items:center;margin:4rem 0}#about>:first-child{width:clamp(325px,80vw,1000px);display:flex;justify-content:center;flex-direction:column;gap:5rem;margin-bottom:7.5rem}#about>:first-child>:first-child{box-sizing:border-box;display:flex;flex-direction:column;align-items:center}#about>:first-child>:first-child>:nth-child(2){width:80%}.sectionHeader{font-size:2.5rem;text-shadow:0 0 15px white;letter-spacing:1rem;margin-right:-1rem;margin-bottom:3rem}.centerText{text-align:center}#about>:first-child>:nth-child(2){width:100%;-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);height:clamp(3rem,20vh,20rem);position:relative;overflow:hidden}#about>:first-child>:nth-child(2):hover>div{animation-play-state:paused}.sliderWrapper{position:absolute;display:flex;height:100%;gap:1rem;will-change:transform;padding-left:1rem}.sliderWrapper,.sliderWrapper *{transition:none}.sliderWrapper.startAnim{animation:SlideIn 40s linear infinite}#sliderWrapper1{animation-delay:-20s}@keyframes SlideIn{0%{transform:translate(100%)}to{transform:translate(-100%)}}#about .sliderItem{height:100%;width:auto;border-radius:10px}#highlights{padding:3rem 0;width:clamp(325px,90vw,1300px);display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;position:relative}.card{background-color:#1e1e1e;padding:1px;border-radius:10px;position:relative}@media(max-width:1250px){#highlights{grid-template-columns:repeat(1,1fr);width:clamp(325px,90vw,750px)}}.card:after{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,.4),transparent 40%);transition:opacity .5s ease;border-radius:10px;z-index:1;pointer-events:none}#highlights:hover .card:after{opacity:1}.card:before{content:"";position:absolute;width:100%;height:100%;opacity:0;background:radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,.05),transparent 40%);transition:opacity .5s ease;border-radius:10px;z-index:3;pointer-events:none}.card:hover:before{opacity:1}.card>div{position:relative;background-color:#000;border-radius:10px;z-index:2;overflow:hidden}#highlights .card>div{display:flex;flex-direction:column}#highlights .card>div>:first-child{width:100%;aspect-ratio:16/ 9;background-size:100%;background-position:center;box-sizing:border-box;background-clip:content-box;background-repeat:no-repeat}#highlights .card>div>:nth-child(2){padding:2rem;background:#0f0f0f;display:flex;flex-direction:column}.cardHeader{height:4rem;display:flex;justify-content:center;align-items:center;margin-bottom:1.25rem}#projects{width:100vw;display:flex;flex-direction:column;align-items:center}#projects>:first-child{margin-bottom:3rem}#projectsWrapper{width:clamp(325px,90vw,1200px);display:grid;flex-direction:column;justify-content:center;gap:1rem;position:relative}#projectsWrapper:hover .card:after{opacity:1}#projectsWrapper .cardContent>*{flex:1 1}#projectsWrapper .cardContent{box-sizing:border-box;padding:2rem;background:#0f0f0f;display:flex;gap:2rem}#projectsWrapper .cardContent>:first-child{display:flex;flex-direction:column;justify-content:center;align-items:center}#projectsWrapper .cardContent>:first-child>:nth-child(2){max-height:360px;overflow-y:auto;padding:0 2rem;box-sizing:border-box}#projectsWrapper .cardContent>:first-child>:nth-child(2)::-webkit-scrollbar-thumb{background-color:#ffffff80}#projectsWrapper .cardContent>:nth-child(2){display:flex;justify-content:center;align-items:center;box-sizing:border-box}.ImageSlider{flex:1;position:relative;box-shadow:var(--shadow-m);border-radius:10px;cursor:pointer}.ImageSlider>:first-child{overflow-x:auto;border-radius:10px;aspect-ratio:16/9;width:100%;display:flex;scroll-snap-type:x mandatory;scroll-behavior:smooth;touch-action:pan-x;gap:1px}.ImageSlider>:first-child::-webkit-scrollbar{display:none}.ImageSlider :first-child img{width:100%;flex-shrink:0;object-fit:cover;scroll-snap-align:start}.ImageSlider>:nth-child(2){left:50%;translate:-50%;position:absolute;display:flex;justify-content:space-between;margin-top:1rem;gap:1rem}.ImageSlider>:nth-child(2)>a{aspect-ratio:1;background-color:#fff;opacity:.5;width:8px;border-radius:50%}.ImageSlider>:nth-child(2)>a:hover,.ImageSlider>:nth-child(2)>a.active{opacity:.99}#imageSlider6 img{background-color:#ffff0040;object-fit:contain}@media(max-width:1250px){#projectsWrapper{width:clamp(325px,90vw,750px)}#projectsWrapper .cardContent>:first-child>:nth-child(2){max-height:none;padding:0}#projectsWrapper .card>div{flex-direction:column}.ImageSlider{padding-bottom:calc(8px + 1rem)}}#contact{padding:7rem 0 10rem;display:flex;flex-direction:column;align-items:center}#contactForm{width:clamp(350px,50vw,600px);display:flex;flex-direction:column;align-items:center;background-color:#000;border-top:1px solid var(--inactive);border-bottom:1px solid var(--inactive);box-sizing:border-box;padding:2rem 0;gap:2rem}#contactForm input,textarea{background-color:#1e1e1e;width:clamp(300px,80%,450px);height:3rem;border:none;border-radius:5px;border:1px solid var(--inactive);box-sizing:border-box;outline:none}#contactForm input{padding-left:1rem}#contactForm input:focus,textarea:focus{border:1px solid white}#contactForm textarea{padding:1rem;height:10rem}#contactForm button{background:#fff;color:#000;height:2.5rem;width:25%;border-radius:20px;border:2px white solid}#contactForm button:hover{background:#000;color:#fff}#contact>:last-child{margin-top:4rem;display:flex;align-items:center;gap:2rem}#contact :last-child *{fill:var(--inactive);width:40px;height:40px;cursor:pointer}#contact :last-child>:last-child>:nth-child(1){fill:none}#contact :last-child>*:hover *{fill:#fff}