:root {
  color-scheme: light dark;

  --c-debug: yellow;
  --p-sitewrapper: 1rem;
  --p-sectionblock: 3rem;

  --w-sitemax: 1600px;
  --w-content-wide: 800px;
  --w-content-breakout: 700px;
  --w-contentmax: 620px;
  --w-sidebar: 600px;
  --w-sidebar-max: 500px;

  --space: 1rem;
  --space-0: 0;
  --space-xxl: calc(var(--space-xl) * 1.618);
  --space-xl: calc(var(--space-l) * 1.618);
  --space-l: calc(var(--space-ml) * 1.618);
  --space-ml: calc(var(--space-m) * 1.618);
  --space-m: calc(var(--space) * 1);
  --space-ms: calc(var(--space-m) / 1.618);
  --space-s: calc(var(--space-ms) / 1.618);
  --space-xs: calc(var(--space-s) / 1.618);
  --space-xxs: calc(var(--space-xs) / 2);

  --br-sharp: 2px;
  --br-dull: 8px;
  --br-soft: 12px;
  --border-radius: 12px;

  --font-mono:
    ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  --font-size-base: 16px;

  --font-size-multi: 0.55014068;

  --anim-duration-fast: 0.3s;
}

@media (prefers-color-scheme: light) {
  :root {
    --c-body: hsl(0, 0%, 98%);
    --c-nav: rgba(0, 0, 0, 0.78);
    --c-footer: rgb(36, 36, 36);
    --c-code-bg: rgb(32, 30, 30);
    --c-code: rgb(214, 209, 209);
    --c-header: hsl(193, 37%, 10%);
    --c-txt: #7b7a7a;
    --c-txt-rev: white;
    --c-txt-bg: hsl(0, 0%, 100%);
    --c-txt-bg-rev: hsl(197deg 8.74% 24.25%);
    --c-txt-bg-darker: hsl(190, 7%, 84%);
    --c-txt-primary: rgb(44, 44, 44);
    --c-txt-primary-h: black;
    --c-txt-secondary-h: white;
    --c-txt-accent: black;
    --c-txt-sub: rgb(150, 150, 150);
    --c-tertiary: #dab87d;
    --c-secondary: #0e966b;
    --c-primary: #5fd3b2;
    --c-light: hsl(192, 27%, 77%);
    --c-desaturated: hsl(193, 5%, 32%);
    --c-accent: #4ca1f0;
    --c-error: rgb(200, 74, 74);
    --c-success: rgb(80, 195, 80);
    --c-disabled: rgba(182, 182, 182, 0.672);
    --c-seperator: hsl(0, 0%, 89.4%);
    --c-txt-disabled: rgb(87, 87, 87);
    --c-glass: rgba(58, 58, 58, 0.59);
    --cg-dark: linear-gradient(
      180deg,
      rgb(31, 44, 47) 0%,
      rgb(15, 21, 22) 100%
    );
    --cg-1: linear-gradient(120deg, #eaee44, #33d0ff);

    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;

    --primary-glow: conic-gradient(
      from 180deg at 50% 50%,
      #16abff33 0deg,
      #0885ff33 55deg,
      #54d6ff33 120deg,
      #0071ff33 160deg,
      transparent 360deg
    );
    --secondary-glow: radial-gradient(
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    );

    --tile-start-rgb: 239, 245, 249;
    --tile-end-rgb: 228, 232, 233;
    --tile-border: conic-gradient(
      #00000080,
      #00000040,
      #00000030,
      #00000020,
      #00000010,
      #00000010,
      #00000080
    );
    --shadow-1: 3px 2px 10px #00000026;
    --shadow-2: 2px 0px 10px #0000003b;
    --shadow-3: 2px 4px 6px rgba(73, 73, 73, 0.45);
    --shadow-4: 3px 3px 4px #0000004d;
    --shadow-1-inset: 2px 2px 4px #00000026 inset;

    --callout-rgb: 238, 240, 241;
    --callout-border-rgb: 172, 175, 176;
    --card-rgb: 180, 185, 188;
    --card-border-rgb: 131, 134, 135;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-code-bg: rgb(32, 30, 30);
    --c-code: rgb(214, 209, 209);
    --c-txt: #bdbcbc;
    --c-header: hsl(193, 37%, 90%);
    --c-txt-rev: black;
    --c-txt-bg: hsl(197deg 8.74% 24.25%);
    --c-txt-bg-rev: hsl(198, 20%, 84%);
    --c-txt-bg-darker: #151819;
    --c-txt-primary: rgb(44, 44, 44);
    --c-txt-primary-h: black;
    --c-txt-accent: black;
    --c-txt-sub: rgb(150, 150, 150);
    --c-tertiary: #dab87d;
    --c-secondary: #0e966d;
    --c-primary: #5fd3b2;
    --c-body: hsl(249, 11%, 12%);
    --c-nav: rgba(0, 0, 0, 0.78);
    --c-footer: rgb(34, 34, 34);
    --c-light: hsl(192, 27%, 77%);
    --c-desaturated: hsl(193, 5%, 32%);
    --c-accent: #4ca1f0;
    --c-error: rgb(200, 74, 74);
    --c-success: rgb(80, 195, 80);
    --c-disabled: rgba(182, 182, 182, 0.672);
    --c-seperator: #232425;
    --c-seperator-dark: #1f1f1f;
    --c-txt-disabled: rgb(87, 87, 87);
    --c-glass: rgba(58, 58, 58, 0.498);
    --cg-dark: linear-gradient(
      180deg,
      rgb(31, 44, 47) 0%,
      rgb(15, 21, 22) 100%
    );

    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;

    --primary-glow: conic-gradient(
      from 180deg at 50% 50%,
      #16abff33 0deg,
      #0885ff33 55deg,
      #54d6ff33 120deg,
      #0071ff33 160deg,
      transparent 360deg
    );
    --secondary-glow: radial-gradient(
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    );

    --tile-start-rgb: 239, 245, 249;
    --tile-end-rgb: 228, 232, 233;
    --tile-border: conic-gradient(
      #00000080,
      #00000040,
      #00000030,
      #00000020,
      #00000010,
      #00000010,
      #00000080
    );
    --shadow-1: 3px 2px 10px #00000026;
    --shadow-2: 2px 0px 10px #0000003b;
    --shadow-3: 2px 4px 6px rgba(0, 0, 0, 0.631);
    --shadow-4: 3px 3px 4px #0000004d;
    --shadow-1-inset: 2px 2px 4px #00000026 inset;

    --callout-rgb: 238, 240, 241;
    --callout-border-rgb: 172, 175, 176;
    --card-rgb: 180, 185, 188;
    --card-border-rgb: 131, 134, 135;
  }
}

@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf")
    format("truetype");
}
@font-face {
  font-family: "BalooThambi2";
  src: url("/assets/fonts/Baloo_Thambi_2/BalooThambi2-VariableFont_wght.ttf")
    format("truetype");
}

