@charset "UTF-8";
/* [[[ABSTRACTS]]] */
/* || Design Tokens */
/* || Variables */
/* --- Themes */
:root {
  --color-accent-1: rgb(68, 211, 210);
  --color-accent-2: rgb(234, 84, 84);
  --color-accent-3: rgb(252, 174, 74);
  --color-accent-4: rgb(84, 158, 242);
  --color-text: rgb(77, 79, 98);
  --color-text-light: rgb(106, 113, 120);
  --color-background: rgb(250, 250, 250);
  --color-background-alt: rgb(255, 255, 255);
  --color-shadow: rgba(0, 0, 0, 0.25);
}

html[data-theme=light] {
  --color-accent-1: rgb(68, 211, 210);
  --color-accent-2: rgb(234, 84, 84);
  --color-accent-3: rgb(252, 174, 74);
  --color-accent-4: rgb(84, 158, 242);
  --color-text: rgb(77, 79, 98);
  --color-text-light: rgb(106, 113, 120);
  --color-background: rgb(250, 250, 250);
  --color-background-alt: rgb(255, 255, 255);
  --color-shadow: rgba(0, 0, 0, 0.25);
}

html[data-theme=dark] {
  --color-accent-1: rgb(80, 220, 219);
  --color-accent-2: rgb(240, 100, 100);
  --color-accent-3: rgb(255, 185, 90);
  --color-accent-4: rgb(100, 170, 250);
  --color-text: rgb(250, 250, 250);
  --color-text-light: rgb(255, 255, 255);
  --color-background: rgb(10, 10, 10);
  --color-background-alt: rgb(25, 25, 25);
  --color-shadow: rgba(255, 255, 255, 0.25);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --color-accent-1: rgb(80, 220, 219);
    --color-accent-2: rgb(240, 100, 100);
    --color-accent-3: rgb(255, 185, 90);
    --color-accent-4: rgb(100, 170, 250);
    --color-text: rgb(250, 250, 250);
    --color-text-light: rgb(255, 255, 255);
    --color-background: rgb(10, 10, 10);
    --color-background-alt: rgb(25, 25, 25);
    --color-shadow: rgba(255, 255, 255, 0.25);
  }
}
:root {
  /* --- Typography */
  --font-family-base: Poppins, sans-serif;
  /* --- Fluid type scales */
  /* @link https://utopia.fyi/type/calculator?c=320,15,1.119,1440,17,1.206,4,2,375&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--1: clamp(0.8378rem, 0.8255rem + 0.0617vw, 0.881rem);
  --step-0: clamp(0.9375rem, 0.9018rem + 0.1786vw, 1.0625rem);
  --step-1: clamp(1.0491rem, 0.9827rem + 0.3319vw, 1.2814rem);
  --step-2: clamp(1.1739rem, 1.0678rem + 0.5306vw, 1.5453rem);
  --step-3: clamp(1.3136rem, 1.1564rem + 0.7858vw, 1.8637rem);
  --step-4: clamp(1.4699rem, 1.2477rem + 1.111vw, 2.2476rem);
  /* --- Fluid space scales */
  /* @link https://utopia.fyi/space/calculator?c=320,15,1.119,1440,17,1.206,4,1,375&s=0.75|0.5|0.375|0.25,1.5|2.125|3|4|4.5|9.5|26,l-4xl|xl-3xl|2xs-5xl&g=s,l,xl,12 */
  --space-4xs: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
  --space-3xs: clamp(0.375rem, 0.375rem + 0vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.4821rem + 0.0893vw, 0.5625rem);
  --space-xs: clamp(0.6875rem, 0.6518rem + 0.1786vw, 0.8125rem);
  --space-s: clamp(0.9375rem, 0.9018rem + 0.1786vw, 1.0625rem);
  --space-m: clamp(1.4375rem, 1.3839rem + 0.2679vw, 1.625rem);
  --space-l: clamp(2rem, 1.9286rem + 0.3571vw, 2.25rem);
  --space-xl: clamp(2.8125rem, 2.7054rem + 0.5357vw, 3.1875rem);
  --space-2xl: clamp(3.75rem, 3.6071rem + 0.7143vw, 4.25rem);
  --space-3xl: clamp(4.25rem, 4.0893rem + 0.8036vw, 4.8125rem);
  --space-4xl: clamp(8.9375rem, 8.5982rem + 1.6964vw, 10.125rem);
  --space-5xl: clamp(24.375rem, 23.4464rem + 4.6429vw, 27.625rem);
  --space-4xs-3xs: clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem);
  --space-3xs-2xs: clamp(0.375rem, 0.3214rem + 0.2679vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.4107rem + 0.4464vw, 0.8125rem);
  --space-xs-s: clamp(0.6875rem, 0.5804rem + 0.5357vw, 1.0625rem);
  --space-s-m: clamp(0.9375rem, 0.7411rem + 0.9821vw, 1.625rem);
  --space-m-l: clamp(1.4375rem, 1.2054rem + 1.1607vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.6607rem + 1.6964vw, 3.1875rem);
  --space-xl-2xl: clamp(2.8125rem, 2.4018rem + 2.0536vw, 4.25rem);
  --space-2xl-3xl: clamp(3.75rem, 3.4464rem + 1.5179vw, 4.8125rem);
  --space-3xl-4xl: clamp(4.25rem, 2.5714rem + 8.3929vw, 10.125rem);
  --space-4xl-5xl: clamp(8.9375rem, 3.5982rem + 26.6964vw, 27.625rem);
  --space-l-4xl: clamp(2rem, -0.3214rem + 11.6071vw, 10.125rem);
  --space-xl-3xl: clamp(2.8125rem, 2.2411rem + 2.8571vw, 4.8125rem);
  --space-2xs-5xl: clamp(0.5rem, -7.25rem + 38.75vw, 27.625rem);
  /* --- Others */
  --flow-space: var(--space-s);
}

