@import"https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins;scrollbar-width:none;-ms-overflow-style:none;-webkit-user-select:none;user-select:none}:root{--dark-light-btn-size: clamp(50px, 8vw, 80px);--bg-dark: hsl(0, 0%, 0%);--bg: hsl(0, 0%, 10%);--bg-light: hsl(0, 0%, 20%);--primary-dark: #ccc;--primary-light: #ccc;--text: hsl(0, 0%, 95%);--text-muted: hsl(0, 0%, 60%);--gradient: linear-gradient(0deg, var(--bg) 98%, var(--bg-light));--shadow: 0 4px 4px hsla(0, 0%, 0%, .7), 0 4px 4px hsla(0, 0%, 0%, .15)}[data-theme=light]{--bg-dark: hsl(0, 0%, 90%);--bg: hsl(0, 0%, 95%);--bg-light: hsl(0, 0%, 100%);--primary-dark: #000065;--primary-light: #001eb3;--text: hsl(0, 0%, 10%);--text-muted: hsl(0, 0%, 40%);--gradient: linear-gradient(0deg, var(--bg) 98%, var(--bg-light));--shadow: 0 2px 2px hsla(0, 0%, 0%, .07), 0 4px 4px hsla(0, 0%, 0%, .15)}.app{display:flex;background-color:var(--bg-dark);flex-direction:column;overflow:hidden}.app .top-bttns{position:fixed;top:20px;right:20px;display:flex;gap:20px;z-index:2}.app .top-bttns .fa-paint-roller{color:var(--text);font-size:calc(var(--dark-light-btn-size) / 2);cursor:pointer}.app .top-bttns .fa-paint-roller:active{animation:click .3s ease-in-out}.app .slider{position:fixed;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;background:var(--gradient);box-shadow:var(--shadow);text-align:center;padding:15px 10px;border-radius:10px;z-index:2}.app .slider:hover{cursor:grab}.app .slider i{color:var(--text-muted);font-size:clamp(1rem,5vw,1.5rem);cursor:pointer}.app .slider i:hover{scale:1.1;transition:scale .1s ease-in-out}.app .slider i:active{animation:click .3s ease-in-out}.app .cont-1{display:flex;flex-direction:column;justify-content:space-between;height:100svh;padding:max(20px,3vw);line-height:1}.app .cont-1 h1{display:flex;flex-direction:column;font-size:clamp(2rem,8vw,4rem);font-weight:500;z-index:1;width:max-content;background:linear-gradient(90deg,var(--primary-dark),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.app .cont-1 h1 b{border-left:20px solid var(--primary-dark);border-bottom:2px solid var(--primary-dark);font-size:clamp(4rem,15vw,8rem);font-weight:900;width:min-content;padding:0 0 10px 20px;cursor:pointer}.app .cont-1 h1 b span{color:var(--text-muted);font-weight:400;-webkit-text-fill-color:currentColor}.app .cont-1 h1 b .fa-hand-pointer{-webkit-text-fill-color:currentColor;color:var(--text-muted);font-size:clamp(1.2rem,5vw,3rem);animation:tapping 3s infinite}.app .cont-1 h2{font-size:clamp(1.8rem,5vw,2rem);font-weight:500;color:var(--text);margin-bottom:15px;margin-right:60px}.app .cont-1 p{font-size:clamp(1rem,3vw,1.2rem);color:var(--text-muted);line-height:1.5;margin-right:60px;font-weight:300}.app .cont-1 .socials{display:flex;gap:max(5px,.7vw)}.app .cont-1 .socials .icon{font-size:clamp(2rem,5vw,2.5rem);background:linear-gradient(0deg,var(--primary-dark) 80%,var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;cursor:pointer}.app .cont-1 .socials .icon:hover{scale:1.1;transition:all .3s}.app .cont-1 .socials .cv{display:flex;align-items:center;gap:10px;padding-inline:10px;font-size:clamp(.8rem,3vw,1rem);color:var(--text);background:var(--gradient);box-shadow:var(--shadow);border:none;border-radius:20px;cursor:pointer;text-decoration:none}.app .cont-1 .socials .cv:hover{scale:1.05;background:var(--bg-light);transition:all .3s}.app .cont-2{padding:max(20px,3vw)}.app .cont-2 span:has(code){border-radius:20px!important;background:var(--gradient)!important;box-shadow:var(--shadow)!important}.app .cont-2 span:has(code) code{padding:0!important;translate:-50px;color:var(--text)!important}.app .cont-3{padding:max(20px,3vw);height:100svh}.app .cont-3 h1{display:flex;align-items:center;font-size:clamp(2rem,8vw,3rem);font-weight:500;color:var(--text)}.app .cont-3 h1 span{overflow:hidden}.app .cont-3 h1 b{font-size:clamp(2rem,8vw,4rem);font-weight:500;color:var(--text)}.app .cont-3 .skills{display:flex;flex-wrap:wrap;gap:15px;min-height:100px}.app .cont-3 .skills .skill{display:flex;flex-direction:column;align-items:center}.app .cont-3 .skills .skill img{width:clamp(90px,15vw,240px);aspect-ratio:1/1;object-fit:scale-down;background:#fff;padding:10px;border-radius:20px;z-index:1;cursor:pointer}.app .cont-3 .skills .skill p{font-size:clamp(1rem,3vw,1.5rem);color:var(--text-muted);text-align:center;margin-top:10px}.app .cont-4{padding:max(20px,3vw)}.app .cont-4 h1{color:var(--text);text-align:center;margin-bottom:20px;font-size:clamp(2rem,8vw,3rem);font-weight:900}.app .cont-4 .works-cont{display:flex;flex-wrap:wrap;justify-content:space-around;gap:50px}.app .cont-4 .works-cont .work{width:clamp(300px,80vw,600px);z-index:1}.app .cont-4 .works-cont .work iframe{width:100%;aspect-ratio:16/9;background-color:#fff;border:none;pointer-events:none}.app .cont-4 .works-cont .work h2{font-size:clamp(1.5rem,5vw,2rem);color:var(--text);font-weight:800;line-height:1;margin-left:10px}.app .cont-4 .works-cont .work h3{width:70%;font-size:clamp(1rem,3vw,1.2rem);color:var(--text);font-weight:500;padding-block:max(.5vw,5px) max(1.5vw,15px);margin-left:10px}.app .cont-4 .works-cont .work a{font-size:clamp(.8rem,3vw,1rem);color:var(--text-muted);font-weight:300;margin-left:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app .cont-5{display:flex;justify-content:center;padding:max(50px,4vw) max(20px,3vw)}.app .cont-5 .contacts{display:flex;flex-direction:column;gap:15px;width:min-content}.app .cont-5 .contacts h1{color:var(--text);font-size:clamp(1.2rem,5vw,2rem);font-weight:700}.app .cont-5 .contacts .contact{display:flex;gap:20px;align-items:center}.app .cont-5 .contacts .contact .icon{font-size:clamp(3rem,8vw,4rem);color:var(--text)}.app .cont-5 .contacts .contact .contact-text{display:flex;flex-direction:column;gap:5px;width:100%}.app .cont-5 .contacts .contact .contact-text h2{font-size:clamp(1rem,4vw,1.2rem);color:var(--text);font-weight:500}.app .cont-5 .contacts .contact .contact-text .link{display:flex;justify-content:space-between;gap:10px;width:100%;font-size:clamp(.6rem,2vw,.8rem);color:var(--text-muted)}.app .cont-5 .contacts .contact .contact-text .link a{color:var(--text-muted);z-index:1}.app .cont-5 .contacts .contact .contact-text .link a .fa-arrow-up-right-from-square{padding:5px;border-radius:4px;background:var(--bg);cursor:pointer}.app footer{display:flex;justify-content:center;gap:10px;padding:15px 0;background-color:var(--bg-light);color:var(--text-muted);font-size:clamp(.7rem,2.5vw,1rem);font-weight:300}.app footer .footer-text{text-align:center}@keyframes blink{0%,75%,to{opacity:1}50%{opacity:0}}@keyframes click{0%,to{transform:scale(1)}50%{transform:scale(.6)}}@keyframes tapping{0%{opacity:0}60%{opacity:0}75%{opacity:1;transform:rotate(0)}80%{transform:rotate(10deg)}85%{transform:rotate(0)}90%{transform:rotate(10deg)}95%{transform:rotate(0)}to{transform:rotate(0);opacity:1}}.toggle{width:var(--dark-light-btn-size);height:calc(var(--dark-light-btn-size) / 2)}.toggle input[type=checkbox]{display:none}.toggle label{position:absolute;top:0;right:0;width:var(--dark-light-btn-size);height:calc(var(--dark-light-btn-size) / 2);background-color:#fff;border-radius:calc(var(--dark-light-btn-size) / 2);cursor:pointer;transition:background-color .3s ease}.toggle label:before{content:"";position:absolute;top:calc(var(--dark-light-btn-size) / 24);left:calc(var(--dark-light-btn-size) / 24);width:calc(var(--dark-light-btn-size) / 2 - var(--dark-light-btn-size) / 24 * 2);height:calc(var(--dark-light-btn-size) / 2 - var(--dark-light-btn-size) / 24 * 2);border-radius:50%;background-color:#000;transition:transform .3s ease}.toggle input:checked+label{background-color:#000}.toggle input:checked+label:before{transform:translate(calc(var(--dark-light-btn-size) / 2));background-color:#fff}
