@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700&display=swap");*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:10px}body{background-color:#1d1d20;color:#d1d1d1;font-family:Montserrat,sans-serif;height:100vh;overflow-y:hidden;overflow:hidden;position:relative}a{color:#777;text-decoration:none}a i:hover{color:var(--grad-1);scale:1.1;transition:color .3s ease-in-out}:root{--grad-1:#4846cb;--grad-2:#659d66;--grad-3:#ff6b6b;--grad-4:#feca57;--grad-5:#48dbfb}.main-container{align-items:center;background-color:#1d1d20;display:flex;height:46.925329429vw;justify-content:center;left:50%;opacity:0;position:absolute;top:50%;transition:opacity .7s ease;translate:-50% -50%;width:100vw}.outer-container{background-color:#1d1d20;height:100%;position:relative;width:93.99%}.outer-container .bottom-right-container{display:inline-block;height:23.4297218155vw;left:0;position:absolute;top:0;width:23.4297218155vw}.outer-container .first-bottom-right{background:linear-gradient(135deg,var(--grad-2) 0,var(--grad-1) 50%,var(--grad-2) 100%)}.outer-container .second-bottom-right{background:linear-gradient(135deg,var(--grad-1) 0,var(--grad-2) 50%,var(--grad-1) 100%)}.outer-container .bottom-right{border-radius:.7320644217vw 0 0 0;-webkit-clip-path:polygon(97% 0,90% 7%,7% 7%,7% 90%,0 97%,0 0);clip-path:polygon(97% 0,90% 7%,7% 7%,7% 90%,0 97%,0 0)}.outer-container .bottom-right,.outer-container .top-left{height:100%;position:absolute;transition:all .3s ease-in-out;width:100%}.outer-container .top-left{border-radius:0 0 .7320644217vw 0;-webkit-clip-path:polygon(93% 10%,100% 3%,100% 100%,3% 100%,10% 93%,93% 93%);clip-path:polygon(93% 10%,100% 3%,100% 100%,3% 100%,10% 93%,93% 93%)}.outer-container .top-left-conrainer{bottom:0;display:inline-block;height:23.4297218155vw;position:absolute;right:0;width:23.4297218155vw}.outer-container .sub-containers{height:100%;position:relative;width:100%}.outer-container .first-top-left{background:linear-gradient(315deg,var(--grad-2) 0,var(--grad-1) 50%,var(--grad-2) 100%)}.outer-container .second-top-left{background:linear-gradient(315deg,var(--grad-1) 0,var(--grad-2) 50%,var(--grad-1) 100%)}.outer-container .inner-container{background-color:#1d1d20;height:93%;left:50%;position:absolute;top:50%;translate:-50% -50%;width:96.508%;z-index:99}.outer-container .inner-container .static-footer{-webkit-touch-callout:none;align-items:center;bottom:1.83016vw;color:#d1d1d1;display:flex;font-size:.878477306vw;font-weight:400;justify-content:flex-end;position:absolute;right:5.12445vw;-webkit-user-select:none;-moz-user-select:none;user-select:none}.outer-container .inner-container .static-footer span{margin-left:2px}.outer-container .inner-container header{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding-top:2.5622254758vw;padding-inline:2.0497803807vw}.outer-container .inner-container header .k-logo{cursor:pointer;height:3.6603221083vw;transition:scale .1s ease-in-out;width:3.6603221083vw}.outer-container .inner-container header .k-logo:hover{scale:1.05}.outer-container .inner-container header .k-logo:active{scale:1}.outer-container .inner-container header .k-logo .k-logo-overall-container{height:100%;position:relative;width:100%}.outer-container .inner-container header .k-logo .main-k-letter{background-color:#bbb;-webkit-clip-path:polygon(20% 93%,20% 7%,45% 7%,45% 33%,63% 7%,90% 7%,61% 50%,90% 93%,63% 93%,45% 66%,45% 93%);clip-path:polygon(20% 93%,20% 7%,45% 7%,45% 33%,63% 7%,90% 7%,61% 50%,90% 93%,63% 93%,45% 66%,45% 93%);height:100%;position:absolute;width:100%;z-index:999}.outer-container .inner-container header .k-logo .first-shadow{background-color:#777;-webkit-clip-path:polygon(3% 6%,20% 20%,20% 100%,3% 83%);clip-path:polygon(3% 6%,20% 20%,20% 100%,3% 83%);height:107.2%;left:2%;position:absolute;top:-14.3%;width:85%;z-index:999}.outer-container .inner-container header .k-logo .second-shadow{left:4.8%;width:100%}.outer-container .inner-container header .k-logo .second-shadow,.outer-container .inner-container header .k-logo .third-shadow{background-color:#777;-webkit-clip-path:polygon(0 0,25% 0,40% 15%,15% 15%);clip-path:polygon(0 0,25% 0,40% 15%,15% 15%);height:100%;position:absolute;top:-9%;z-index:999}.outer-container .inner-container header .k-logo .third-shadow{left:47%;width:106%}.outer-container .inner-container header .k-logo .fourth-shadow{background-color:#777;-webkit-clip-path:polygon(35% 16.4%,26% 13%,36% 1.5%,51.5% 16.7%,35% 40.7%);clip-path:polygon(35% 16.4%,26% 13%,36% 1.5%,51.5% 16.7%,35% 40.7%);height:100%;left:10.5%;position:absolute;top:-10%;width:100%;z-index:99}.outer-container .inner-container header .k-logo .fifth-shadow{background-color:#777;-webkit-clip-path:polygon(0 11%,.5% 0,18.5% 27%);clip-path:polygon(0 11%,.5% 0,18.5% 27%);height:100%;left:43.5%;position:absolute;top:66%;width:100%;z-index:99}.outer-container .inner-container header .contact-me-links{align-items:center;display:flex;list-style:none}.outer-container .inner-container header .contact-me-links a{height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}.outer-container .inner-container header .contact-me-links a:hover .sharp-popup-container{opacity:1;transform:translateY(0) scaleX(1)}.outer-container .inner-container header .contact-me-links .sharp-popup-container{left:50%;opacity:0;position:absolute;top:-125%;transform:translateY(1.3473053892vw) scaleX(0);transform-origin:50% 50%;transition: opacity .25s ease-in-out, transform .25s ease-in-out;translate:-50% 0}.outer-container .inner-container header .contact-me-links .sharp-popup-container .sharp-popup{background-color:#1d1d20;border-left:.1497005988vw solid #777;border-radius:.1464128843vw;border-right:.1497005988vw solid #777;border-top:.1497005988vw solid #777;color:#d1d1d1;font-size:.8052708638vw;font-weight:700;padding:.2928257687vw .7320644217vw 1.0479041916vw;position:relative}.outer-container .inner-container header .contact-me-links .sharp-popup-container .sharp-popup .right{background-color:#1d1d20;border-radius:100rem 0 0 0;bottom:-10%;content:"";height:40%;position:absolute;right:-10%;width:60%}.outer-container .inner-container header .contact-me-links .sharp-popup-container .sharp-popup .right .sub-container{border-radius:100rem 0 0 0;height:100%;position:relative;width:100%}.outer-container .inner-container header .contact-me-links .sharp-popup-container .sharp-popup .right .sub-container .sub{border-left:.1497005988vw solid #777;border-radius:100rem 0 0 0;border-top:.1497005988vw solid #777;height:100%;left:-3%;position:absolute;top:0;width:70%}.outer-container .inner-container header .contact-me-links .sharp-popup-container .sharp-popup .left{background-color:#1d1d20;border-radius:0 100rem 0 0;bottom:-10%;content:"";height:40%;left:-10%;position:absolute;width:60%}.outer-container .inner-container header .contact-me-links .sharp-popup-container .sharp-popup .left .sub-container{border-radius:0 100rem 0 0;height:100%;position:relative;width:100%}.outer-container .inner-container header .contact-me-links .sharp-popup-container .sharp-popup .left .sub-container .sub{border-radius:0 100rem 0 0;border-right:.1497005988vw solid #777;border-top:.1497005988vw solid #777;height:100%;position:absolute;right:-3%;top:0;width:70%}.outer-container .inner-container header .contact-me-links li{display:inline;font-size:1.9765739385vw;margin-left:2.196193265vw}.outer-container .inner-container .about-me-project-overview{display:flex;flex-direction:row;height:40.7027818448vw;justify-content:space-between;overflow:hidden;padding-left:6.3689604685vw;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.outer-container .inner-container .about-me-project-overview .abouts-container{flex-basis:47.4011713031vw;margin-top:10.980966325vw}.outer-container .inner-container .about-me-project-overview .project-about-detail{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;transition:all .5s ease-in-out}.outer-container .inner-container .about-me-project-overview .project-about-detail .welcome-message{font-size:7.027818448vw;font-weight:200;line-height:0;margin-bottom:5.8565153734vw;text-align:left}.outer-container .inner-container .about-me-project-overview .project-about-detail .welcome-message .welcome{display:flex;flex-direction:row}.outer-container .inner-container .about-me-project-overview .project-about-detail .welcome-message .welcome div{opacity:0}.outer-container .inner-container .about-me-project-overview .project-about-detail .welcome-message .welcome-2nd{display:flex;flex-direction:row}.outer-container .inner-container .about-me-project-overview .project-about-detail .welcome-message .welcome-2nd div{opacity:0}.outer-container .inner-container .about-me-project-overview .project-about-detail .welcome-message .name{display:flex;flex-direction:row}.outer-container .inner-container .about-me-project-overview .project-about-detail .welcome-message .name div{opacity:0}.outer-container .inner-container .about-me-project-overview .project-about-detail .details{color:#d1d1d1;font-size:1.1273792094vw;font-weight:200;font-weight:400;letter-spacing:.5px;line-height:1.45;margin-top:-.1464128843vw;padding-left:1.9765739385vw;position:relative}.outer-container .inner-container .about-me-project-overview .project-about-detail .details .details-first-side-grad{background:linear-gradient(0deg,var(--grad-2) 0,var(--grad-1) 100%);border-radius:100rem;height:85%;left:0;position:absolute;top:50%;transition:all .3s ease-in-out;translate:-50% -50%;width:.1830161054vw}.outer-container .inner-container .about-me-project-overview .project-about-detail .details .details-second-side-grad{background:linear-gradient(0deg,var(--grad-1) 0,var(--grad-2) 100%);border-radius:100rem;height:85%;left:0;position:absolute;top:50%;transition:all .3s ease-in-out;translate:-50% -50%;width:.1830161054vw}.outer-container .inner-container .about-me-project-overview .project-about-detail .details .second-pg{margin-top:1.2445095168vw}.outer-container .inner-container .about-me-project-overview .project-about-detail .icon-container{text-align:center;width:100%}.outer-container .inner-container .about-me-project-overview .project-about-detail .icon-container .fa-chevron-down{animation:scrollIconAnm 3s ease infinite forwards;cursor:pointer;font-size:4.39238653vw;margin-top:1.8301610542vw}.outer-container .inner-container .about-me-project-overview .project-about-detail .icon-container .fa-chevron-up{animation:scrollIconAnm 3s ease infinite forwards;cursor:pointer;font-size:4.39238653vw;margin-bottom:1.8301610542vw}.outer-container .inner-container .about-me-project-overview .intro{transform-origin:left}.outer-container .inner-container .about-me-project-overview .projects{opacity:0;transform-origin:right}.outer-container .inner-container .about-me-project-overview .web-project{transform:translateY(-49.0483162518vw) scaleX(0)}.outer-container .inner-container .about-me-project-overview .snake-game{transform:translateY(-62.4450951684vw) scaleX(0)}.outer-container .inner-container .about-me-project-overview .converter-type{transform:translateY(-75.8418740849vw) scaleX(0)}.outer-container .inner-container .about-me-project-overview .knowledge{opacity:0;transform:translateY(10.980966325vw)}.outer-container .inner-container .about-me-project-overview .links-container{align-items:center;-moz-column-gap:1.0980966325vw;column-gap:1.0980966325vw;display:flex;font-size:1.2445095168vw;justify-content:flex-start;margin-top:1.756954612vw;padding-left:2.196193265vw;width:100%}.outer-container .inner-container .about-me-project-overview .title-message{font-size:2.196193265vw;font-weight:400;margin-bottom:2.196193265vw;text-align:left}.outer-container .inner-container .about-me-project-overview .icon-link-container{align-items:center;-moz-column-gap:1.0980966325vw;column-gap:1.0980966325vw;display:flex;justify-content:flex-start;margin-top:1.756954612vw;padding-left:2.196193265vw;width:100%}.outer-container .inner-container .about-me-project-overview .icon-link-container .technology-svg{cursor:pointer;filter:grayscale(1);transition:all .2s ease-in-out}.outer-container .inner-container .about-me-project-overview .icon-link-container .technology-svg:not(#html,#flutter){height:3.6603221083vw;width:3.6603221083vw}.outer-container .inner-container .about-me-project-overview .icon-link-container #flutter{height:2.7086383602vw;width:2.7086383602vw}.outer-container .inner-container .about-me-project-overview .icon-link-container #html{height:2.8550512445vw;width:2.8550512445vw}.outer-container .inner-container .about-me-project-overview .icon-link-container .technology-svg:hover{filter:grayscale(0);scale:1.1}.outer-container .inner-container .about-me-project-overview .projects-titles{flex-basis:30.9297218155vw;margin-top:6.2957540264vw}.outer-container .inner-container .about-me-project-overview .projects-titles .project-title{color:#d1d1d1;font-size:2.196193265vw;font-weight:400}.outer-container .inner-container .about-me-project-overview .projects-titles .sub-titles-container{margin-top:2.196193265vw;position:relative}.outer-container .inner-container .about-me-project-overview .projects-titles .sub-titles-container .first-sub-titles-grad{background:linear-gradient(135deg,var(--grad-1) 0,var(--grad-2) 50%,var(--grad-1) 100%);border-top-left-radius:.7320644217vw;content:"";height:6.588579795vw;left:-.168374817vw;position:absolute;top:-.168374817vw;width:6.588579795vw}.outer-container .inner-container .about-me-project-overview .projects-titles .sub-titles-container .second-sub-titles-grad{background:linear-gradient(135deg,var(--grad-2) 0,var(--grad-1) 50%,var(--grad-2) 100%);border-top-left-radius:.7320644217vw;height:6.588579795vw;left:-.168374817vw;position:absolute;top:-.168374817vw;transition:all .3s ease-in-out;width:6.588579795vw}.outer-container .inner-container .about-me-project-overview .projects-titles .sub-titles-container:after{background:#1d1d20;border-top-left-radius:.7320644217vw;content:"";height:6.588579795vw;left:0;position:absolute;top:0;width:6.588579795vw}.outer-container .inner-container .about-me-project-overview .projects-titles .sub-titles-sec-cont{align-items:flex-start;display:flex;flex-direction:column;justify-content:flex-start;left:0;list-style:none;padding:2.196193265vw 2.196193265vw 0;position:absolute;top:0;z-index:99}.outer-container .inner-container .about-me-project-overview .projects-titles .sub-titles{color:#ccc;cursor:pointer;display:inline;font-size:1.0248901903vw;font-weight:400;line-height:1.5;margin-bottom:1.0980966325vw;padding-bottom:.3660322108vw;position:relative;transition:all .3s ease-in-out}.outer-container .inner-container .about-me-project-overview .projects-titles .sub-titles:hover{color:#fff;letter-spacing:.9px}.outer-container .inner-container .link-container{color:#d1d1d1;line-height:1.6;position:relative;transition:all .3s ease-in-out}.outer-container .inner-container .link-container:hover{color:#fff;scale:1.04}.outer-container .inner-container .sub-title-first-grad{background:linear-gradient(270deg,var(--grad-2) 0,var(--grad-1) 100%)}.outer-container .inner-container .sub-title-first-grad,.outer-container .inner-container .sub-title-second-grad{bottom:0;height:.0878477306vw;left:50%;position:absolute;transition:all .3s ease-in-out;translate:-50% 0;width:100%}.outer-container .inner-container .sub-title-second-grad{background:linear-gradient(270deg,var(--grad-1) 0,var(--grad-2) 100%)}@keyframes toTopTextAnm{0%{opacity:1;transform:translateY(0) rotateX(0deg)}to{opacity:0;transform:translateY(-5.2395209581vw) rotateX(90deg)}}@keyframes fromBottomTextAnm{0%{opacity:0;transform:translateY(5.2395209581vw) rotateX(-90deg)}to{opacity:1;transform:translateY(0) rotateX(0deg)}}@keyframes scrollIconAnm{0%{transform:translateY(0)}50%{transform:translateY(1.122754491vw)}to{transform:translateY(0)}}