.site_layout {
  display: grid;
  max-width: 1500px;
  margin-inline: auto;
}
nav#site-nav {
  background-color: var(--c-glass);
  border-radius: var(--br-dull);
  & > a {
    display: inline-block;
    padding: 1rem;
  }
}
.page_layout {
}

/* dl.contacts {
  font-size: var(--space-ml);
} */

dl.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1rem;

  & > dd {
    margin-inline-start: 0;
  }
  & > dt,
  & > dd {
    padding: 0.5rem 0;
  }
  & > dt:not(:last-of-type),
  & > dd:not(:last-of-type) {
    border-bottom: 1px solid var(--c-seperator);
  }
}

section#contact {
  margin-block: var(--space-xxl);
  & > .grid {
    place-items: center;
  }
}

section#about {
  margin-block: var(--space-xxl);

  & > .grid {
    place-items: center;
  }
}
.grid {
  display: grid;

  & > * {
    width: 100%; 
    box-sizing: border-box;

    & img, & svg {
      width: 100%;
    }
  }

  &.auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 20vw, 400px), 1fr));
  }
}

@media screen and (width > 800px) {
  .grid {

    &._1 {
      grid-template-columns: 1fr;
    }
    &._2_1 {
      grid-template-columns: 2fr 1fr;
    }
    &._1_1 {
      grid-template-columns: 1fr 1fr;
    }
    &._1_1_1 {
      grid-template-columns: 1fr 1fr 1fr;
    }
    &._1_1_1_1 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}

@media screen and (width < 500px) {
  img, svg {

    /* width: clamp(50px, 50vw, 400px); */
    width: 50px;
    object-fit: contain;
  }
}

.gap-m {
  gap: 1rem;
}

.bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  height: 10%;
}

.logo_wrap {
}
.site_logo {
}
.site_title {
}
.slogan {
}

.tshadow_1 {
}
#page_content {
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", sans-serif;
  color: white;
  padding: var(--space-m);

}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "BalooThambi2", sans-serif;
}

a {
  color: var(--c-primary);
}

.horizontal-line {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  &::after {
    content: "";
    background-color: var(--c-light);
    width: 100%;
    height: 1px;
    flex: 1;
    display: inline-block;
  }
}

.construction {
  border: dashed yellow 4px;
}

.card {
  background-color: var(--c-glass);
  backdrop-filter: blur(3px);
  border-radius: var(--br-dull);
  padding: 1rem;
  & > h3, & > h4 {
    color: var(--c-light);
    /* font-size: var(--space-ml); */
  }
}
.text {
}

main {
  margin-top: var(--space-l);
}

main > header.hero {
  min-height: 45vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: center center;
  place-items: center;

  & .grid {
    align-items: center;
  }
}

.site_title {
  font-size: clamp(
    1rem * (var(--font-size-multi) * 3),
    1rem + 5.246vw,
    1rem * (var(--font-size-multi) * 6)
  );
  color: var(--c-accent);
  margin-bottom: 0;
  font-weight: 500;
}

.slogan {
  margin-top: 0;
  /* font-size: 3rem; */
  line-height: 1;
  font-size: clamp(
    1rem * (var(--font-size-multi) * 5),
    2rem + 5.246vw,
    1rem * (var(--font-size-multi) * 8)
  );
  font-weight: 900;
}

.subtitle {
  font-size: 1.5rem;
}

.site_logo {
  width: 100%;
}

@media screen and (width < 702px) {
  .logo_wrap {
    display: none;
  }
}

section#portfolio {
  & > article > img {
    width: 100%;
    object-fit: cover;
  }
}