@import "colors.css"; 
:root {
    --font-family-accent:'BluuNext',serif; /*'Bagnard'*/
    --font-accent:normal normal 400 1em var(--font-family-accent);
    --font-family-body:'Red Hat Text',sans-serif;
    --font-family-mono:'Red Hat Mono',monospace;

    --content-200:300px;
    --content-250:480px;
    --content-300:640px;
    --content-400:720px;
    --content-450:840px;
    --content-500:960px;
    --content-600:1280px;
    --content-700:1440px;

    interpolate-size: allow-keywords;
    scroll-behavior: smooth;
    scroll-padding-top: 2em;

    --accent-100:var(--blue-100);
    --accent-200:var(--blue-200);
    --accent-300:var(--blue-300);
    --accent-400:var(--blue-400);
    --accent-500:var(--blue-500);
    --accent-600:var(--blue-600);
    --accent-700:var(--blue-700);
    --accent-800:var(--blue-800);
    --accent-900:var(--blue-900);
}
body {
    --tooltip-arrow-size: .5em;
    --tooltip-background-color: var(--accent-300);
    --tooltip-color: var(--accent-900);
    --tooltip-border-radius: 4px;
    --tooltip-box-shadow: none;
    --tooltip-font-family: var(--font-family-body);
    --tooltip-font-size: max(.65em,14px);
    --tooltip-font-weight: 400;
    --tooltip-line-height: 1em;
    --tooltip-offset-x: 0;
    --tooltip-offset-y: 0;
    --tooltip-padding: .5em;
    --tooltip-white-space-hidden: nowrap;
    --tooltip-white-space-shown: normal;
    --tooltip-z-index: 100;
}

