:root {
  /* background-colors */
  --bg-dark: #212121; /* Main Background */
  --bg-surface: #323232; /* Section/Card Background */
  --bg-section-marker: #1a1a1a; /* section-marker-bg */

  /* Primary and Secondary */
  --accent-primary: #14ffec; /* Bright Cyan (Buttons/Links) */
  --accent-secondary: #0d7377; /* Deep Teal (Borders/Details) */

  /* section-marker dots */
  --dot-red: #ff5f56;
  --dot-yellow: #ffbd2e;
  --dot-green: #27c93f;

  /* text-color */
  --text-main: #ffffff; /* Primary Text */
  --text-muted: #a0a0a0; /* Secondary/De-emphasized Text */

  /* border*/
  --theme-border: 1px solid var(--accent-secondary);

  /* section - title after before content */
  --section-title-content: 2px solid var(--accent-secondary);

  /* Font-Family */
  --poppins-headings: "Poppins", sans-serif;
  --inter-body: "Inter", sans-serif;
  --jetbrains-mono-logo: "JetBrains Mono", monospace;

  /* Font Sizes */
  --fs-sm: 0.875rem; /* 14px */
  --fs-base: 1rem; /* 16px */
  --fs-md: 1.125rem; /* 18px */
  --fs-lg: 1.5rem; /* 24px */
  --fs-xl: 2rem; /* 32px */

  /* Fluid typo */
  /* 16 , 16.5 , 18 */
  --fluid-logo: clamp(var(--fs-base), 2.15vw, var(--fs-md));
  /* 14 , 14.5 ,16 */
  --fluid-nav-link: clamp(var(--fs-sm), 1.89vw, var(--fs-base));
  /* 18px , 24px */
  --fluid-hero-title: clamp(var(--fs-md), 3.5vw, var(--fs-xl));
  /* 14px , 18px  */
  --fluid-hero-desc: clamp(var(--fs-sm), 3vw, var(--fs-md));

  /* padding-gap-margin */
  --pad-gap-margin-sm: 0.5rem;
  --pad-gap-margin-md: 1rem;
  --pad-gap-margin-lg: 1.5rem;
  --pad-gap-margin-xl: 2rem;

  /* border-radius */
  --border-radius-sm: 0.5rem;
  --border-radius-md: 0.8rem;
  --border-radius-lg: 1rem;

  /* scrolling-offset */
  --scroll-offset: 11.175rem;
}

/* ----- Basic Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

img {
  max-inline-size: 100%;
  display: block;
  block-size: auto;
}

input,
textarea {
  font-family: inherit;
  font-size: inherit;
  display: block;
  inline-size: 100%;
}

label {
  display: inline-block;
  inline-size: 100%;
}

button {
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
}

.table-wrapper {
  inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  inline-size: 100%;
  min-inline-size: 500px;
  border-collapse: collapse;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--text-main);
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
  font-family: var(--poppins-headings);
}

section {
  scroll-margin-top: var(--scroll-offset);
}

::selection {
  background-color: var(--accent-primary);
  color: var(--bg-dark);
}

:focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 5px;
}

body {
  font-family: var(--inter-body);
  font-size: var(--fs-sm);
  color: var(--text-main);
  line-height: 1.5;

  background-color: var(--bg-dark);
}

/* ---- layout setting ---- */
.layout {
  inline-size: min(90%, 1300px);
  margin-inline: auto;

  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto auto auto;
  row-gap: var(--pad-gap-margin-lg);

  /* border: var(--theme-border); */
}

.site-header,
.site-main,
.site-footer {
  /* This prevents the grid area from expanding to fit wide content */
  min-inline-size: 0;
}

/* ---- Section-setting ---- */

.theme-window {
  background-color: var(--bg-surface);
  border: var(--theme-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.section-marker {
  display: flex;
  gap: var(--pad-gap-margin-sm);
  background-color: var(--bg-section-marker);
}

.section-marker-dot {
  display: block;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border-radius: 50%;
}
.section-marker-dot--red {
  background-color: var(--dot-red);
}
.section-marker-dot--yellow {
  background-color: var(--dot-yellow);
}
.section-marker-dot--green {
  background-color: var(--dot-green);
}

.section-marker,
.content-body {
  padding: 1rem;
}

.content-body {
  display: flex;
  flex-direction: column;
  gap: var(--pad-gap-margin-md);
}

/* * {
  outline: 1px solid red !important;
} */

/* ---- site-header ---- */
.site-header {
  grid-area: header;

  position: sticky;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 99;

  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pad-gap-margin-lg);
  padding-block: var(--pad-gap-margin-md);

  background-color: var(--bg-dark);
  border-block-end: var(--theme-border);
}

/* ---- header > logo ---- */

.logo__text {
  font-size: var(--fluid-logo);
  font-weight: 800;
  font-family: var(--jetbrains-mono-logo);
  color: var(--accent-primary);

  text-shadow: 0 0 3px var(--accent-primary);
}

/* ---- header > nav__links ---- */

.nav__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-block: var(--pad-gap-margin-sm);
  row-gap: var(--pad-gap-margin-lg);
  column-gap: var(--pad-gap-margin-lg);
}

