@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
    --font: "Poppins", "Open Sans", sans-serif, system-ui;
    --text-size-mega: clamp(2.027rem, 5vw + 1rem, 3.815rem);
    --text-size-huge: clamp(1.802rem, 4vw + 1rem, 3.052rem);
    --text-size-xlarge: clamp(1.602rem, 3vw + 1rem, 2.441rem);
    --text-size-large: clamp(1.424rem, 2.5vw + 1rem, 1.953rem);
    --text-size-medium: clamp(1.266rem, 2vw + 1rem, 1.563rem);
    --text-size-small: clamp(1.125rem, 1.5vw + 1rem, 1.25rem);
    --text-size-base: 1rem;
    --neutral-50: #fbfbfc;
    --neutral-100: #f3f3f5;
    --neutral-200: #e8e8ea;
    --neutral-300: #dcdce0;
    --neutral-400: #d1d1d6;
    --neutral-500: #b2b2ba;
    --neutral-600: #a0a0b0;
    --neutral-700: #565660;
    --neutral-800: #2b2b30;
    --neutral-900: #161618;
    --primary-500: #2a7ae4;
    --secondary-500: transparent;
    --error-500: #ff3426;
    --success-500: #8fce10;
    --warning-500: #ffdd05;
    --info-500: #3ed8fa;
    --background-color-light: var(--neutral-50);
    --background-color-dark: var(--neutral-900);
    --font-color-light: var(--neutral-50);
    --font-color-dark: var(--neutral-900);
    --glass-color-light: rgba(255, 255, 255, 0.75);
    --glass-color-dark: rgba(255, 255, 255, 0.1);
    --blur-effect-light: blur(5px);
    --blur-effect-dark: blur(12.5px);
    --box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0px 6px 12px 0px rgba(0, 0, 0, 0.25);
    --border-radius-out: 5px;
    --border-radius-in: 2.5px;
    --max-width: 1136px;
    interpolate-size: allow-keywords;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background-color: var(--neutral-50);
    color: var(--neutral-900);
}

:is(h1, h2, h3, h4, h5, h6) {
    font-weight: 400;
    line-height: 1.25;
    text-wrap: balance;
    letter-spacing: -0.025em;
    break-after: avoid-page;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-kerning: normal;
    font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
}

h3 {
    font-size: var(--text-size-medium);
}

h4 {
    font-size: var(--text-size-small);
}

p,
blockquote {
    font-weight: 300;
    font-size: var(--text-size-base);
    line-height: 1.75;
    word-spacing: 0.05em;
    text-wrap: pretty;
    max-width: 65ch;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    background-color: var(--neutral-200);
    padding: 0.15rem 0.3rem;
    border-radius: var(--border-radius-in);
    font-size: 0.9rem;
    color: var(--neutral-800);
}

pre {
    background-color: var(--neutral-800);
    border-radius: var(--border-radius-in);
    padding: 1rem;
    overflow-x: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-500) var(--neutral-200);
}

pre::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

pre::-webkit-scrollbar-track {
    background-color: var(--neutral-700);
    border-radius: 3px;
}

pre::-webkit-scrollbar-thumb {
    background-color: var(--neutral-500);
    border-radius: 3px;
}

pre code {
    position: relative;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    background-color: transparent;
    padding: 0;
    color: var(--neutral-50);
    font-size: 0.9rem;
    line-height: 1.5;
    display: block;
    tab-size: 2;
}

pre code .string {
    color: #a5d6ff;
}

pre code .number {
    color: #f8c555;
}

pre code .boolean {
    color: #f8c555;
}

pre code .null {
    color: #f8c555;
}

pre code .key {
    color: #ff7b72;
}

pre code .punctuation {
    color: #c9d1d9;
}

pre code .comment {
    color: #8b949e;
}

pre code .keyword {
    color: #ff7b72;
}

pre code .function {
    color: #d2a8ff;
}

pre code .variable {
    color: #79c0ff;
}

.root {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    position: relative;
    min-height: 100dvh;
    overflow: clip;
    background-color: var(--neutral-100);
}

.root > main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 1rem;
}

.root > main > section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(var(--max-width), 100%);
}

.root > main > section > h2 {
    font-size: var(--text-size-medium);
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.root > main > section > h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--primary-500);
    border-radius: 1.5px;
}

.icon {
    aspect-ratio: 1;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}