@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');


:root {

  --bg: #07090f;

  --surface: #0d111a;

  --surface-2: #121826;

  --text: #f5f7fb;

  --muted: #9aa5b5;

  --border: rgba(255,255,255,.09);

  --accent: #7c5cff;

  --accent-2: #00d4ff;

  --green: #54e38e;

  --shadow:
    0 20px 60px rgba(0,0,0,.35);

  --rainbow-gradient:
    linear-gradient(
      90deg,
      #ff7a00,
      #ffe600,
      #39ff14,
      #00aaff
    );
}


body.light {

  --bg: #f5f7fb;

  --surface: #ffffff;

  --surface-2: #eef1f7;

  --text: #111522;

  --muted: #5e6878;

  --border: rgba(17,21,34,.1);

  --shadow:
    0 20px 60px rgba(20,30,60,.12);

}


* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  scroll-behavior: smooth;

}


body {
  min-height: 100vh;
  font-family: Inter, system-ui, sans-serif;

  background: url("images/duck.png");

  background-size: cover;
  background-position: center calc(50% + 200px);
  background-attachment: fixed;
  background-repeat: no-repeat;

  color: var(--text);
}


a {

  color: inherit;

  text-decoration: none;

}

body::before {
    content: "";
    position: fixed;

    width: 105%;
    height: 105%;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: url("images/ram3.png") center / 100% 100% no-repeat;

    pointer-events: none;
    z-index: 9999;
}

.background-grid {

  position: fixed;

  inset: 0;

  z-index: -2;

  opacity: .28;

  background-image:

    linear-gradient(
      var(--border) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      var(--border) 1px,
      transparent 1px
    );
   

  background-size: 50px 50px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 75%
    );

}


.background-grid::after {

  content: "";

  position: absolute;

  width: 600px;

  height: 600px;

  left: 50%;

  top: 0;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(124,92,255,.18),
      transparent 65%
    );

}




.navbar {

  position: fixed;

  top: 18px;

  left: 50%;

  transform:
    translateX(-50%);

  width:
    min(
      1100px,
      calc(100% - 32px)
    );

  z-index: 100;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  padding:
    12px 14px
    12px 20px;

  background:
    rgba(13,17,26,.72);

  border:
    1px solid var(--border);

  border-radius: 16px;

  backdrop-filter:
    blur(18px);

  box-shadow:
    var(--shadow);

}


body.light .navbar {

  background:
    rgba(255,255,255,.72);

}


.logo {

  font-family:
    "JetBrains Mono",
    monospace;

  font-weight: 600;

  color:
    var(--accent-2);

}


.nav-links {

  display: flex;

  gap: 28px;

}


.nav-links a {

  color:
    var(--muted);

  font-size: .9rem;

  transition:
    .2s;

}


.nav-links a:hover {

  color:
    var(--text);

}


.theme-toggle,
.menu-toggle {

  border:
    1px solid var(--border);

  background:
    var(--surface-2);

  color:
    var(--text);

  cursor:
    pointer;

  border-radius:
    10px;

  width:
    38px;

  height:
    38px;

}


.menu-toggle {

  display: none;

}



.section {

  width:
    min(
      1100px,
      calc(100% - 32px)
    );

  margin:
    auto;

  padding:
    120px 0 40px;

}



.hero {

  min-height:
    100vh;

  padding-top:
    170px;

  display:
    grid;

  grid-template-columns:
    1.1fr .9fr;

  align-items:
    center;

  gap:
    70px;

}


.eyebrow {

  color:
    var(--accent-2);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    .8rem;

  margin-bottom:
    18px;

}


.status-dot {

  display:
    inline-block;

  width:
    8px;

  height:
    8px;

  background:
    var(--green);

  border-radius:
    50%;

  margin-right:
    8px;

  box-shadow:
    0 0 12px var(--green);

}


.hero h1 {

  font-size:
    clamp(
      3rem,
      7vw,
      6.2rem
    );

  line-height:
    .98;

  letter-spacing:
    -5px;

  margin-bottom:
    22px;

}


.rainbow-hi,
.gradient-text,
.button.primary {
  background: linear-gradient(
    90deg,
    #ff7a00,
    #ffe600,
    #39ff14,
    #00aaff
  );

  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  animation-name: rainbowMove;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}



.rainbow-hi {
  animation-delay: 0s;
}



.gradient-text {
  animation-delay: 0.s;
}



.button.primary {
  animation-delay: 0.6s;
}


@keyframes rainbowMove {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }
}


.hero h2 {

  color:
    var(--muted);

  font-size:
    clamp(
      1rem,
      2vw,
      1.35rem
    );

  font-weight:
    500;

  max-width:
    650px;

}


.hero-description {

  color:
    var(--muted);

  max-width:
    600px;

  margin:
    20px 0 30px;

}



