@import"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";*{padding:0;margin:0;box-sizing:border-box;font-family:Outfit}body{min-height:100vh}a{text-decoration:none;color:inherit}.app{margin:auto;background-color:#000}@keyframes fadeIn{30%{opacity:0}}@keyframes slideFadeInLeft{0%{opacity:0;transform:translate(-500px)}to{opacity:1;transform:translate(0)}}@keyframes autoShowAnimation{0%{opacity:0;transform:translateY(200px) scale(.3)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes showContent{to{opacity:1;filter:blur(0);transform:translateY(0)}}@keyframes showImage{to{width:100%;height:100%;left:0;bottom:0;border-radius:0}}@keyframes showThumbnail{to{width:150px}}@keyframes transformThumbnail{to{transform:translate(0)}}@keyframes outImage{to{width:150px;height:220px;border-radius:20px;left:50%;bottom:50px}}@keyframes contentOut{to{transform:translateY(-150px);filter:blur(20px);opacity:0}}@keyframes timeRunning{to{width:0}}.navbar-contents-contents{background-color:#00000080;display:flex;align-items:center;justify-content:space-evenly;position:relative;z-index:100}.title{margin:30px 0;display:flex;cursor:pointer;position:relative}.title .select{width:10px;height:10px;position:absolute;left:222px;bottom:7px}.title .red{color:red}.title .white{color:#fff}.navbar-contents h2{margin:0 100px;color:#fff;cursor:pointer}.menu{display:flex;align-items:center;gap:10px}.menu-logo{cursor:pointer}.menu h2{margin:0}.menu-options{display:none;position:absolute;top:75px;font-size:20px;background:#000;border-radius:10px;cursor:pointer}.menu:hover .menu-options{display:block;padding:10px}.menu-options p{color:#fff}.navbar button{background:transparent;font-size:18px;color:#49557e;border:1px solid red;padding:10px 30px;border-radius:50px;cursor:pointer;transition:.3s}.carousel{width:90%vw;height:100vh;overflow:hidden;margin-top:-98px;position:relative}.carousel .list .item{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;z-index:0;transition:opacity .5s ease,visibility .5s ease}.carousel .list .item img{width:100%;height:100%;object-fit:cover}.carousel .list .item .content{position:absolute;top:20%;width:1140px;max-width:80%;left:50%;transform:translate(-50%);padding-right:30%;box-sizing:border-box;color:#fff;text-shadow:0 5px 10px #0004}.carousel .list .item .content .content-name{font-weight:700;letter-spacing:10px}.carousel .list .item .content-content,.carousel .list .item .content-content-item{font-weight:700;font-size:2em;list-style:1.3em}.carousel .list .item .content-content-item{color:#fff4f2}.carousel .list .item .content button{margin-top:20px;color:#eee;letter-spacing:3px;font-weight:500}.carousel .list .item .content button:hover{color:#000}.thumbnail{position:absolute;bottom:50px;left:75%;z-index:100;display:flex;gap:20px}.thumbnail .item{width:150px;height:220px;flex-shrink:0;position:relative}.thumbnail .item img{width:100%;height:100%;object-fit:cover;border-radius:20px}.thumbnail .item .content{position:absolute;bottom:10px;left:10px;right:10px}.thumbnail .item .content .title{font-weight:700;color:#fff}.thumbnail .item .content .des{color:#fff}.arrows{position:absolute;top:80%;right:52%;width:300px;max-width:30%;display:flex;gap:10px;align-items:center}.arrows button{width:40px;height:40px;border-radius:50%;color:#fff;background-color:#eee4;border:none;font-weight:700;font-size:large;transition:.5s;z-index:100}.arrows button:hover{background-color:#eee;color:#555}.carousel .list .item:nth-child(1){opacity:1;visibility:visible;z-index:1}.carousel .list .item:nth-child(1) .content-name .carousel .list .item:nth-child(1) .content-content,.carousel .list .item:nth-child(1) .content-content-item,.carousel .list .item:nth-child(1) .content-content-item2,.carousel .list .item:nth-child(1) .buttons{transform:translateY(50px);filter:blur(20px);opacity:0;animation:showContent .5s 1s linear 1 forwards}.carousel .list .item:nth-child(1) .content-content{animation-delay:1.2s}.carousel .list .item:nth-child(1) .content-content-item{animation-delay:1.4s}.carousel .list .item:nth-child(1) .content-content-item2{animation-delay:1.6s}.carousel .list .item:nth-child(1) .buttons{animation-delay:1.8s}.carousel.next .list .item:nth-child(1) img{width:150px;height:220px;position:absolute;left:50%;bottom:50px;border-radius:20px;animation:showImage .5s linear 1 forwards}.carousel.next .thumbnail .item:nth-child(1){width:0;overflow:hidden;animation:showThumbnail .5s linear 1 forwards}.carousel.carousel.next .thumbnail{transform:translate(150px);animation:transformThumbnail .5s linear 1 forwards}.carousel.prev .list .item:nth-child(2){z-index:2}.carousel.prev .list .item:nth-child(2) img{position:absolute;bottom:0;left:0;animation:outImage .5s linear 1 forwards}.carousel.prev .thumbnail .item:nth-child(1){width:0;overflow:hidden;opacity:0;animation:showThumbnail .5s linear 1 forwards}.carousel.prev .list .item:nth-child(2) .content-name,.carousel.prev .list .item:nth-child(2) .content-content,.carousel.prev .list .item:nth-child(2) .content-content-item,.carousel.prev .list .item:nth-child(2) .content-content-item2,.carousel.prev .list .item:nth-child(2) .buttons{animation:contentOut 1.5s linear 1 forwards}.carousel.next .arrows button,.carousel.prev .arrows button{pointer-events:none}.time{width:0%;height:3px;background-color:#f1683a;position:absolute;z-index:100;top:0;left:0}.carousel.next .time,.carousel.prev .time{width:100%;animation:timeRunning 2s linear 1 forwards}@media (max-width: 1000px){.navbar-contents h2{display:none}.about h1{font-size:70px}.menu-options p{font-size:17px}.carousel{width:100vw;height:100vh;overflow:hidden}.carousel .list .item img{width:100vw;height:100vh;object-fit:cover}.carousel .list .item .content{padding-right:0}.carousel .list .item .content .content-content{font-size:30px}.thumbnail{position:absolute;gap:0px;left:60%}.thumbnail .item{position:relative}.thumbnail .item img{width:150px;height:300px;object-fit:cover;border-radius:20px}.thumbnail .item .content{position:relative;bottom:-160px;left:-140px;right:10px}}@media (max-width:500px){.thumbnail{display:none}.arrows{position:absolute;bottom:10px}}.header{background-color:#000;display:flex;animation:slideFadeInLeft 3s;animation-timeline:scroll()}.header-options{border-right:2px solid white;display:flex;flex-direction:column;padding:100px 20px;gap:40px}.header-options h2{color:#fff;font-size:30px;cursor:pointer}.description-box{padding:20px;color:#fff;width:80%;border-radius:10px;box-shadow:0 0 10px #00000026}.description-box h3{font-size:40px;font-weight:600}.description-box p{font-size:20px}.full-stack{font-size:20px;margin-top:20px}.full-stack-details{padding:0 15px;animation:slideFadeInLeft 3s}.user-dev{font-size:20px;margin-top:20px}.user-dev-details{padding:0 15px;animation:slideFadeInLeft 3s}.dot{margin-top:10px;cursor:pointer}.info{font-size:20px;padding:15px;animation:slideFadeInLeft 3s}.social-media{margin-top:10px;cursor:pointer}.position h2.active,.asd h2.active{border-bottom:4px solid rgb(139,45,45)}@media (max-width:500px){.header-options{width:25%}.header-options h2{font-size:20px}.description-box h3{font-size:28px}.description-box p,.description-box li{font-size:17px}}.about-me{background-color:#000}.about-me-contents{display:flex;width:90%;margin:auto}.profile-pic img{width:400px;margin:100px 0}.profile{animation:fadeIn;animation-duration:3s;animation-timeline:scroll();margin:100px;color:#fff}.profile h1{font-size:50px}.profile p{font-size:20px}.profile-contents{margin-top:20px;margin-bottom:20px;display:flex;gap:50px;color:#8b2d2d;cursor:pointer}.raya .active,.line .active{border-bottom:4px solid white}.autoRotate{animation-name:autoRotateAnimation;animation-duration:2s;animation-timeline:scroll();animation-range:entry 0% entry 80%;animation-fill-mode:forwards}@keyframes autoRotateAnimation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width:950px){.about-me-contents{display:block;justify-items:center}.profile-pic img{margin:50px 0;width:370px}.profile{margin:0 20px 50px}}.footer{background-color:#000;margin-top:100px}.footer-content{text-align:center;padding:15px;font-family:Arial,sans-serif;color:#fff;font-size:16px;border-top:2px solid white}.business{background:url(/profit.png);min-height:90vh;padding-bottom:60px}.business h1{color:#000;font-weight:700;letter-spacing:5px;justify-self:center;padding:30px 0}.business-type{background-color:#fff;position:relative;width:95%;margin:auto}.business-type h2{color:#000}.business-type-effect{position:relative;padding:20px;width:95%;margin:auto}.business-options{position:relative;display:flex;margin:30px 0;justify-content:space-evenly;gap:50px}.business-card{position:absolute;border:1px solid black;border-radius:20px}.business-card img{width:100%;height:70%;object-fit:cover;border-radius:10px 10px 0 0}.business-card{position:relative;background-color:transparent;border-radius:12px;transition:transform .3s ease,background-color .3s ease;height:400px;width:400px}.business-card:hover{transform:scale(1.05)}.overlay{position:relative;z-index:1;padding:10px;color:#fff}.overlay h3{margin:7px 0;color:#000}.business-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:#00000080;z-index:0;opacity:0;transition:opacity .3s ease;border-radius:10px}.business-card:hover:before{opacity:1}.button{display:flex;justify-content:center;margin-top:10px}.business-button{padding:7px;border-radius:10px;cursor:pointer;font-size:15px;letter-spacing:3px;font-weight:700}.business-button:hover{background-color:#000;color:#fff}@media (max-width: 700px){.business-options{display:block;justify-items:center;gap:50px}.business h1{padding:20px;font-size:25px}.business-type h2{font-size:15px}.business-card{width:90%;margin:30px}}.list{place-items:center}.item{display:flex;position:relative;align-items:center}.item img{width:400px}.item-contents{width:700px;background-color:#000;padding:30px}.item-contents h1{justify-self:center;letter-spacing:3px;font-size:50px;color:#fff}.item-contents-contents{display:flex;margin:20px 0;padding:10.8px}.item-contents-contents img{width:30px}.item-contents-contents p{font-weight:700;letter-spacing:1px;font-size:20px;color:#fff}@media (max-width:1000px){.item{display:contents;align-items:center}.item-contents{width:80%}}