.nav__link {
  position: relative;
  padding: 0.5em;

  font-size: var(--fluid-nav-link);
  font-weight: 600;
  background-color: var(--bg-surface);
  border-radius: 0.5em;
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: -5px;
  inset-inline-start: 0;

  block-size: 3px;
  inline-size: 0;

  background-color: var(--accent-secondary);

  transition: inline-size 0.3s ease-in-out;
}

/* ---- nav_link hover and clicked effect ---- */
.nav__link:hover::after,
.nav__link:focus::after,
.nav__link:active::after {
  inline-size: 100%;
}

/* ---- site-Main ---- */
.site-main {
  grid-area: main;

  display: flex;
  flex-direction: column;
  gap: var(--pad-gap-margin-md);
}

/* ---- main > hero > img + content ---- */
.hero__img {
  inline-size: 18.125rem;
  margin-inline: auto;

  border-radius: var(--border-radius-sm);
  box-shadow: 4px 2px 10px var(--bg-section-marker);
}

.hero__text-content-wrapper {
  text-align: center;
}

.hero__title {
  font-size: var(--fluid-hero-title);
  color: var(--accent-primary);

  /* type-writer effect */
  inline-size: 0;
  font-family: var(--jetbrains-mono-logo);
  overflow: hidden;
  margin-inline: auto;
  white-space: nowrap;
  border-inline-end: var(--theme-border);

  /* animation */
  animation:
    typing 3s steps(17) forwards,
    blink 1s step-end infinite;
}

@keyframes typing {
  from {
    inline-size: 0;
  }
  to {
    inline-size: 17ch;
  }
}

@keyframes blink {
  50% {
    border-inline-end-color: transparent;
  }
}

.hero__description {
  font-size: var(--fluid-hero-desc);
}

.hero__text-content-divider {
  block-size: 3px;
  margin-block: var(--pad-gap-margin-sm);
  inline-size: 90%;
  margin-inline: auto;

  border: none;
  background-color: var(--accent-secondary);
  border-radius: 2px;
}

/* ---- main > about ---- */
.section__title {
  display: flex;
  align-items: center;
  gap: var(--pad-gap-margin-sm);

  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* border-block-end: var(--theme-border); */
}

.section__title::before,
.section__title::after {
  content: "";
  flex: 1;
  block-size: 5px;
  border-block-start: var(--section-title-content);
  border-block-end: var(--section-title-content);
}

/* ---- about > profile-img ---- */
.about__profile-img {
  block-size: 15rem;
  inline-size: 15rem;
  margin-inline: auto;
  border-radius: 50%;
  border: 3px solid var(--accent-secondary);
  object-fit: cover;
}

/* ---- site-footer ---- */
.site-footer {
  grid-area: footer;
}

/* ---- Media Queries ---- */

/* ---- Media Querie for screen size 768px ---- */
@media screen and (min-width: 48em) {
  :root {
    --scroll-offset: 4.6rem;
  }

  /* ---- header ---- */

  .site-header {
    flex-direction: row;
    justify-content: space-between;
  }

  .nav__list {
    padding: 0;
    gap: var(--pad-gap-margin-md);
  }

  .nav__link {
    background: none;
    padding: 0;
    border-radius: 0;
  }

  /* ---- main > hero ---- */
  .hero {
    min-block-size: 80vh;
  }

  .hero__img {
    inline-size: 23.4375rem; /* 375px */
  }

  /* ---- main > about ---  */
  .section__title {
    margin-inline: auto;
    inline-size: 100%;
    max-inline-size: 50%;
  }
}

/* ---- media query screen size : 1024px ---- */

@media screen and (min-width: 64em) {
  :root {
    --scroll-offset: 4.7rem;
  }

  /* main > hero */
  .hero {
    display: flex;
    flex-direction: column;
  }

  .hero__content-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }

  .hero__img-wrapper {
    order: 2;
  }

  .hero__img {
    inline-size: auto;
    max-inline-size: 90%;
    margin-inline: auto;

    max-block-size: 100%;

    object-fit: contain;
  }
}