.hero-buttons,
.contact-buttons {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

}


.button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    12px 19px;

  border-radius:
    10px;

  font-weight:
    600;

  border:
    1px solid var(--border);

  transition:
    transform .2s,
    border-color .2s;

}


.button:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(124,92,255,.6);

}


.button.primary {

  background:
    linear-gradient(
      90deg,
      #ff7a00,
      #ffe600,
      #39ff14,
      #00aaff
    );

  background-size:
    300% 100%;

  color:
    white;

  border:
    0;

  animation:
    rainbowMove 4s linear infinite;

  animation-delay:
    0.6s;

}

.gradient-text,
.button.primary {

  background-size: 200% 100%;

  animation:
    rainbowMove 4s linear infinite;

}


@keyframes rainbowMove {

  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }

}


.button.secondary {

  background:
    var(--surface-2);

}



.quick-stats {

  display:
    flex;

  gap:
    35px;

  margin-top:
    50px;

}


.quick-stats div {

  display:
    flex;

  flex-direction:
    column;

}


.quick-stats strong {

  font-size:
    1.35rem;

}


.quick-stats span {

  color:
    var(--muted);

  font-size:
    .75rem;

}



.terminal {

  border:
    1px solid var(--border);

  background:
    rgba(13,17,26,.9);

  border-radius:
    16px;

  box-shadow:
    var(--shadow);

  overflow:
    hidden;

  transform:
    rotate(1deg);

}


body.light .terminal {

  background:
    #151b27;

}


.terminal-bar {

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0 15px;

  background:
    #101520;

}


.terminal-bar span {

  width:
    9px;

  height:
    9px;

  border-radius:
    50%;

  background:
    #657080;

}


.terminal-bar small {

  margin-left:
    auto;

  margin-right:
    auto;

  color:
    #758196;

  font-family:
    "JetBrains Mono",
    monospace;

}


.terminal pre {

  padding:
    28px;

  overflow:
    auto;

  color:
    #d7dce5;

  font:
    .86rem/2
    "JetBrains Mono",
    monospace;

}


.purple {

  color:
    #c49bff;

}


.green {

  color:
    #7ee6a8;

}


.blue {

  color:
    #66b7ff;

}


.yellow {

  color:
    #ffd166;

}



.section-heading {

  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  margin-bottom:
    45px;

}


.section-heading span {

  color:
    var(--accent);

  font:
    .8rem
    "JetBrains Mono",
    monospace;

}


.section-heading h2 {

  font-size:
    clamp(
      2rem,
      4vw,
      3rem
    );

  letter-spacing:
    -2px;

}


.about-grid,
.skills-layout {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    35px;

}


.about-card {
  position: relative;
  overflow: hidden;

  background: rgba(13, 17, 26, 0.45);

  backdrop-filter: blur(3px);
}

.about-card::before {
  content: "";

  position: absolute;
  inset: 0;

  background: url("images/glow.jpg") center / cover no-repeat;

  opacity: 0.30;

  z-index: 0;
}

.about-card > * {
  position: relative;
  z-index: 1;
}

.project-card,
.contact-card {

  border:
    1px solid var(--border);

  background:
    rgba(13, 17, 26, 0.55);

  border-radius:
    18px;

  padding:
    30px;

  box-shadow:
    var(--shadow);

  backdrop-filter:
    blur(3px);

}


.avatar {

  width:
    72px;

  height:
    72px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    18px;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent-2)
    );

  color:
    white;

  font-weight:
    800;

  font-size:
    1.2rem;

  margin-bottom:
    22px;

}


.about-card h3 {

  margin-bottom:
    12px;

}


.about-card p {

  color:
    var(--muted);

  margin-bottom:
    14px;

}


.timeline {

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

}


.timeline-item {

  display:
    grid;

  grid-template-columns:
    48px 1fr;

  gap:
    18px;

  padding:
    22px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    15px;

}


.timeline-item > span {

  color:
    var(--accent-2);

  font:
    .75rem
    "JetBrains Mono",
    monospace;

}


.timeline-item p {

  color:
    var(--muted);

  font-size:
    .9rem;

  margin-top:
    4px;

}



.projects-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    18px;

}


.project-card {

  position:
    relative;

  overflow:
    hidden;

  transition:
    transform .25s,
    border-color .25s;

}


.project-card::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image: url("images/ducky.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.35;

  z-index: 0;
}


.project-card > * {
  position: relative;
  z-index: 1;
}


.project-card:hover {

  transform:
    translateY(-7px);

  border-color:
    rgba(124,92,255,.45);

}


.project-card.featured {

  background:
    linear-gradient(
      145deg,
      var(--surface),
      rgba(124,92,255,.08)
    );

}


.project-number {

  position:
    absolute;

  right:
    22px;

  top:
    20px;

  color:
    var(--muted);

  font:
    .75rem
    "JetBrains Mono",
    monospace;

}


