.root{line-height:1.5;width:100%;font-weight:400;display:flex;align-items:center;flex-direction:column}.MainContainer{width:85%;display:flex;justify-content:center;align-items:center;flex-direction:column}body,html{--defaultbackground: rgb(16, 16, 16);width:100%;font-family:Helvetica;display:flex;color:#fff;background-color:var(--defaultbackground);justify-content:center;min-height:100%;margin:0}.HorizontalScrollerContainer{width:100%;display:flex;height:40px;align-items:center;padding:20px 0;-webkit-mask:linear-gradient(to left,rgba(255,255,255,1) 80%,rgba(0,0,0,0) 99%),linear-gradient(to right,rgba(255,255,255,1) 80%,rgba(0,0,0,0) 99%);-webkit-mask-composite:source-in;mask-composite:intersect;position:relative;overflow:hidden}.HorizontalScrollerGradient{position:absolute;z-index:2;width:100%;height:100%}.HorizontalScrollerGradient:nth-child(1){pointer-events:none}.HorizontalScrollerGradient:nth-child(2){pointer-events:none}.ScrollListContainer{width:max-content;display:flex;height:100%;flex-direction:row;gap:30px;transition:.5s linear}.ScrollList{display:flex;height:100%;width:max-content;flex-direction:row;animation:movement 10s linear infinite;list-style:none;gap:30px}.HorizontalScrollerInput{display:flex;justify-content:center;text-align:center;align-items:center;height:100%;background-color:#969696;box-sizing:border-box;border:1px white solid;padding:5px;border-radius:10px;scale:1;color:#fff;transition:.25s ease}.HorizontalScrollerInput:hover{scale:1.2;padding:2px}@keyframes movement{to{transform:translate(-103.5%)}}.NavbarContainer{width:100%;border-bottom:rgba(255,255,255,.347) 1px solid;z-index:2;top:0;display:flex;align-items:center;overflow:hidden;height:100%;flex-direction:column;pointer-events:all;clip-path:inset(0px 0px 100% 0px);will-change:clip-path}.NavbarContainerFix{position:fixed;top:0;height:100%;pointer-events:none;z-index:2;width:100%}.NavbarMain{display:flex;position:fixed;z-index:3;justify-content:space-between;align-items:center;width:100%;padding:0 20px;background-color:#101010;box-sizing:border-box;border-bottom:1px rgba(255,255,255,.336) solid;height:60px;margin:0;top:0}.NavbarMain h1{margin:0;font-size:25px}.NavbarMain button{background-color:#2d2d2d;border:1px rgba(255,255,255,.324) solid;color:#fff;border-radius:5px;padding:5px 10px;position:relative}.NavbarMain button:before{content:"[ ";color:red}.NavbarMain button:after{content:" ]";color:red}.NavbarListItem{width:100%;position:relative}.NavbarListItemText{position:relative;font-size:20px;width:fit-content;font-weight:300;cursor:pointer;transition:.5s cubic-bezier(.075,.82,.165,1);margin:0}.NavbarListItemText:hover{padding-left:25px}.NavbarListItemText:hover:before{width:100%;content:">";padding:0 5px;top:-1px}.NavbarListItemText:before{position:absolute;padding:0;top:-1px;content:"";width:0%;left:0;height:100%;z-index:-1;background-color:red;transition:.5s cubic-bezier(.075,.82,.165,1)}.NavbarContent{width:90%;margin-top:100px}.NavbarContentList{width:100%;display:flex;justify-content:left;height:100%;align-items:start;gap:20px;flex-direction:column}.NavbarContentSecond{display:flex;justify-content:center;align-items:center;flex-direction:column;width:60%}.Landing{background-image:linear-gradient(to bottom,rgba(255,255,255,0) 50%,var(--defaultbackground) 85%),radial-gradient(circle at center center,transparent 30%,rgb(0,0,0) 100%),repeating-linear-gradient(0deg,rgba(163,163,163,.2) 0px,rgba(163,163,163,.2) 1px,transparent 1px,transparent 20px),repeating-linear-gradient(90deg,rgba(163,163,163,.2) 0px,rgba(163,163,163,.2) 1px,transparent 1px,transparent 20px),linear-gradient(90deg,#212121,#212121);width:100%;height:1300px;margin-top:-30px;flex-shrink:0;font-size:2.5vw}@media only screen and (max-width: 1000px){.Landing{background-image:linear-gradient(to bottom,rgba(255,255,255,0) 50%,var(--defaultbackground) 85%),radial-gradient(circle at center center,transparent 30%,rgb(0,0,0) 100%),repeating-linear-gradient(0deg,rgba(163,163,163,.2) 0px,rgba(163,163,163,.2) 1px,transparent 1px,transparent 20px),repeating-linear-gradient(90deg,rgba(163,163,163,.2) 0px,rgba(163,163,163,.2) 1px,transparent 1px,transparent 20px),linear-gradient(90deg,#212121,#212121);width:100%;height:1300px;margin-top:-30px;flex-shrink:0;font-size:3.5vw}}.WebsitelinkContainer{--Width: 100%;width:var(--Width);display:flex;min-height:120px;background-color:#151515;border-radius:20px;flex-direction:column;border:1px rgba(255,255,255,.3) solid;box-sizing:border-box;position:relative;gap:20px;padding:15px;transition:.25s ease}.Top{gap:10px;display:flex;justify-content:center;flex-direction:column;width:100%;flex-shrink:0}.LeftTop{display:flex;align-items:center;gap:10px;height:40px}.LeftTop h2{margin:0;transition:.25s ease;color:#fff;display:flex;justify-content:center;align-items:center}.LeftTop h2:before{font-size:0px;content:"> ";transition:.25s ease}.LeftBottom{height:70%}.LeftBottom p{margin:0;color:gray}.Bottom{display:flex;align-items:center;gap:20px;flex-direction:row;box-sizing:border-box;flex-wrap:wrap;width:100%}.Logo{width:30px;background-color:#ffffff9e;border-radius:5px;padding:5px;border:1px rgba(255,255,255,.452) solid;box-sizing:border-box;transition:.25s ease;filter:brightness(.8)}.WebsitelinkContainer:hover{scale:1.02;border:1px rgb(149,0,255) solid}.WebsitelinkContainer:hover .LeftTop h2{color:#c85aff;gap:5px}.WebsitelinkContainer:hover .LeftTop h2:before{color:#c85aff;content:"> ";font-size:20px}.WebsitelinkContainer:hover .Logo{padding:2px;background-color:#c77cec87;filter:brightness(1)}.WebsitelinkContainer:hover .Right img{filter:saturate(1);rotate:2deg;scale:1.1;transform:translate(-5px)}.ProjectSearchBar{width:100%;position:relative;box-sizing:border-box;display:flex;align-items:center}.ProjectsContainer{width:100%;background-color:#151515;box-sizing:border-box;padding:25px;border-radius:25px;border:1px rgb(76,76,76) solid}.ProjectSearchBar input{width:100%;border:1px rgb(76,76,76) solid;background-color:#1c1c1c;border-radius:10px;font-size:16px;box-sizing:border-box;text-transform:capitalize;padding:10px 40px;color:#fff}.Projects{display:flex;flex-direction:column;gap:30px;box-sizing:border-box}.Info{display:flex;justify-content:space-between;align-items:center;flex-direction:row}.ProjectSearchBarIcon{position:absolute;color:gray;left:0;pointer-events:none;padding:0 10px}.ProjectSearchBarText{position:absolute;left:0;padding:0 40px;color:gray;font-weight:400;pointer-events:none;transition:.25s ease}.ProjectSearchBarTextActive{position:absolute;left:0;padding:0 100px;color:#80808000;font-weight:400;pointer-events:none;transition:.25s ease}.FooterContainer{background-color:#242424;width:100%;display:flex;align-items:center;justify-content:space-between;height:fit-content;padding:20px 10px;box-sizing:border-box;border-top:1px white solid;text-align:center}.FooterContainer h2{margin:0;font-weight:10;font-size:20px}.FooterNavigation{width:0%;height:100%;display:flex;flex-direction:column}.FooterInfo{width:50%;height:100%;display:flex;flex-direction:column;align-items:center}.FooterCopyright{width:50%;height:100%;display:flex;flex-direction:column}.MainPageContainer{--borderClassic: 1px rgba(255, 255, 255, 0) solid;width:90%;display:flex;max-width:800px;justify-content:center;align-items:center;gap:100px;flex-direction:column}.MainPageContainer h1{font-size:29px}.HrFade{width:100%;-webkit-mask:linear-gradient(to left,rgba(255,255,255,1) 80%,rgba(0,0,0,0) 99%),linear-gradient(to right,rgba(255,255,255,1) 80%,rgba(0,0,0,0) 99%);-webkit-mask-composite:source-in;mask-composite:intersect}.SkillsSummary{display:flex;width:100%;flex-direction:row;align-items:center;border-bottom:var(--borderClassic);gap:10px}.SkillsContainer{width:100%;display:flex;flex-direction:column}.Technology{display:flex;width:fit-content;align-items:center;padding-right:10px;gap:10px;color:#9798fe;font-size:10px}.TechnologyContainer{display:flex;align-items:center;flex-direction:row;gap:5px;row-gap:0px;flex-wrap:wrap}.TechnologyEntry{flex-shrink:1;font-size:13px;width:120px;white-space:wrap;color:gray}.Technology h1{font-size:25px;width:fit-content}.About{width:100%;max-width:900px;display:flex;flex-direction:column}.About h1{border-bottom:var(--borderClassic)}.ProjectsMainContainer{width:100%;display:flex;justify-content:center;gap:20px;flex-direction:column}.ProjectsMainContainer h1{border-bottom:var(--borderClassic)}.LogoSkill{width:40px;background-color:#ffffff9e;border-radius:5px;padding:5px;border:1px rgba(255,255,255,.452) solid;box-sizing:border-box;transition:.25s ease;filter:brightness(.8)}@media only screen and (max-width:800px){.TechnologyEntry{flex-shrink:1;font-size:13px;width:45px;overflow:hidden;color:gray}.TechnologyContainer{display:flex;align-items:center;flex-direction:row;gap:10px;row-gap:0px;flex-wrap:wrap}.LogoSkill{width:45px;background-color:#ffffffb8;border-radius:5px;padding:5px;border:1px rgba(255,255,255,.452) solid;box-sizing:border-box;transition:.25s ease;filter:brightness(.8)}}.SubpageContainer{--borderClassic: 1px rgba(255, 255, 255, 0) solid;width:90%;height:100%;display:flex;max-width:800px;align-items:center;gap:50px;flex-direction:column}.SiteTopicHeader{display:flex;align-items:center;gap:20px}.SiteTopicHeader h1{margin:0}.ImageSliderContainer{overflow:hidden;height:fit-content;position:relative;box-sizing:border-box;display:flex;justify-content:center;align-items:center;max-width:600px;border:1px rgba(255,255,255,.3) olid;flex-direction:column;--ImageSize: 100%}.Images{width:100%;aspect-ratio:1/.56;text-align:center;display:flex;flex-direction:row;position:relative;align-items:center}.ImageContainer{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-shrink:0;cursor:pointer}.Image{pointer-events:none;touch-action:none;width:var(--ImageSize);height:var(--ImageSize);overflow:hidden}.Image img{width:100%;height:100%}.PreviewContainer{width:var(--ImageSize);aspect-ratio:1/.2;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;flex-direction:row}.PreviewContainer .PreviewImageContainer{width:20%;transition:.5s ease;display:flex;justify-content:center;align-items:center;background-image:url(/Selected.png);background-position:center;background-size:89% 89%;background-repeat:no-repeat}.PreviewImageContainer{--ease: cubic-bezier(.075, .82, .165, .8)}.PreviewImageContainer .Image{width:100%;aspect-ratio:1/.56;border:rgba(255,255,255,.4) .1px solid;transition:.5s var(--ease);pointer-events:all;border-radius:0;cursor:pointer}.PreviewImageContainer .ActiveImage{width:100%;aspect-ratio:1/.56;border-radius:0;scale:.7;border:rgb(18,18,18) .2px solid;transition:.5s var(--ease);pointer-events:all;cursor:pointer}.PreviewImageContainer .LastImage{width:100%;aspect-ratio:1/.56;border:rgba(255,255,255,.4) .1px solid;transition:.5s var(--ease);pointer-events:all;cursor:pointer;filter:saturate(0) brightness(.7);position:relative}.PreviewImageContainer .ActiveLastImage{width:100%;aspect-ratio:1/.56;border:rgba(255,255,255,.4) .1px solid;transition:.5s var(--ease);pointer-events:all;cursor:pointer;filter:saturate(0) brightness(.7);position:relative;scale:.7}.PreviewImageContainer p{position:absolute;font-size:15px}.Controllers{position:absolute;width:89%;height:7%;margin-top:-15%;display:flex;justify-content:space-between;touch-action:none;pointer-events:none}.Controllers button{pointer-events:stroke;cursor:pointer;border:rgba(255,255,255,.499) 1px solid;width:30px;height:100%;display:flex;justify-content:center;align-items:center;border-radius:5px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#ffffff87;background-color:#0202026d}
