@import url(https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);*,body{font-family:Poppins,sans-serif}.navbar a,.navbar a:hover,body{color:var(--text-color)}.contact-text p,.gallery,.judul,.ket-skill,.skill,footer{text-align:center}*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;outline:0;scroll-behavior:smooth}@keyframes blink-cursor{50%{border-color:transparent}}.header,footer .links a:hover{border-bottom:2px solid var(--main-color)}:root{--bg:#000000;--bg-sec:rgb(61, 0, 0);--text-color:#fff;--main-color:rgb(255, 32, 78)}html{font-size:62.5%;overflow-x:hidden}body{background-color:var(--bg)}html::-webkit-scrollbar{width:.8rem}html::-webkit-scrollbar-track{background-color:var(--bg)}.btn-visit:hover,.btn:hover,.navbar a:hover,.social-media a:hover{background-color:var(--main-color)}html::-webkit-scrollbar-thumb{background-color:var(--main-color);border-radius:50px}.header{position:fixed;top:0;left:0;width:100%;padding:2.7rem 9%;background-color:rgba(0,0,0,.7);filter:drop-shadow(10px);display:flex;justify-content:space-between;align-items:center;z-index:100;box-shadow:0 0 20px var(--main-color);transition:top .3s ease-in-out}.card,.content .text,.home-img img{position:relative}.home,footer{background-color:var(--bg)}.btn,.home-img img,.logo,.social-media a{transition:.3s}.logo{width:5%;height:auto}.logo:hover{transform:scale(1.03);filter:drop-shadow(0 0 10px var(--main-color))}.navbar a{padding:1rem 2rem;font-size:1.6rem;margin-left:1.6rem;font-weight:500;border-radius:25px}#menu-icon,.btn,.content .text,.social-media a,span{color:var(--main-color)}.home-img,.home-img img{border-radius:50%}.navbar a:hover{transition:.3s}#menu-icon{font-size:2.6rem;display:none}.home{display:flex;justify-self:center;align-items:center;gap:8rem;background-image:url('../img/bg-conv.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;min-height:100vh;padding:5rem 9%}.judul,.social-media a{justify-content:center}.btn,.btn-visit{padding:1rem 2.8rem;background:var(--bg);font-size:1.6rem;letter-spacing:.1rem;font-weight:600;cursor:pointer}.home .content h1{font-size:6rem;font-weight:700;line-height:1.3}.content .text{font-size:3.7rem;font-weight:600}.content .text.first-text{color:var(--text-color)}.text.sec-text{font-size:4rem;font-weight:600;padding-left:10px;border-right:3.5px solid var(--main-color);white-space:nowrap;overflow:hidden;animation:.75s step-end infinite blink-cursor}.home-img img{width:29vw;cursor:pointer}.home-img img:hover{transform:scale(1.01) translateY(-5px);filter:drop-shadow(0 0 25px var(--main-color));box-shadow:0 25px var(--main-color)}.btn-visit:hover,.btn:hover,.contact-content a:hover,.social-media a:hover,footer .social a:hover{box-shadow:0 0 25px var(--main-color)}.content p{font-size:1.8rem;font-weight:500}.social-media a{display:inline-flex;align-items:center;width:4rem;height:4rem;background:0 0;border:.2rem solid var(--main-color);font-size:2rem;border-radius:50%;margin:3rem 1.5rem 3rem 0}.social-media a:hover{color:#fff;transform:scale(1.3) translateY(-5px)}.btn{display:inline-block;border-radius:4rem;border:2px solid var(--main-color)}.btn-visit:hover,.btn:hover{transform:scale(1.03);color:var(--text-color)}.gallery{height:110vh}.lazy{filter:blur(5px);transition:filter .3s ease-in}.btn-visit,.contact-content a{transition:.3s;color:var(--main-color)}.lazy:not([data-src]){filter:none}.judul{display:flex}.judul h1{font-size:5rem;border-left:3.5px solid var(--main-color);padding:0 1.7rem;margin:2.8rem 0}.judul .my-gallery,.my-skill{scroll-margin-top:70px}.judul .my-contact{scroll-margin-top:300px}.foto-content{height:70%;overflow-y:auto;margin:0 4rem;border-radius:15px}.foto-container{width:calc(100% - 40px);margin:20px auto;columns:4;column-gap:20px}.foto-content::-webkit-scrollbar{width:.6rem}.foto-content::-webkit-scrollbar-track{background-color:rgba(255,143,143,.329)}.foto-content::-webkit-scrollbar-thumb{background-color:var(--main-color);border-radius:50px}.foto-container .box{width:100%;margin-bottom:10px;break-inside:avoid}.foto-container .box img{width:100%;border-radius:15px;user-select:none;-webkit-user-drag:none;pointer-events:none}.visit-button{display:flex;margin-top:20px;justify-content:center;align-items:center}.btn-visit{border-radius:4rem;border:2px solid var(--main-color)}.back,.front{background-color:#181818;display:flex}.skill{height:100vh}.back,.card,.front{height:100%;width:100%}.skillME{margin-top:6rem}.skill-content{display:flex;margin:2rem;border-radius:15px;align-items:center;justify-content:center;gap:2.4rem;flex-wrap:wrap}.container{flex:1 1 auto;aspect-ratio:1.4/1;min-width:350px;max-width:300px;perspective:800px;margin:0 1rem}.container:hover>.card{cursor:pointer;transform:rotateY(180deg)}.container a{font-size:4rem;color:var(--main-color)}.card{transition:transform 1.5s;transform-style:preserve-3d}.back,.front{border-radius:10px;box-shadow:0 0 5px 2px rgba(50,50,50,.25);position:absolute;backface-visibility:hidden;border:2px solid var(--main-color);box-shadow:0 0 15px var(--main-color)}.front{flex-direction:column;justify-content:center;align-items:center;row-gap:2rem}.front p{font-size:1rem;width:70%}.back{transform:rotateY(180deg);flex-direction:column;justify-content:center;align-items:center}.back h1{font-size:2rem;margin-bottom:1.4rem}.ket-skill{display:flex;justify-content:center;align-items:end;margin-top:5rem}.ket-skill p{font-size:1.5rem;max-width:60%;min-width:30%}.skill-container{width:300px;background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1)}.skill-indicator{margin-bottom:20px;width:80%;text-align:start}.skill-name{font-weight:700;margin-bottom:5px}.skill-bar{height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden}.contact-content a,.contact-content a:hover,.skill-progress,footer .social a:hover{background-color:var(--main-color)}.skill-progress{height:100%;width:0;animation:2s ease-out forwards fillBar}.background-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.contact{position:relative;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;flex-direction:column}.contact::after,.contact::before{content:"";position:absolute;width:100%;height:30%;z-index:0}.contact::before{top:0;left:0;background:linear-gradient(to bottom,#000,rgba(0,0,0,0))}.contact::after{bottom:0;left:0;background:linear-gradient(to top,#000,rgba(0,0,0,0))}.contact-content{display:flex;gap:3rem;flex-wrap:wrap;justify-content:center}.contact-content a{background:0 0;border:.2rem solid var(--main-color);font-size:2rem;padding:.6rem 1.2rem;border-radius:10px;margin-right:1rem}.contact-content a:hover{color:#fff}.contact-text{display:flex;justify-content:center;margin-top:4rem}.contact-text p{display:flex;align-items:center;justify-content:center;font-size:1.5rem;min-width:60%;max-width:70%}.info-item,.info-item2{display:flex;align-items:center;justify-content:center;background-color:rgba(61,0,0,.652);padding:1.2rem 2rem;min-width:300px;border-radius:10px;border:.2rem solid var(--main-color);box-shadow:0 0 10px var(--main-color)}footer{padding:.5rem 0 1rem;margin-top:0}footer .social{padding:1rem 0}footer .social a{color:var(--main-color);margin:.3rem;font-size:2.5rem;padding:.3rem 1rem;border-radius:10px}footer .social a:hover{color:#fff;transition:.4s}footer .links a:hover{color:var(--main-color);transition:.3s}footer .links{margin-bottom:1.4rem;font-size:1.5rem;font-weight:500}footer .links a{color:#fff;padding:.7 1rem;margin:0 .3rem}footer .credit{font-size:1.1rem}footer .credit a{color:var(--main-color);font-weight:700}@keyframes fillBar{0%{width:0}}@media (max-width:995px){html{font-size:45%}.header{padding:3.5rem 9%}.foto-container{columns:3}.container{flex:1 1 auto;aspect-ratio:1.4/1;min-width:300px;max-width:200px;perspective:800px;margin:1rem}.info-item,.info-item2{min-width:250px}}@media (max-width:768px){#menu-icon,.navbar a,.navbar.active{display:block}.navbar,.navbar a{border-bottom:3px solid var(--main-color)}html{font-size:40%}.home{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.home-img img{width:280px;height:auto}.navbar{position:absolute;top:100%;right:0;width:40%;border-left:3px solid var(--main-color);border-top-left-radius:2rem;padding:3.7rem 3%;background-color:var(--bg-sec);border-top:.1rem solid rgba(0,0,0,.4);display:none}.navbar a{font-size:2rem;margin:3rem 0;border-radius:.5rem}.navbar a.active,.navbar a:hover{padding:1rem;border-radius:.5rem;border-bottom:.5rem solid var(--main-color)}.foto-container{columns:2}.container{flex:1 1 auto;aspect-ratio:1.4/1;min-width:275px;max-width:200px;perspective:800px;margin:0 1rem}}@media (max-width:540px){.home-img img{filter:drop-shadow(0 0 25px var(--main-color));box-shadow:0 25px var(--main-color);transition:.3s}.home-img img:hover{filter:none;box-shadow:none}.foto-container .box img{border-radius:8px}.container{flex:1 1 auto;aspect-ratio:1.4/1;min-width:225px;max-width:200px;perspective:800px;margin:1rem}.info-item,.info-item2{min-width:200px}}

/* */