.project-icon {

  font-size:
    2rem;

  margin-bottom:
    22px;

}


.project-card h3 {

  margin-bottom:
    10px;

}


.project-card p {

  color:
    var(--muted);

  font-size:
    .9rem;

  min-height:
    95px;

}


.tags {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin:
    20px 0;

}


.tags span,
.tech-cloud span {

  border:
    1px solid var(--border);

  background:
    var(--surface-2);

  padding:
    5px 9px;

  border-radius:
    7px;

  font:
    .7rem
    "JetBrains Mono",
    monospace;

  color:
    var(--muted);

}


.project-link {

  color:
    var(--accent-2);

  font-size:
    .85rem;

  font-weight:
    600;

}



.skills-list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    25px;

}


.skill > div:first-child {

  display:
    flex;

  justify-content:
    space-between;

  font-size:
    .9rem;

  margin-bottom:
    9px;

}


.skill b {

  color:
    var(--muted);

  font:
    .75rem
    "JetBrains Mono",
    monospace;

}


.progress {

  height:
    7px;

  background:
    var(--surface-2);

  border-radius:
    10px;

  overflow:
    hidden;

}


.progress i {

  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-2)
    );

}




.tech-cloud {

  display:
    flex;

  align-content:
    flex-start;

  flex-wrap:
    wrap;

  gap:
    10px;

  padding:
    25px;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  background:
    var(--surface);

}


.tech-cloud span {

  padding:
    9px 13px;

  font-size:
    .8rem;

}



.contact-section {

  padding-bottom:
    100px;

}


.contact-card {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  background:
    linear-gradient(
      110deg,
      rgba(124,92,255,.12),
      rgba(0,212,255,.05)
    );

}


.contact-card h2 {

  font-size:
    clamp(
      1.8rem,
      4vw,
      3rem
    );

  letter-spacing:
    -2px;

}


.contact-card p:last-child {

  color:
    var(--muted);

}


footer {

  width:
    min(
      1100px,
      calc(100% - 32px)
    );

  margin:
    auto;

  padding:
    25px 0 45px;

  border-top:
    1px solid var(--border);

  display:
    flex;

  justify-content:
    space-between;

  color:
    var(--muted);

  font-size:
    .78rem;

}


.reveal {

  opacity:
    0;

  transform:
    translateY(25px);

  transition:
    opacity .7s ease,
    transform .7s ease;

}


.reveal.visible {

  opacity:
    1;

  transform:
    translateY(0);

}



@media (max-width: 850px) {

  .nav-links {

    display:
      none;

    position:
      absolute;

    top:
      62px;

    left:
      0;

    right:
      0;

    flex-direction:
      column;

    gap:
      0;

    padding:
      8px;

    background:
      var(--surface);

    border:
      1px solid var(--border);

    border-radius:
      14px;

  }


  .nav-links.open {

    display:
      flex;

  }


  .nav-links a {

    padding:
      12px;

  }


  .menu-toggle {

    display:
      block;

    margin-left:
      auto;

    margin-right:
      8px;

  }


  .hero {

    grid-template-columns:
      1fr;

    gap:
      45px;

  }


  .terminal {

    transform:
      none;

  }


  .about-grid,
  .skills-layout {

    grid-template-columns:
      1fr;

  }


  .projects-grid {

    grid-template-columns:
      1fr;

  }

}



@media (max-width: 520px) {

  .section {

    padding-top:
      90px;

  }


  .hero {

    padding-top:
      140px;

  }


  .hero h1 {

    letter-spacing:
      -3px;

  }


  .quick-stats {

    gap:
      20px;

  }


  .contact-card {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .footer {

    flex-direction:
      column;

    gap:
      8px;

  }

}


#yellow-popup {
  position: fixed;

  right: 25px;
  bottom: 25px;

  width: 180px;

  padding: 10px;

  background-image: url("images/Yellow.webp");

  border: 1px solid var(--border);
  border-radius: 15px;

  box-shadow: var(--shadow);

  backdrop-filter: blur(12px);

  z-index: 9998;

  opacity: 1;
  transform: translateY(0) scale(1);

  pointer-events: auto;

  transition:
    opacity .35s ease,
    transform .35s ease;
}

#yellow-popup.show {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  pointer-events: auto;
}

#yellow-popup img {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 10px;
}

#yellow-close {
  position: absolute;

  top: -10px;
  right: -10px;

  width: 28px;
  height: 28px;

  border: 1px solid var(--border);
  border-radius: 50%;

  background: var(--surface-2);
  color: var(--text);

  font-size: 18px;
  line-height: 1;

  cursor: pointer;

  transition:
    transform .2s ease,
    background .2s ease;
}

#yellow-close:hover {
  transform: scale(1.1);
}