* {
    margin:0;
    box-sizing: border-box;
}
body {
    margin:0;
    font-family:var(--font-family-body);
    font-size:clamp(16px, 2vw, 24px);
    color:var(--dark-300);
    background-color:var(--light-950);
    line-height:1.25;
}
html.dark-theme {
    body {
        color:var(--dark-500);
    }
}
a:not(.button):not(.nav-button) {
    color:var(--blue-300);
    transition:.3s color ease-out;
    &:visited {
        color:var(--purple-300);
    }
    &:hover {
        color:var(--blue-400);
    }
    &:focus:not(:hover), &:focus-within:not(:hover) {
        outline:3px solid var(--accent-600);
    }
}
.nav-button {
    text-decoration: none;
    color:var(--dark-400);
    text-transform:uppercase;
    letter-spacing: .1em;
    font-size:.8em;
    padding:.75em 1.5em;
    min-width:100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content:center;
    height: 100%;
    transition:.2s background-color ease-out, .2s color ease-out, .2s border-color ease-out;
    border-bottom:4px solid transparent;
    &:hover {
        background-color:var(--accent-900);
        border-bottom-color: var(--accent-700);
    }
    &:focus:not(:hover), &:focus-within:not(:hover) {
        outline:3px solid var(--accent-700);
        color:var(--accent-400);
    }
    &.active {
        color:var(--accent-400);
        border-bottom-color: var(--accent-700);
    }
    @media (max-width: 768px) {
        min-width:initial;
        font-size:1em;
        padding:.75em 1em;
    }
}
nav:has(.nav-button:hover) .nav-button.active:not(:hover) {
    border-bottom-color:transparent;
}
html.dark-theme {
    .nav-button {
    color:var(--dark-600);
        &:hover,&.current {
            background-color:var(--light-800);
            color:var(--dark-100);
        }
    }
}
@property --percentage {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
.button-container {
    display:flex;
    flex-wrap:wrap;
    align-items:start;
    list-style:none;
    gap:.5em .75em;
    padding:0;
    margin-top:1.5em;
    &.mobile-y {
        @media (max-width: 768px) {
            flex-direction:column;
            align-items:stretch;
        }
    }
    &.y {
        flex-direction: column;
    }
    &.gradient {

            &:focus:not(:hover), &:focus-within:not(:hover) {
                outline:3px solid var(--accent-700);
            }
            &.inverted:focus {
                background:var(--accent-900);
            }
        /* purple if 3 or 5 children, middle.
                  if 4: 3 forward / 2 reverse */
        &:has(> :nth-child(3)):not(:has(> :nth-child(4))) .button:nth-of-type(2),
        &:has(> :nth-child(5)):not(:has(> :nth-child(6))) .button:nth-of-type(3),
        &:not(.reverse):has(> :nth-child(4)):not(:has(> :nth-child(5))) .button:nth-of-type(3),
        &.reverse:has(> :nth-child(4)):not(:has(> :nth-child(5))) .button:nth-of-type(2) {
            --accent-100:var(--purple-100);
            --accent-200:var(--purple-200);
            --accent-300:var(--purple-300);
            --accent-400:var(--purple-400);
            --accent-500:var(--purple-500);
            --accent-600:var(--purple-600);
            --accent-700:var(--purple-700);
            --accent-800:var(--purple-800);
            --accent-900:var(--purple-900);
        }
        /* blue if 4: 2nd forward / 3rd reverse
                if 5: 2nd forward/ 4th reverse */
        &:not(.reverse):has(> :nth-child(4)):not(:has(> :nth-child(5))) .button:nth-of-type(2),
        &:not(.reverse):has(> :nth-child(5)):not(:has(> :nth-child(6))) .button:nth-of-type(2),
        &.reverse:has(> :nth-child(4)):not(:has(> :nth-child(5))) .button:nth-of-type(3),
        &.reverse:has(> :nth-child(5)):not(:has(> :nth-child(6))) .button:nth-of-type(4) {
            --accent-100:var(--blue-100);
            --accent-200:var(--blue-200);
            --accent-300:var(--blue-300);
            --accent-400:var(--blue-400);
            --accent-500:var(--blue-500);
            --accent-600:var(--blue-600);
            --accent-700:var(--blue-700);
            --accent-800:var(--blue-800);
            --accent-900:var(--blue-900);
            --accent-950:var(--blue-950);
        }
        &:not(.reverse):has(> :nth-child(5)):not(:has(> :nth-child(6))) .button:nth-of-type(4),
        &.reverse:has(> :nth-child(5)):not(:has(> :nth-child(6))) .button:nth-of-type(2) {
            --accent-100: color-mix(in oklch, var(--purple-100), var(--red-100) 50%);
            --accent-200: color-mix(in oklch, var(--purple-200), var(--red-200) 50%);
            --accent-300: color-mix(in oklch, var(--purple-300), var(--red-300) 50%);
            --accent-400: color-mix(in oklch, var(--purple-400), var(--red-400) 50%);
        
            --accent-500: color-mix(in oklch, var(--purple-500), var(--red-500) 50%);
            --accent-600: color-mix(in oklch, var(--purple-600), var(--red-600) 50%);
            --accent-700: color-mix(in oklch, var(--purple-700), var(--red-700) 50%);
            
            --accent-800: color-mix(in oklch, var(--purple-800), var(--red-800) 50%);
            --accent-900: color-mix(in oklch, var(--purple-900), var(--red-900) 50%);
        }
    }
    &.gradient:not(.reverse) {
        .button {

            --accent-100: color-mix(in oklch, var(--green-100), var(--red-100) var(--percentage));
            --accent-200: color-mix(in oklch, var(--green-200), var(--red-200) var(--percentage));
            --accent-300: color-mix(in oklch, var(--green-300), var(--red-300) var(--percentage));
            --accent-400: color-mix(in oklch, var(--green-400), var(--red-400) var(--percentage));
        
            --accent-500: color-mix(in oklch, var(--green-500), var(--red-500) var(--percentage));
            --accent-600: color-mix(in oklch, var(--green-600), var(--red-600) var(--percentage));
            --accent-700: color-mix(in oklch, var(--green-700), var(--red-700) var(--percentage));
            
            --accent-800: color-mix(in oklch, var(--green-800), var(--red-800) var(--percentage));
            --accent-900: color-mix(in oklch, var(--green-900), var(--red-900) var(--percentage));
        }
    }
    &.gradient.reverse {
        .button {

            --accent-100: color-mix(in oklch, var(--red-100), var(--green-100) var(--percentage));
            --accent-200: color-mix(in oklch, var(--red-200), var(--green-200) var(--percentage));
            --accent-300: color-mix(in oklch, var(--red-300), var(--green-300) var(--percentage));
            --accent-400: color-mix(in oklch, var(--red-400), var(--green-400) var(--percentage));

            --accent-500: color-mix(in oklch, var(--red-500), var(--green-500) var(--percentage));
            --accent-600: color-mix(in oklch, var(--red-600), var(--green-600) var(--percentage));
            --accent-700: color-mix(in oklch, var(--red-700), var(--green-700) var(--percentage));

            --accent-800: color-mix(in oklch, var(--red-800), var(--green-800) var(--percentage));
            --accent-900: color-mix(in oklch, var(--red-900), var(--green-900) var(--percentage));
        }
    }
}

.neutral {
    --accent-100:var(--dark-100);
    --accent-200:var(--dark-200);
    --accent-300:var(--dark-300);
    --accent-400:var(--dark-400);
    --accent-500:var(--dark-500);
    --accent-600:var(--light-700);
    --accent-700:var(--light-750);
    --accent-800:var(--light-800);
    --accent-900:var(--light-850);
}
.purple {
    --accent-100:var(--purple-100);
    --accent-200:var(--purple-200);
    --accent-300:var(--purple-300);
    --accent-400:var(--purple-400);
    --accent-500:var(--purple-500);
    --accent-600:var(--purple-600);
    --accent-700:var(--purple-700);
    --accent-800:var(--purple-800);
    --accent-900:var(--purple-900);
    --accent-950:var(--purple-950);
}
.blue {
    --accent-100:var(--blue-100);
    --accent-200:var(--blue-200);
    --accent-300:var(--blue-300);
    --accent-400:var(--blue-400);
    --accent-500:var(--blue-500);
    --accent-600:var(--blue-600);
    --accent-700:var(--blue-700);
    --accent-800:var(--blue-800);
    --accent-900:var(--blue-900);
    --accent-950:var(--blue-950);
}
.green {
    --accent-100:var(--green-100);
    --accent-200:var(--green-200);
    --accent-300:var(--green-300);
    --accent-400:var(--green-400);
    --accent-500:var(--green-500);
    --accent-600:var(--green-600);
    --accent-700:var(--green-700);
    --accent-800:var(--green-800);
    --accent-900:var(--green-900);
}
.yellow {
    --accent-100:var(--yellow-100);
    --accent-200:var(--yellow-200);
    --accent-300:var(--yellow-300);
    --accent-400:var(--yellow-400);
    --accent-500:var(--yellow-500);
    --accent-600:var(--yellow-600);
    --accent-700:var(--yellow-700);
    --accent-800:var(--yellow-800);
    --accent-900:var(--yellow-900);
}
.red {
    --accent-100:var(--red-100);
    --accent-200:var(--red-200);
    --accent-300:var(--red-300);
    --accent-400:var(--red-400);
    --accent-500:var(--red-500);
    --accent-600:var(--red-600);
    --accent-700:var(--red-700);
    --accent-800:var(--red-800);
    --accent-900:var(--red-900);
    --accent-950:var(--red-950);
}

.button {
    padding:.33em 1em;
    display:block;
    /*
    --blue:var(--500);
    --blue-hover:var(--accent-600);
    --contrast:var(--dark-200);
    --contrast-hover:var(--dark-100);*/
    background-color:var(--accent-700);
    color:var(--accent-300);
    border-color: var(--accent-700);
    border-width:4px;
    border-style: solid;
    text-decoration: none;
    font-weight:700;
    cursor: pointer;
    transition:background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
    border-radius:.25em;
    @media (max-width: 768px) {
        border-width:3px;
    }
    &:hover {
        background-color:var(--accent-600);
        color:var(--accent-100);
        border-color: var(--accent-600);
    }
    &.inverted {
        border-color: var(--accent-600);
        background-color:transparent;
        color:var(--accent-600);
        &:hover {
            background-color:var(--accent-700);
            border-color:var(--accent-700);
            color:var(--accent-100);
        }
        &:focus:not(:hover), &:focus-within:not(:hover) {
            background-color:var(--accent-800);
            color:var(--accent-200);
        }
    }
    &.pastel-bg {
        background-color:var(--accent-900)!important;
    }
    &.medium {
        background-color:var(--accent-600);
        color:var(--accent-200);
        border-color: var(--accent-600);
        &:hover {
            background-color:var(--accent-500);
            color:var(--accent-100);
            border-color: var(--accent-500);
        }
    }
    &.light {
        background-color:var(--accent-800);
        color:var(--accent-300);
        border-color: var(--accent-800);
        &:hover {
            background-color:var(--accent-700);
            color:var(--accent-200);
            border-color: var(--accent-700);
        }
    }
    &.dark {
        background-color:var(--accent-500);
        color:var(--light-900);/*var(--accent-900);*/
        border-color: var(--accent-500);
        &:hover {
            background-color:var(--accent-400);
            /*color:var(--accent-800);*/
            border-color: var(--accent-400);
        }
        &.inverted {
            border-color: var(--accent-500);
            background-color:transparent;
            color:var(--accent-500);
            &:hover {
                background-color:var(--accent-400);
                border-color:var(--accent-400);
                color:var(--light-900);
            }
            &:focus:not(:hover), &:focus-within:not(:hover) {
                background-color:var(--accent-800);
                color:var(--accent-200);
                outline:3px solid var(--accent-700);
            }
        }
    }
    &:focus:not(:hover), &:focus-within:not(:hover) {
        outline:3px solid var(--accent-500);
        z-index:2;
    }
    svg * {
        vector-effect: non-scaling-stroke;
    }
    &.transparent {
        background-color:transparent;
        border-color:transparent;
        &:hover {
            background-color:var(--accent-700);
            border-color:var(--accent-700);
        }
    }
    /*&.light {
        background-color:var(--accent-800);
        border-color: var(--accent-800);
        &:hover {
            background-color:var(--accent-700);
            border-color: var(--accent-700);
        }
    }
    &.medium {
        background-color:var(--accent-600);
        color:var(--light-900);
        border-color: var(--accent-600);
        &:hover {
            background-color:var(--accent-700);
            border-color: var(--accent-700);
        }
        &.inverted {
            border-color: var(--accent-600);
            background-color:transparent;
            color:var(--accent-600);
            &:hover {
                background-color:var(--accent-700);
                border-color:var(--accent-700);
                color:var(--light-900);
            }
        }
    }*/
}
html.dark-theme {
    .button {
        color:var(--accent-100);
        background-color:var(--accent-700);
        border-color:var(--accent-700);
        &:hover {
            background-color:var(--accent-800);
            border-color: var(--accent-800);
        }
        &.inverted {
            border-color: var(--accent-500);
            background-color:transparent;
            color:var(--accent-500);
            &:hover {
                background-color:var(--accent-700);
                border-color:var(--accent-700);
                color:var(--accent-100);
            }
            &:focus:not(:hover), &:focus-within:not(:hover) {
                background-color:var(--accent-800);
                color:var(--accent-200);
            }
        }
        &.dark {
            background-color:var(--accent-400);
            color:var(--accent-900);
            border-color: var(--accent-400);
            &:hover {
                background-color:var(--accent-500);
                border-color:var(--accent-500);
            }
            &.inverted {
                border-color: var(--accent-400);
                background-color:transparent;
                color:var(--accent-400);
                &:hover {
                    background-color:var(--accent-500);
                    border-color:var(--accent-500);
                    color:var(--accent-900);
                }
                &:focus:not(:hover), &:focus-within:not(:hover) {
                    background-color:var(--accent-800);
                    color:var(--accent-200);
                    outline:3px solid var(--accent-700);
                }
            }
        }
        &.transparent {
            background-color:transparent;
            border-color:transparent;
            &:hover {
                background-color:var(--accent-700);
                border-color:var(--accent-700);
            }
        }
    }
}
*:focus:hover {
    outline:3px solid var(--accent-500);
}
.balance {
    text-wrap: balance;
}

.hyphen {
    hyphens: auto;
}
:root {
    --header-min-height:3em;
}
* {
    scroll-margin-top:var(--header-min-height);
}
#content {
    /*
        https://codepen.io/kevinpowell/pen/ExrZrrw?editors=1100
    */
    display:grid;
    --padding-inline:2em;
    --content-max-width:var(--content-400);
    --breakout-max-width:var(--content-600); /*6em*/
    --breakout-size:calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
    /*grid-template-rows: auto minmax(calc(100dvh - var(--header-min-height)),1fr) auto;*/
    grid-template-rows: minmax(calc(100dvh - 2 * var(--header-min-height)),1fr) auto;
    grid-template-columns:
        [full-width-start] minmax(var(--padding-inline), 1fr)
        [breakout-start] minmax(0, var(--breakout-size))
        [content-start] min(
            100% - (var(--padding-inline) * 2),
            var(--content-max-width)
            )
        [content-end]
        minmax(0, var(--breakout-size)) [breakout-end]
        minmax(var(--padding-inline), 1fr) [full-width-end];
    background:var(--light-900);
    /*min-height:100dvh;*/
    overflow:hidden;
    position:relative;
    padding-top:var(--header-min-height);
    @media (max-width: 768px) {
        --padding-inline:1.5em;
    }
    &>header {
        grid-column:full-width;
        display: grid;
        grid-template-columns: inherit;
        min-height:var(--header-min-height);
    }
    &>footer {
        margin-top:var(--header-min-height);
        grid-column:full-width;
        display: grid;
        grid-template-columns: inherit;
    }
    .full-width {
        grid-column:full-width;
    }
    .breakout {
        grid-column:breakout;
    }
}
main {
    grid-column:breakout;
    justify-self: center;
    z-index:2;
    box-sizing: content-box;
}