/* || Functions */
/* || Mixins */
/* [[[BASE]]] */
/* || Reset */
/* 1. Universal Box-Sizing */
/* This is fundamental. It changes how width and height are calculated,
   making layout much more intuitive: width/height includes padding and border. */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* 2. Reset Margins & Paddings for Common Block-Level Elements */
/* Removes default browser margins/paddings that often cause inconsistencies.
   Includes common elements like headings, paragraphs, lists, and figures. */
body, h1, h2, h3, h4, h5, h6, p, blockquote, figure,
ol, ul, dd {
  margin: 0;
  padding: 0;
}

/* 3. Remove List Styles */
/* Gets rid of default bullets/numbers and any intrinsic padding/margin for lists.
   You'll re-add specific list styling if needed. */
ol, ul {
  list-style: none;
}

/* 4. Responsive Images */
/* Ensures images and other media elements are block-level and scale within their containers. */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto; /* Important for maintaining aspect ratio */
}

/* 5. Improve Form Element Styling */
/* Makes form elements inherit font styles and sets some consistent baselines. */
input, button, textarea, select {
  font: inherit; /* Inherit font properties from parent */
  /* outline: none; Only remove if you have a :focus-visible style later */
}

/* 6. Base Link Styling */
/* Removes default underline from links. Re-add on hover for accessibility if desired. */
a {
  text-decoration: none;
  color: inherit; /* Inherit color unless explicitly set */
}

/* || Global */
/* [[[ABSTRACTS]]] */
body {
  font-family: var(--font-family-base, sans-serif);
  line-height: 1.4;
  color: var(--color-text);
  background-color: var(--color-background);
  --flow-space: var(--space-2xl-3xl);
}

h1 {
  font-size: var(--step-4);
  letter-spacing: 0.015625rem;
}

h2 {
  font-size: var(--step-2);
  line-height: 1.35;
}

p {
  font-size: var(--step-0);
}

a {
  color: var(--color-accent-4);
}

footer {
  margin-block: 3rem;
  text-align: center;
}

/* [[[LAYOUT]]] */
/* || Grid */
.main-grid {
  display: grid;
  grid-template: repeat(4, 1fr)/1fr;
  gap: var(--space-l);
  width: 100vw;
  padding-inline: var(--space-l-4xl);
}
@media (min-width: 48em) and (max-width: 62em) {
  .main-grid {
    grid-template: repeat(3, 1fr)/repeat(2, 1fr);
  }
  .main-grid > :first-child, .main-grid > :last-child {
    grid-column: 1/span 2;
    justify-self: center;
    max-width: calc((100% - var(--space-l)) / 2);
  }
}
@media (min-width: 62em) {
  .main-grid {
    grid-template: repeat(2, 1fr)/repeat(3, 1fr);
  }
  .main-grid > :first-child {
    grid-row: 1/span 2;
    align-self: center;
  }
  .main-grid > :last-child {
    grid-column: 3/span 1;
    grid-row: 1/span 2;
    align-self: center;
  }
}

/* || Header */
.main-header {
  --flow-space: var(--space-s);
  text-align: center;
  margin-block-start: var(--space-xl-3xl);
  margin-inline: var(--space-2xs-5xl);
}

/* [[[COMPONENTS]]] */
/* || Card */
/* [[[ABSTRACTS]]] */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-l);
  box-shadow: 0 0.25rem 1.5rem var(--color-shadow);
  border-top: 0.5rem solid;
  border-radius: 0.5rem;
  --flow-space: var(--space-l);
}
.card .card__description {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--color-text-light);
  --flow-space: var(--space-s);
}
.card .card__icon {
  align-self: flex-end;
  /* @link https://utopia.fyi/clamp/calculator?a=320,1440,64—72 */
  width: clamp(4rem, 3.8571rem + 0.7143cqi, 4.5rem);
}

/* [[[UTILITIES]]] */
/* || COLORS */
.text-accent-1 {
  color: var(--color-accent-1) !important;
}

.bg-accent-1 {
  background-color: var(--color-accent-1) !important;
}

.border-accent-1 {
  border-color: var(--color-accent-1) !important;
}

.text-accent-2 {
  color: var(--color-accent-2) !important;
}

.bg-accent-2 {
  background-color: var(--color-accent-2) !important;
}

.border-accent-2 {
  border-color: var(--color-accent-2) !important;
}

.text-accent-3 {
  color: var(--color-accent-3) !important;
}

.bg-accent-3 {
  background-color: var(--color-accent-3) !important;
}

.border-accent-3 {
  border-color: var(--color-accent-3) !important;
}

.text-accent-4 {
  color: var(--color-accent-4) !important;
}

.bg-accent-4 {
  background-color: var(--color-accent-4) !important;
}

.border-accent-4 {
  border-color: var(--color-accent-4) !important;
}

/* || FLOW */
.flow > * + * {
  margin-top: var(--flow-space, 1rem);
}

/* || TEXT */
.text-fw-extra-light {
  font-weight: 200;
}

.text-fw-regular {
  font-weight: 400;
}

.text-fw-semi-bold {
  font-weight: 600;
}

/* || VISIBILITY */
.sr-only {
  /* Visually hidden but accessible to screen readers */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* || WRAPPER */
.wrapper {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}

/*# sourceMappingURL=main.css.map */