@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
    src: url("/assets/fonts/Play-Regular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'PlayBold';
    font-style: normal;
    font-weight: 800;
    font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
    src: url("/assets/fonts/Play-Bold.ttf") format("truetype");
    font-display: swap;
}

:root {
    --ease-in-out: cubic-bezier(.785, .135, .15, .86);
    --font-sans: "Play", sans-serif;
    --font-bold: "Play", sans-serif;
    --header-height: 0;
    --white: #eeeeee;
    --black: #1d1d1d;
    --grey: #f5f5f5;
    --foreground: var(--black);
    --background: var(--white);
    --ease-out: cubic-bezier(0, 1, 1, 1);
    --ease-out-expo: cubic-bezier(0, 1, 0, 1);
    --ease-in: cubic-bezier(1, 0, 1, 1);
    --ease-in-expo: cubic-bezier(1, 0, 1, 0);

    --xl: 1512px;
    --lg: 1280px;
    --md: 1024px;
    --sm: 768px;
    --xs: 584px;
    --font-xxl: 5.3125rem;
    --font-xl: 4.6872rem;
    --font-lg: 2.5rem;
    --font-md: 1.5rem;
    --font-nrml: 1.2rem;
    --font-s: 1rem;
    --font-xs: 0.9rem;

    box-sizing: border-box;
    color: var(--foreground);

    --background-color: var(--white);
    --secondary-color: var(--black);
    --highlights: var(--white);
    --secondary-highlights: var(--black);
    --text-color: #4c4c48;
    --gradient: linear-gradient(var(--secondary-color), var(--background-color));

    --measure: 70ch;

    --ratio: 1.5;
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1rem;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));

    --space: var(--s1)
}

:root.dark {
    --background-color: var(--black);
    --secondary-color: var(--white);
    --highlights: var(--white);
    --secondary-highlights: var(--black);
    --text-color: var(--white);
}

* {
    box-sizing: border-box;
    text-decoration: none;
    color: var(--text-color)
}

@media only screen and (max-width: 584px) {
    :root {
        --font-xxl: 2rem;
        --font-xl: 2rem;
        --font-lg: 1.667rem;
        --font-md: 1.333rem;
        --font-nrml: 1.1rem;
    }
}

html {
    background-color: var(--background-color);
    font-size: 16px;
    font-weight: 400;
    font-family: var(--font-sans), sans-serif;
}

body {
    background-color: var(--background-color);
    font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
    line-height: 1.54;
    text-rendering: optimizeLegibility;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 80ch;
    margin: auto;
    padding: 1rem;
    max-inline-size: none;

    font-family: 'Play', sans-serif;
    font-size: 1rem;
    font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    font-family: var(--font-bold), var(--font-sans), sans-serif;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h1 {
    margin: 0.67em 0;
}

h1,
h2 {
    font-size: 3rem;
}

h3 {
    font-size: var(--font-lg);
}

h4 {
    font-size: var(--font-md);
}

a:link,
a:active,
a:visited,
a:hover,
a:visited {
    color: inherit;
}

.lowercase {
    text-transform: capitalize;
}

html,
body,
div,
header,
nav,
main,
footer {
    max-inline-size: none;
}

.hidden {
    display: none;
}