.font-accent {
    font:var(--font-accent);
    line-height:1;
}
.font-accent mark {
    font-style:italic;
}
mark {
    /*
        https://codepen.io/tfoh/embed/VQqRdB?default-tab=result&theme-id=light
    */
    color:var(--dark-100);
    background-color:var(--accent-800);
    z-index:-1;

    position: relative;
    display: inline;
    box-decoration-break: clone;
    margin:0 -.2em;

    padding: 0.0em 0.2em .0em;
    background: linear-gradient(90deg,
        transparent .15em,
        var(--accent-900) .4em,
        var(--accent-800) 50%,
        var(--accent-700) calc(100% - .4em),
        transparent calc(100% - .1em));
    background-attachment: scroll;
    background-clip: border-box;
    background-clip: padding-box;
    border-radius: 0 .75em 0 .75em;

    >span {
        position: relative;
        z-index: 1;
    }
    /*border-radius: .5em .75em .25em .75em;
    background-image: 
        linear-gradient(-100deg, 
        transparent,
        var(--accent-800) 100%, 
        transparent
    );*/
    /*&:after {
        z-index:-1;
        content:'';
        position: absolute;
        inset:-.1em;
        background-color:var(--accent-800);
        border-radius: .2em;
        transform:rotate(1deg);
    }*/
}
html.light-theme .blue mark,
.red mark {
    background: linear-gradient(90deg,
        transparent .15em,
        var(--accent-900) .4em,
        var(--accent-800) calc(100% - .4em),
        transparent calc(100% - .1em));
}
progress {
    height:1em;
    border-radius:.5em;
    border:none;
    --percentage:attr(value);
    overflow:hidden;
    width:100%;
    background:var(--light-800);
    &[value] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    &::-moz-progress-bar {
        background:color-mix(in oklch, var(--green-600), var(--red-600) var(--percentage));
        border-radius:.5em;
    }
    &::-webkit-progress-bar {
        background:var(--light-800);
    }
    &::-webkit-progress-value {
        background:color-mix(in oklch, var(--green-600), var(--red-600) var(--percentage));
        border-radius:.5em;
    }
    &:progress-value {
        background:color-mix(in oklch, var(--green-600), var(--red-600) var(--percentage));
        border-radius:.5em;
    }
}