/* -- Responsive Design -- */
@media (max-width: 768px) {
    .main-container {
        height: 100vh;
    }

    .outer-container .inner-container {
        height: 95vh;
        width: 90%;
    }

    .top-left-conrainer,
    .bottom-right-container {
        height: 70vw;
        width: 50vw;
    }

    .outer-container .inner-container .static-footer {
        font-size: 2vw;
    }

    .inner-container .content-container .heading {
        font-size: 6vw;
    }

    .inner-container .content-container .sub-heading {
        font-size: 2.5vw;
    }

    .inner-container .content-container .navigation {
        gap: 3vw;
    }

    .inner-container .content-container .navigation .nav-items a {
        font-size: 4vw;
        height: 10vw;
        width: 10vw;
    }

    .inner-container .content-container .social-links {
        bottom: 5vw;
        gap: 3vw;
    }

    .inner-container .content-container .social-links .social-items a {
        font-size: 4vw;
    }
}

@media (max-width: 480px) {
    .inner-container .content-container .heading {
        font-size: 8vw;
    }

    .inner-container .content-container .sub-heading {
        font-size: 4vw;
    }

    .inner-container .content-container .navigation {
        gap: 5vw;
    }

    .inner-container .content-container .navigation .nav-items a {
        font-size: 6vw;
        height: 15vw;
        width: 15vw;
    }

    .inner-container .content-container .social-links {
        bottom: 8vw;
        gap: 5vw;
    }

    .inner-container .content-container .social-links .social-items a {
        font-size: 6vw;
    }
}