@media(max-width:768px){#root{width:100vw!important}}body{background-color:#282828;margin:0;padding:0;box-sizing:border-box}.noie-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:url(/Theo-portfolio/assets/noiseTexture2-CwRwLv8q.png);background-size:cover;pointer-events:none;z-index:1000;mix-blend-mode:difference}@media screen and (max-width:768px){body{width:100vw}}.contactButton{margin:2px 3px;display:flex;width:140px;height:46px;border:1px solid white;border-radius:30px;justify-content:center;align-items:center;background-color:#2525251a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer}.contactButton div{margin-right:10px;color:#fff;font-family:inter}.contactButton .contactIcon{font-size:24px}.contactButton .buttonText{font-style:italic}.heroSection{position:relative;margin:0 60px;padding-top:66px;margin-bottom:5vh;height:70vh}.heroSection:after{z-index:-2;top:120%;left:50%;transform:translate(-50%,-50%);content:"";width:1000px;height:900px;background:radial-gradient(ellipse,#fff 10%,#265733 31%,#1a2654 80%);position:absolute;border-radius:50%;filter:blur(70px)}.heroText{display:flex;height:400px;color:#fff}.heroText .devText{font-family:helvetica;height:inherit;width:50%;font-size:96px;font-weight:900;line-height:80px;position:relative}.devText:after{content:"< R3F.js />";font-family:inter;position:absolute;height:10px;background-color:#ff0;width:121px;height:40px;background:linear-gradient(90deg,#596d29,#77df96);border-radius:30px;top:-21px;left:28vw;font-size:12px;text-align:center;font-weight:300;display:flex;justify-content:center;align-items:center;border:2px solid;transform:rotate(10deg)}.devText:before{content:"< React />";font-family:inter;position:absolute;height:10px;background-color:#ff0;width:121px;height:40px;background:linear-gradient(90deg,#3c6586,#77b0df);border-radius:30px;top:130px;left:3vw;font-size:12px;text-align:center;font-weight:300;display:flex;justify-content:center;align-items:center;border:2px solid;transform:rotate(-10deg)}.heroText .designText{height:inherit;display:flex;align-items:end;font-size:100px;justify-content:center;width:50%;font-style:italic;font-family:the-seasons,sans-serif;line-height:70%}.heroContacts{display:flex;height:100px;width:300px;flex-wrap:wrap;margin-top:-50px}@media screen and (max-width:768px){.heroSection{width:100%;position:relative;margin:0;padding:60px 0 0 20px}.heroSection:after{width:100%}.heroText{flex-direction:column}.heroText .devText{width:100%;font-size:56px;font-weight:900;line-height:50px}.devText:after{left:50vw;top:-30px;width:100px}.devText:before{left:4vw;top:90px;width:100px}.heroText .designText{display:flex;align-items:end;justify-content:start;width:100%;font-size:140px;font-family:caramel}.heroContacts{display:flex;height:100px;width:300px;flex-wrap:wrap;margin-top:50px}}@media screen and (min-width:769px){.heroSection{height:max-content}}.testButton{width:160px;height:45px;background-color:transparent;border-radius:10px 10px 10px 2px;position:relative;display:flex;justify-content:flex-start;cursor:pointer;border:2px solid black;overflow:clip;margin-right:10px;margin-bottom:20px}.boxTile{background-color:#313131;width:160px;height:7px;position:absolute;top:42px}.boxContent{width:inherit;color:#fff;font-size:15px;z-index:1000;display:flex;justify-content:center;align-items:center}@media screen and (max-width:768px){.testButton{width:140px;margin-right:10px}.boxTile{background-color:#313131;width:140px;height:7px;position:absolute}.boxContent{width:inherit;color:#fff;font-size:12px!important;z-index:1000;display:flex;justify-content:center;align-items:center}}.aboutSection{background-color:#ececec;height:100vh;color:#000;display:flex;margin:40px 67px 120px;position:relative;overflow:hidden;border-radius:10px;border:3px solid rgba(14,14,14,.1)}.aboutSection:after{top:90%;left:100%;transform:translate(-50%,-50%);content:"";width:1200px;height:900px;background:radial-gradient(ellipse,#fff,#265733 51%,#c5c5c5 80%);opacity:.7;position:absolute;border-radius:50%;filter:blur(70px);-webkit-mask-image:inherit;mask-image:inherit}.leftStyle{width:2%;height:inherit;display:flex;justify-content:center;z-index:1}.leftBar{width:70%;background-color:#454545}.mainAbout{display:flex;padding-left:50px;padding-right:50px;padding-top:50px;font-family:inter;height:inherit;z-index:1}.aboutTitle{font-size:32px;font-weight:600;font-style:italic}.mainAbout p{font-size:20px;font-weight:200}.LeftMainAbout{width:50%;display:flex;flex-direction:column;height:90vh;justify-content:space-between}.skills{display:flex;flex-wrap:wrap;width:100%}.rightMainAbout{width:50%;padding:20px 60px;height:80vh}.ImgCard{background-color:#f5f5f54d;border:2px solid rgba(14,14,14,.1);border-radius:30px;height:100%;padding:10px;box-shadow:0 4px 50px #0e0e0e40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.profilePicture{width:100%;height:80%;display:flex;justify-content:center;align-items:center;border-radius:20px;background-image:url(/Theo-portfolio/assets/profile-pic-hLmPZn9v.jpg);background-size:cover;background-position:center}.randomQuotes{font-size:15px;font-style:italic;font-weight:300;margin:20px;color:#313131}@media screen and (max-width:1800px)and (min-width:1201px){.LeftMainAbout,.rightMainAbout{height:600px}.aboutSection{margin-top:90px;max-height:fit-content;padding-bottom:30px}}@media screen and (max-width:1200px){.aboutSection{margin-top:90px;height:max-content;padding:10px}.mainAbout{flex-direction:column;padding:10px}.LeftMainAbout{width:100%;flex-direction:column;padding:0;height:max-content}.rightMainAbout{width:100%;padding:0}}@media screen and (max-width:768px){.aboutSection{margin:90px 20px 20px;height:max-content;padding:10px}.leftStyle{display:none!important}.mainAbout{flex-direction:column;padding:10px}.LeftMainAbout{width:100%;flex-direction:column;padding:0;height:max-content}.rightMainAbout{width:100%;padding:0;height:max-content}.ImgCard{padding:10px;height:50vh}}.projectCard{margin-top:75px;margin-bottom:75px;display:flex;flex-direction:row;justify-content:space-between;gap:50px}.reverseProjectCard{margin-top:75px;margin-bottom:120px;display:flex;flex-direction:row-reverse;justify-content:space-between;gap:50px}.projectInfo{display:flex;flex-direction:column;height:70vh;justify-content:space-between;width:50%}.projectTitle h2{font-size:36px;font-weight:400;padding:0;margin:0;line-height:35px}.projectTitle p{margin:0 0 0 3px;font-size:16px;font-weight:200}.stackCards{display:flex;flex-wrap:wrap;width:100%;row-gap:5px;column-gap:5px}.DescriptionDetails{font-size:20px;font-weight:300}.projectVisit{display:flex;justify-content:space-between;width:max-content}.projectDisplay{width:50%;height:70vh;display:flex;transform-origin:center}.projectdDisplay{height:70vh;transform-origin:center;display:none}.leftTopBox{width:150px;height:130px;background-color:#8b8b8b;z-index:2;position:relative;border-radius:20px;box-shadow:5px 6px #181818;display:flex;justify-content:center;align-items:end}.leftTopBoxContent{height:90px;width:110px;background-color:#ff0;border-radius:10px 10px 0 0}.imageContainer img{width:100%}.mainBox{margin-top:-60px;margin-left:60px;width:500px;height:50vh;z-index:1;background-color:#d9d9d9;position:relative;border-radius:30px;box-shadow:5px 6px #181818}.bottomRightBox{margin-top:-120px;width:280px;margin-left:350px;height:200px;background-color:#f8f8f8;z-index:3;position:relative;border-radius:20px;box-shadow:5px 6px #181818}@media screen and (max-width:1200px){.projectInfo,.projectCard,.projectDisplay{height:max-content}.projectTitle{margin-bottom:20px;width:80%}}@media screen and (max-width:1024px){.projectCard{margin-top:35px;margin-bottom:25px;display:flex;flex-direction:column;justify-content:space-between}.projectInfo{width:100%;height:max-content}.projectDisplay{height:70vh;display:none;transform-origin:center}.projectdDisplay{margin-top:20px;display:flex;transform-origin:center;height:max-content;margin-bottom:20px}.leftTopBox{width:107px;height:96px;background-color:#8b8b8b;z-index:2;position:relative;border-radius:20px}.mainBox{margin-top:-60px;margin-left:25px;width:275px;height:241px;z-index:1;background-color:#d9d9d9;position:relative;border-radius:30px}.bottomRightBox{margin-top:-90px;width:164px;margin-left:170px;height:127px;background-color:#f8f8f8;z-index:3;position:relative;border-radius:20px}.stackCards{display:flex;flex-wrap:wrap;width:100%}}.stackCard{display:flex;align-items:center;justify-content:center;width:150px;background-color:#fbfbfb66;border-radius:30px;border:1px solid black}.stackCard p{font-size:14px;font-family:inter;font-weight:200;padding:0}@media screen and (max-width:1200px)and (min-width:1024px){.stackCard{width:max-content;padding:0 15px;height:40px}}@media screen and (max-width:768px){.stackCard{width:95px;height:35px;margin-right:5px;margin-top:5px;border:1px solid rgb(49,49,49)}.stackCard p{font-size:12px;font-family:inter;font-weight:200;padding:0}}.LinkbuttonPrimary{width:150px;padding:0 20px;display:flex;background-color:#303030;justify-content:space-between;align-items:center;height:45px;border-radius:30px;margin-right:20px;cursor:pointer}.arrow{font-weight:100}.github{font-size:22px}.LinkbuttonSecondary{width:150px;padding:0 20px;display:flex;background-color:transparent;justify-content:space-between;align-items:center;height:45px;border-radius:30px;border:1px solid black;cursor:pointer}.linkTitle{font-size:16px;font-style:italic;font-weight:200}.balloonSection{display:block;position:absolute;width:100%;height:94vh;top:0;z-index:-1;opacity:.5}@media screen and (max-width:1200px){.balloonSection{display:none}}.MobileMenu{height:100vh;width:100vw;background-color:transparent;position:absolute;top:0;left:0;overflow:clip;z-index:1000}.menuCircle{position:absolute;top:0;left:350px;width:50px;height:50px;border-radius:50%;background-color:#fff;transform-origin:center}.menuItems{position:absolute;display:flex;flex-direction:column;justify-content:space-between;width:90vw;padding:20px;font-family:inter;height:90vh}.Xicon{font-weight:200;font-size:30px}.nameLogo{font-weight:500}.Heading{display:flex;width:90vw;justify-content:space-between}.menuList{margin-top:10vh}.menuList ul{list-style-type:none;padding:0}.menuList ul li{font-size:50px;font-family:inter;border-bottom:2px solid black;font-style:italic}.randomText,.footer{text-align:center}.footerSection{background-color:#282828;height:max-content;width:100%;padding:20px;font-family:inter;color:#bebebe}.contentContainer{display:flex;justify-content:space-between;font-style:italic;line-height:350%}.leftFooter{width:55%;height:90vh;background-image:url(/Theo-portfolio/assets/ContatcUs-BnBQCFAA.png);background-position:center;background-size:cover;border-radius:20px}.leftFooter img{width:90%;height:auto;box-shadow:5px 6px #000000bf;border-radius:20px}.rightFooter{width:43%;height:90vh;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px}.rightFooter h2{font-size:64px;font-weight:700;width:100%;color:#ffffffe6}.copyright{width:100%;text-align:center}@media(min-width:769px)and (max-width:1024px){.rightFooter h2{font-size:48px;width:100%;margin:20px 0 0}.leftFooter,.rightFooter{height:60vh}}@media screen and (max-width:768px){.footerSection{padding-top:50px;width:100%}.contentContainer{display:block;padding:0 30px}.leftFooter{display:none}.rightFooter{width:100%;padding:0}.rightFooter h2{width:100%}.inputField{width:90%;height:60px}.submitBtn{width:95%}.emailField{height:100px}.copyright{padding-top:50px;font:20px;text-align:center;text-transform:uppercase}}.inputField{background-color:transparent;height:70px;width:100%;border:0px;border-bottom:1px solid rgb(190,190,190);color:#bebebe;padding:0 10px;font-size:15px}form{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}form span{color:#b06868}.inputField:focus,.messageField:focus{outline:none;border:none;background-color:#bebebe1a}.emailField{padding-top:10px;font-family:inter;height:150px}.messageField{background-color:transparent;height:120px;width:100%;border:0px;border-bottom:1px solid rgb(190,190,190);color:#bebebe;padding:10px}textarea{resize:none;font-family:inter;font-size:15px}.submitButton{width:100%;border:2px solid rgba(255,255,255,.2);height:60px;background-color:#ffffff4d;color:#fff;cursor:pointer;font-weight:700;font-size:15px;border-radius:5px}.submitButton:hover{background-color:#fff6;transition:ease-in-out .5s;box-shadow:0 0 10px #000000e6}@media screen and (max-width:768px){.inputField{width:100%;height:60px;font-size:18px}.messageField{width:100%;height:100px;font-size:18px}.submitButton{width:100%;font-size:18px}}.projectsSection{background-color:#ececec;padding:80px 67px 41px;font-family:inter}@media screen and (max-width:768px){.projectsSection{background-color:#ececec;padding:30px;font-family:inter}}.floatingBar{position:fixed;top:0;left:0;width:100%;box-shadow:0 -2px 5px #0000001a;padding:10px;display:flex;justify-content:center;align-items:center;z-index:10000}.floatingBarContainer{width:209px;background:linear-gradient(to bottom left,#4e4e4e80,#30303033);height:50px;border-radius:10px;box-shadow:0 4px 4px #0000004d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:space-between;align-items:center}.floatingBarContainer a{width:100%;display:flex;justify-content:center;align-items:center;height:100%;cursor:pointer}.floatingBarContainer a:hover{background:linear-gradient(to bottom,#4e4e4e4d,#9696961a)}.floatingBarContainer a.active{background:linear-gradient(to bottom,#ffffff4d,#ffffff1a)}.floatingBarContainer a:first-child{border-radius:10px 0 0 10px}.floatingBarContainer a:last-child{border-radius:0 10px 10px 0}@media(max-width:768px){.floatingBar{display:none}}.designSectionContainer{top:0;position:sticky;background-color:#fff;height:inherit;padding:0;box-sizing:border-box;clip-path:url(#slice);margin:0;height:100vh}.wrapper{background-color:#ececec;padding:0;height:max-content;height:300vh;position:relative}.top-slice{top:0;left:0;width:100%;height:120px;background:#fff;pointer-events:none;clip-path:url(#slice)}.section-title{font-size:72px;font-weight:400;width:100%;text-align:center;font-family:caramel;padding-top:50px;line-height:0px}.content{position:relative;z-index:1}h1{margin:0}.threeWrapper{top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;pointer-events:none;z-index:1;cursor:url(/Theo-portfolio/custom-cursor.png)16 16,none}.tooltip{position:fixed;box-sizing:border-box;display:flex;flex-direction:column;padding:0;top:0;left:0;width:200px;height:120px;z-index:9999;font-family:Arial,Helvetica,sans-serif;border-radius:12px;background-color:#d9e9e3}.tooltip_title{height:60px;padding:8px;display:flex;align-items:center;justify-content:space-between}.tooltip_title button{background-color:#000;outline:none;stroke:none;border:none;height:32px;width:32px;border-radius:50%;display:flex;justify-content:center;align-items:center}.tooltip_title .title_text{font-size:16px;font-weight:700;display:flex;flex-direction:column}.tooltip_title .title_text span{font-size:10px;font-weight:200}.tooltip_description{font-size:12px;background-color:#fff;padding:8px;border-radius:0 0 12px 12px}.tooltip_button{margin-top:8px;background-color:#000;height:30px;border-radius:6px;color:#fff;display:flex;align-items:center;padding:0 8px;justify-content:space-between}*{box-sizing:border-box}.header{color:#fff;font-family:inter;display:flex;justify-content:space-between;align-items:center;padding:0 67px;height:18vh}.logo{width:20%;font-size:16px;text-align:left;font-family:neighbor,sans-serif;font-style:normal;font-weight:400}.menu-icon{display:none}.menus{width:60%;margin:auto;display:flex;justify-content:center}.menus ul{list-style-type:none;display:flex}.noise-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:url(./assets/noiseTexture.png);background-size:cover;opacity:.1;pointer-events:none;z-index:1000;mix-blend-mode:difference}ul li{padding:10px 20px;font-size:12px;transition:transform .3s ease,color .3s ease;transform-origin:center;font-weight:200}ul li:hover{transform:perspective(500px) rotateX(5deg) skewY(-10deg);text-decoration:underline;cursor:pointer}.toggleLight{width:20%;display:flex;justify-content:end}.toggleLight .toggleSocket{width:67px;height:33px;background-color:#3a3a3a;border-radius:30px;border:1px solid white;cursor:pointer}.toggleBall{width:30px;height:30px;background-color:#fff;border-radius:50%;margin-top:1px;margin-left:35px;pointer-events:none}.buttonDescription{pointer-events:none;position:absolute;right:30px;top:100px;width:150px;font-size:12px;background-color:#fff;color:#686868;padding:10px;border-radius:8px}.buttonDescription:after{content:"";clip-path:polygon(50% 0%,0% 60%,100% 60%);width:20px;height:20px;background-color:#fff;position:absolute;top:-5px;left:42%}.buttonDescription p{margin:0;padding:0}.new-menu{display:flex;gap:5px;align-items:center}.indicator-wrapper{background-color:#71cc8466;border-radius:50%;height:10px;width:10px;display:flex;justify-content:center;align-items:center}.indicator{background-color:#71cc84;border-radius:50%;height:5px;width:5px}@media(max-width:768px){.menus{display:none}.menu-icon{display:block;font-size:30px;cursor:pointer}.header{padding:20px;height:10vh}.toggleLight{display:none}ul li:hover{transform:none;text-decoration:underline;cursor:pointer}}