.details-icon-text,
.icon-text {
    border:1px solid var(--light-700);
    border-radius: .5em;
    overflow: hidden;
    transition:.2s box-shadow ease-out,.2s border-color ease-out;
    --icon-size:2em;
    &:focus,&:focus-within {
        outline:3px solid var(--accent-700);
    }
    &>summary:focus {outline:none;}
}
.details-icon-text {
    &[open] {
        box-shadow:0 .5em 1.5em var(--light-700);
        .icon {
            &:after {
                transform:scale(1.5) translate(-16.667%,0%);
                background-color:var(--accent-600);
            }
            svg {color:white;}
        }
        &>summary:after {
            opacity:.25;
        }
    }
    &:hover {
        box-shadow:0 .25em 1em var(--light-700);
        &>summary:after {
            opacity:.33;
        }
    }
    .detail {
        padding:1em;
        border-top:1px solid var(--light-700);
        p,ul,ol,details {
            margin-top:.5em;
        }
    }
    &::details-content {
        height: 0;
        transition:block-size .4s;
    }
    &[open]::details-content {
        height: auto;
    }
}
.icon-text {
    &:hover {
        box-shadow:0 .25em 1em var(--light-700);
        .icon {
            &:after {
                transform:scale(2) translate(-25%,0%);
                background-color:var(--accent-600);
            }
            svg {color:white;}
        }
        &:after {
            opacity:.33;
        }
    }
}
html.dark-theme {
    .details-icon-text,
    .icon-text {
        border-color:var(--accent-800);
    }
    .details-icon-text {
        &[open] {
            box-shadow:none;
        }
        &:hover {
            box-shadow:none;
            border-color:var(--accent-700);
        }
    }
    .detail {
        border-color:var(--accent-800);
    }
    .icon-text {
        &:hover {
            box-shadow:none;
        }
    }
}
details:not([class]) {
    summary {
        &>* {
            text-decoration: var(--accent-700) solid underline 1px;
            cursor:pointer;
        }
        em {
            font-style:normal;
        }
        &::marker {
            content: "";
        }
    }
    &>*:not(summary) {
        font-size:.8em;
        padding-left:1em;
        border-left:2px solid var(--accent-700);
    }
}
.details-icon-text>summary,.icon-text {
    cursor:pointer;
    display:flex;
    position: relative;
    z-index: 5;
    gap:1em;
    align-items: center;
    &:after {
        content:'';
        inset:0;
        position: absolute;
        z-index:-1;
        opacity:.125;
        background:linear-gradient(90deg, var(--accent-600), transparent);
        transition: opacity .2s ease-out;
    }
    .icon {
        flex-shrink:0;
        width:var(--icon-size);
        height:var(--icon-size);
        background-color:transparent;
        transform:initial;
        display:grid;
        place-items:center;
        position: relative;
        padding:.25em;
        &:after {
            content:'';
            position:absolute;
            inset:0;
            z-index:-1;
            border-radius: 50%;
            transition: background-color .2s ease-out, transform .2s ease-out;
            
            transform-origin: 0% 50%;
            transform:scale(1) translate(-25%,0%);
        }
        svg {
            height:100%;
            width:100%;
            color:var(--accent-600);
            transition: color .2s ease-out;
        }
    }
    .text {
        padding:.5em 1em .5em 0;
    }
    &::marker {
        content: "";
    }
}
@media (max-width: 768px) {
    .icon-text {
        div.icon {
            &:after {
                transform:scale(1.75) translate(-25%,0%);
                background-color:var(--accent-600);
            }
            svg {color:white;}
        }
        &:after {
            opacity:.33;
        }
    }
    html.dark-theme {
        .icon-text {
            
        }
    }
}

p .button,.button.small {
	display:inline;
	padding:.125em .25em;
	font-size:.8em;
    &.inverted,&.inverted.dark {
        border-width:2px;
    }
}


@media (max-width: 768px) {
    .hide-mobile {display:none}
}



@font-face {
  font-display: swap;
  font-family: "Bagnard";
  font-style: normal;
  font-weight:400;
  src: local("Bagnard"), url("/fonts/bagnard.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "BluuNext";
  font-style: normal;
  font-weight:400;
  src: local("BluuNext"), url("/fonts/bluunext-bold.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "BluuNext";
  font-style: italic;
  font-weight:400;
  src: local("BluuNext"), url("/fonts/bluunext-bolditalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/red-hat-text-v19-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Red Hat Text';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/red-hat-text-v19-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/red-hat-text-v19-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/red-hat-mono-v16-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Red Hat Mono';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/red-hat-mono-v16-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/red-hat-mono-v16-latin-700.woff2') format('woff2');
}