:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:90vw;margin:0 auto;padding:1rem;text-align:center;--color1: #2e2d2d;--accent1: hsl(202, 58%, 48%);--accent2: #0c7ec074}ul{list-style-type:none}#page1{width:100%;height:600px}#navbar{width:90vw;top:0;height:40px;display:flex;justify-content:space-between;position:fixed;z-index:3;background-color:#000;padding-top:15px}.personal-logo{width:100px;height:auto;border-radius:15px;box-shadow:3px 3px 10px #fff}.directory{width:300px;height:auto;box-shadow:3px 3px 10px #fff;border-radius:15px;background-color:#000;color:var(--accent1)}.navbar-list{display:flex;justify-content:space-around;font-family:Arial;font-weight:700;margin-left:-40px;margin-top:10px;font-size:.8rem}.social{width:130px;height:auto;box-shadow:3px 3px 10px #fff;border-radius:15px;padding-top:10px;padding:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;background-color:#000}.icon-navbar{font-size:1rem}#music-toggle{width:125px;height:40px;margin-top:35px}.video-text-container{position:relative;width:100%;height:200px;overflow:hidden}.video-text-container video{width:100%;height:90%;object-fit:cover;position:absolute;top:0;left:0}.text-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#2e2d2d;color:#fff;mix-blend-mode:multiply}.text-overlay h1{font-size:18vw;font-family:Arial Black,sans-serif;text-transform:uppercase}.text{width:80%;min-height:200px;margin:65px auto 0;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:2.5rem}.author-button-box{width:80%;margin:0 auto;display:flex;justify-content:space-between;align-items:center}#author{text-align:left;font-style:italic;font-size:.75rem}.quote-button{width:60px;height:20px;border-radius:15px;background-color:#000;font-weight:700}.quote-button:hover{cursor:pointer}#page2{width:100%;margin:150px auto 0;padding-top:30px}.project-giant-title{font-size:6vw;font-family:Arial Black,sans-serif;text-transform:uppercase;text-align:left}.list-of-projects{text-align:left;font-weight:700}.project-1{position:relative;height:500px;margin-top:100px;background-image:url(/assets/bali1-CDVoenfs.jpg);background-size:cover;background-position:center center;display:grid;grid-template-columns:33% 67%;border-radius:20px}.project-detail{display:flex;flex-direction:column;justify-content:space-around}.la-lune-image-box{margin:auto 0}#la-lune-image{width:70%;border-radius:10px}.project-client,.project-year,.position,.project-name,.project-description,.project-link{text-align:left;margin-left:50px;color:#000}.project-client{font-family:Helvetica;font-size:1.1rem;font-weight:900}.project-year{font-family:Verdana;font-size:.7rem;font-weight:400}.position{font-family:Lucida Console;font-size:1rem;font-weight:400}.project-name{font-family:Arial Narrow;font-size:1.5rem;font-weight:900}.project-description{font-family:Arial Narrow;font-size:.7rem;font-weight:400}.project-link{font-family:Monaco;font-size:.8rem;font-weight:700;border:3px solid white;color:#fff;width:120px;padding:15px;text-align:center}.project-2{position:relative;height:500px;background-image:url(/assets/bali2-CCakanQh.jpg);background-size:cover;background-position:center center;display:grid;grid-template-columns:33% 67%;border-radius:20px;margin-top:100px}.studio-agatho-image-box{margin:auto 0}#studio-agatho-image{width:80%;border-radius:10px}.project-3{position:relative;height:500px;background-image:url(/assets/raja-ampat2-Dfi2ZgFf.jpg);background-size:cover;background-position:center center;display:grid;grid-template-columns:33% 67%;border-radius:20px;margin-top:100px}.techcare-image-box{margin:auto 0}#techcare-image{width:70%;border-radius:10px}.other-project{margin-top:100px;display:grid;grid-template-columns:1fr 1fr 1fr}.card{background-color:#828080fa;border-radius:10px;margin:15px auto;width:230px;height:250px}.card:hover{transform:scale(1.01)}.card-title{color:#e5ddd5}.card-image{width:230px;height:150px}#certificate-box{margin-top:200px;width:100%;display:flex;flex-direction:column}#certificate-box>h2{font-family:Courier New;font-size:3rem}.certificates{display:flex;flex-direction:column}.certificate{margin:50px auto 0;width:650px}#page3-skills{width:100%;height:100vh;margin-top:100px;padding-top:50px}.skill-title{font-family:Courier New;font-size:3rem}.skill-description{margin-top:-50px}.front-end-container ul{display:grid;grid-template-columns:1fr 1fr 1fr 1fr}.design-container ul{display:grid;grid-template-columns:1fr 1fr}.management-container ul{display:grid;grid-template-columns:1fr 1fr 1fr}.skill-subtitle{margin-top:100px;font-family:Optima;font-size:1.5rem}.skill{font-family:Arial Narrow;margin-left:-35px;border:1px solid #0c7ec0;border-radius:15px;width:100%;background-color:#0c7ec058;display:inline-block;overflow:hidden}.fe{display:inline-block;animation:scrolling-animation1 3s linear infinite}.ed{display:inline-block;animation:scrolling-animation2 3s linear infinite}.mg{display:inline-block;animation:scrolling-animation3 3s linear infinite}@keyframes scrolling-animation1{0%{transform:translate(50px)}50%{transform:translate(-20px)}to{transform:translate(50px)}}@keyframes scrolling-animation2{0%{transform:translate(-15px)}50%{transform:translate(50px)}to{transform:translate(-15px)}}@keyframes scrolling-animation3{0%{transform:translate(50px)}50%{transform:translate(-20px)}to{transform:translate(50px)}}#page4-faq{height:100vh}.bio{width:60%;margin:0 auto}span{font-size:2rem;color:#0c7ec0}.faq{margin-top:100px}.question1,.question2,.question3,.question4,.question5{border:1px solid #0c7ec0;background-color:#0c7ec058;border-radius:50px;margin-top:50px;display:flex}.question{text-align:left;margin:20px 0 20px 2%;display:none}.answer{margin-top:-40px;text-align:left;display:none}#page5-stay-connected{height:80vh;margin-top:140px}.stay-connected{color:var(--accent1)}.social-media-container{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:150px;justify-content:center;align-items:center}.contact-link{width:70%;margin:0 auto}.box{border-radius:20px;width:100%;margin:10px auto;padding-top:15px;border:1px solid #0c7ec0;background-color:#0c7ec058}.icon{font-size:1.5rem}.social-media-name{margin-top:-10px}footer{margin-top:200px;font-size:.8rem;padding-bottom:15px}footer p{margin-top:0}a{text-decoration:none;color:inherit}.social a:hover{transform:scale(1.1)}.navbar-list li a:hover{font-size:.85rem}.contact-link:hover{transform:scale(1.025)}.hidden{display:none}@media only screen and (max-width:768px)and (min-width:481px){#navbar{width:90%}.personal-logo,.directory,.social{transform:scale(.9)}.quote-box{transform:scale(.8)}.project-1{position:relative;height:50vh}.project-detail{width:35%;height:50vh}.project-client,.project-year,.position,.project-name,.project-description,.project-link{margin-left:20px}#la-lune-image{position:relative;width:60%;top:-65%;right:-48%;transform:translate(-50%,-50%)}.project-client{font-size:2vw;margin-top:50px}.project-year{font-size:1vw}.position{font-size:1vw;margin-top:60px}.project-name{font-size:2vw;font-weight:900}.project-description{font-size:1vw;font-weight:400;margin-top:0}.project-link{font-size:1.2vw;margin-top:80px;width:15vw;padding:5px;text-align:center}.project-2{height:50vh;background-image:url(/assets/bali2-CCakanQh.jpg)}#studio-agatho-image{position:relative;width:auto;height:25vw;top:-70%;right:-48%;transform:translate(-50%,-50%)}#page4-faq{margin-top:350px}.bio{margin-top:350px;width:75%;font-size:1rem}#page5-stay-connected{margin-top:400px}footer{margin-top:60px}}@media screen and (max-width:480px){#page2{margin-top:300px;padding-top:30px}.project-1{height:250px}.project-client,.project-year,.position,.project-name,.project-description,.project-link{margin-left:20px}.project-client{font-size:.7rem}.project-year{font-size:.4rem}.position{font-size:.7rem}.project-name{font-size:.9rem}.project-description{font-size:.5rem}.project-link{font-size:.5rem;border:2px solid white;width:70px;padding:5px}.project-2,.project-3{height:250px}.other-project{grid-template-columns:1fr 1fr}.card{border-radius:10px;margin:10px auto;width:130px;height:160px}.card:hover{transform:scale(1.01)}.card-title{font-size:.65rem}.card-image{width:130px;height:110px}#certificate-box{width:260px}#certificate-box>h2{font-size:1.5rem}.certificates{display:flex;flex-direction:column}.certificate{margin:30px auto 15px;width:250px}}