:root {
    --content-max-width: 75vw;

    --font-family: system-ui;

    --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
    --fs-350: clamp(1.01rem, calc(0.99rem + 0.08vw), 1.14rem);
    --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
    --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
    --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
    --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
    --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
    --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

    --clr-primary-bg: #1D1C22;

    --clr-primary-350: hsl(250, 10%, 12%);
    --clr-primary-300: hsl(250, 10%, 10%);
    --clr-primary-250: hsl(250, 10%, 9%);
    --clr-primary-200: hsl(250, 10%, 7%);
    --clr-primary-100: hsl(250, 10%, 5%);
    --clr-secondary: hsl(0, 0%, 100%);

    --clr-accent-700: hsl(25, 72%, 75%);
    --clr-accent-600: hsl(25, 72%, 50%);
    --clr-accent-500: hsl(25, 72%, 35%);
    --clr-accent-400: hsl(25, 72%, 20%);
    --clr-accent-300: hsl(25, 72%, 15%);

    --clr-neutral-900: hsl(55, 15%, 90%);
    --clr-neutral-700: hsl(55, 15%, 75%);
    --clr-neutral-600: hsl(55, 15%, 50%);
    --clr-neutral-500: hsl(55, 15%, 35%);
    --clr-neutral-400: hsl(55, 15%, 20%);
    --clr-neutral-300: hsl(55, 15%, 15%);
    --clr-neutral-200: hsl(55, 15%, 10%);
    --clr-neutral-100: hsl(55, 15%, 5%);

    --tag-pad-large: 0.65rem 1.33rem;
    --tag-pad-default: 0.5rem 1rem;
    --tag-pad-small: 0.35rem 0.67rem;

    --underline-clr: var(--clr-accent-600);
}

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

html {
    color-scheme: dark;
    background-color: var(--clr-primary-350);
    overflow: vertical;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--clr-secondary);
    background-color: var(--clr-primary-bg);
    font-family: var(--font-family);
    font-size: var(--fs-300);
    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
}

h1,
h2,
h3,
h4 {
    color: var(--clr-neutral-700);
}

h1 {
    font-size: var(--fs-900);
    line-height: 1.05;
    text-transform: uppercase;
    font-weight: 900;
    text-wrap: balance;
}

h2 {
    font-size: var(--fs-600);
    line-height: 1.05;
    text-transform: uppercase;
    font-weight: 700;
    text-wrap: balance;
}

p,
article,
blockquote {
    max-width: 55ch;
    text-wrap: pretty;
}

a {
    text-decoration: none;
    color: var(--clr-neutral-600);
    display: inline-block;
    position: relative;
    color: var(--clr-neutral-600);
    cursor: pointer;
}

a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--underline-clr);
    transform-origin: bottom right;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    a:after {
        transition: none !important;
    }
}

.button {
    width: max-content;
    height: min-content;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    color: var(--clr-neutral-100);
    background: var(--clr-neutral-600);
    padding: 0.5rem 1.25rem;
    border-radius: 0.25rem;
}

.button:hover,
.button:focus-visible {
    color: var(--clr-neutral-700);
    background-color: var(--clr-neutral-500);
}

.tag {
    margin: 0;
    padding: var(--tag-pad-default);
    color: var(--clr-secondary);
    background-color: var(--clr-primary-250);
    border-radius: .5rem;
    box-shadow: 0.1rem 0.1rem .1rem var(--clr-accent-600);
    text-transform: capitalize;
    font-size: var(--fs-300);
    font-weight: 600;
    width: max-content;
    height: min-content;
}

.tag:is(.small) {
    padding: var(--tag-pad-small);
}

.tag:is(.large) {
    padding: var(--tag-pad-large);
    font-size: var(--fs-350);
}

blockquote {
    font-style: italic;
}

h1,
img,
header,
.button,
.tag,
.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.accent-underline {
    display: inline-block;
    color: var(--clr-neutral-600);
    text-decoration: underline;
    text-decoration-color: var(--underline-clr);
}