@font-face {
    font-family: 'Heading Now';
    src: url('../fonts/HeadingNow-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
}

:root {
    --color-white: oklch(1 0 0);
    --color-linen: oklch(0.9273 0.015 94.21);
    /*--color-grey: oklch(0.6123 0.0038 247.89); Old Color */
    --color-grey: oklch(0.5801 0.0103 196.45);
    /*--color-graphite: oklch(0.3163 0.006 258.35); Old Color */
    --color-graphite: oklch(0.2656 0.0103 196.45);
    /*--color-carbon: oklch(0.2591 0.0048 248.01); Old Color*/
    --color-carbon: oklch(0.228 0.0103 196.45);
    /*--color-chartreuse: oklch(0.9281 0.230253 123.9834); Old Color */
    --color-chartreuse: oklch(0.8076 0.1663 119.97);
    --color-chartreuse-dark: oklch(0.842 0.208561 123.814);
    /* https://coolors.co/222426-303235-828486-ffffff-c8ff01-b0e000 */

    --border-radius: 2.5rem;
    --gap: 1.25rem;
}

* {
    box-sizing: border-box;

    --webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
html, body {
    margin: 0;
    padding: 0;
}
body {
    position: relative;
    color: var(--color-carbon);
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 2rem;
    padding: 2rem;
    background-color: var(--color-chartreuse);
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    max-width: 70%;
    min-height: 100vh;
    text-align: center;
}
h1 {
    margin: 0;
    color: var(--color-carbon);
    font-family: 'Heading Now', sans-serif;
    font-size: 7rem;
    font-weight: 400;
    font-stretch: 150%;
    line-height: 7rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
}
h1 span.focus {
    color: var(--color-carbon);
    font-weight: 900;
    font-stretch: 250%;
}
h1 span.break {
    display: block;
}

.main-header {
    margin: 0 auto;
    text-align: center;
}
.main-header__brand > svg {
    height: 4rem;
}
.main-header__brand > svg > g {
    fill: var(--color-carbon);
}
hero__main-title {
    flex: 1;
}