*,: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)}}

/* Orientation gate + landscape polish */
.rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(72, 70, 203, 0.35), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(101, 157, 102, 0.3), transparent 40%),
    #1d1d20;
  color: #d1d1d1;
  text-align: center;
  padding: 2rem;
}
.rotate-overlay[hidden] { display: none !important; }
.rotate-overlay__title {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 700;
  margin: 1.2rem 0 0.4rem;
}
.rotate-overlay__text {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 400;
  opacity: 0.85;
  max-width: 28ch;
  margin: 0 auto;
}
.rotate-phone {
  width: 64px;
  height: 110px;
  margin: 0 auto;
  animation: phone-tilt 1.6s ease-in-out infinite;
}
.rotate-phone__body {
  width: 100%;
  height: 100%;
  border: 3px solid #d1d1d1;
  border-radius: 12px;
  position: relative;
}
.rotate-phone__body::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 4px;
  border-radius: 4px;
  background: #777;
}
@keyframes phone-tilt {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(90deg); }
  60% { transform: rotate(90deg); }
}
.coming-soon {
  cursor: default;
  opacity: 0.75;
  pointer-events: none;
}
@media (max-width: 900px) and (orientation: portrait) {
  .rotate-overlay { display: grid; }
  .main-container { visibility: hidden; pointer-events: none; }
}
@media (orientation: landscape), (min-width: 901px) {
  .rotate-overlay { display: none !important; }
  .main-container { visibility: visible; pointer-events: auto; }
}
@media (max-width: 900px) and (orientation: landscape) {
  html { font-size: 9px; }
  body { overflow: hidden; }
  .main-container {
    height: 100dvh;
    width: 100vw;
  }
  .outer-container .inner-container {
    height: 94%;
    width: 96%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rotate-phone { animation: none; }
  .outer-container .inner-container .about-me-project-overview .project-about-detail .icon-container .fa-chevron-down,
  .outer-container .inner-container .about-me-project-overview .project-about-detail .icon-container .fa-chevron-up {
    animation: none;
  }
}