@import url("https://use.typekit.net/olk4mod.css");
/*! variables */

:root {
    /** Typography **/

    --font-family-sans:
        supria-sans, supria-sans-condensed, system-ui, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    --font-family-serif:
        Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
    --font-family-slab: mislab-std, serif;
    --font-family-mono:
        ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
        "DejaVu Sans Mono", monospace;

    --font-size-base: 16px;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-normal: 1rem;
    --font-size-display: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2.25rem;
    --font-size-3xl: 3rem;
    --font-size-4xl: clamp(3rem, 2.4rem + 3vw, 5rem);
    --font-size-5xl: clamp(4rem, 3.4rem + 3vw, 6rem);

    --font-size-body: var(--font-size-display);

    /* line height */
    --line-height: 1.2;
    --line-height-copy: 1.6;
    --line-height-header: 1.2;

    /** Colors **/

    /*  NCAA Palette */
    --dark-blue: #002855;
    --dim-blue: #00558c;
    --blue: #0077c8;
    /* primary */
    --disk-blue: #009cde;
    /* disk */
    --ice-blue: #8dc8e8;
    --lighter-blue: #e3f1f9;
    /* extra - background */
    --yellow: #f1be4b;
    --orange: #ea7600;
    --red: #9a3324;
    --dark-green: #275d38;
    --bright-green: #6cc24a;
    --light-green: #b7dd79;
    --dim-purple: #403a60;
    --purple: #7c6992;
    --light-purple: #b4b5df;
    /* shades */
    --black: #000000;
    --darker-gray: #121210;
    /* extra */
    --dark-gray: #63666a;
    --bright-gray: #b1b3b3;
    --light-gray: #d9d9d6;
    --lighter-gray: #ebedef;
    /* extra - background */
    --white: #ffffff;

    /* colors named */
    --color-background: var(--white);
    --color-background-gray: var(--lighter-gray);
    --color-background-blue: var(--lighter-blue);
    --color-text: var(--black);
    --color-link: var(--dim-blue);
    --color-link-hover: var(--dark-blue);
    --color-primary: var(--blue);

    /** Layout **/

    /** Content width **/
    --content-width-sm: 46rem;
    --content-width-md: 62rem;
    --content-width-lg: 74rem;
    --content-width-xl: 86rem;
}



/** Normalize Variation **/

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

html {
    font-size: var(--font-size-base);
    line-height: var(--line-height);
}

body {
    margin: 0;
}

main,
article,
aside,
footer,
header,
nav,
section,
figure,
figcaption {
    display: block;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp,
pre {
    font-family: var(--font-family-mono);
    font-size: 1em;
}

small {
    font-size: var(--font-size-sm);
}

sub,
sup {
    font-size: var(--font-size-xs);
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

img {
    border-style: none;
}

table {
    border-color: currentcolor;
}

/** Forms **/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: var(--line-height);
    margin: 0;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: none;
    appearance: none
}

legend {
    padding: 0;
}

progress {
    vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

summary {
    display: list-item;
}

/** Some Basic Element Stylings **/

body {
    font-family: var(--font-family-sans);
    background-color: var(--color-background);
    color: var(--color-text);
    font-size: var(--font-size-body);
    max-width: 96vw;
    margin-left: auto;
    margin-right: auto;
}

p {
    margin-block-start: 1em;
    margin-block-end: 1em;
    line-height: var(--line-height-copy);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0.5em 0 0.5em;
    font-family: var(--font-family-sans);
    font-weight: 800;
    line-height: var(--line-height-header);
}

h1 {
    font-size: var(--font-size-xxl);
}

h2 {
    font-size: var(--font-size-xl);
}

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

h4 {
    font-size: var(--font-size-lg);
    font-style: italic;
    font-weight: normal;
}

h5 {
    font-size: var(--font-size-normal);
}

h6 {
    font-size: var(--font-size-sm);
}

code {
    background: var(--color-gray-lighter);
}

kbd {
    background: var(--color-gray-lighter);
    border: solid 1px var(--color-text);
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
}

a {
    color: var(--color-link);
    text-decoration: none;

    &:hover {
        color: var(--color-link-hover);
        text-decoration: underline;
    }
}

ul {
    list-style-type: disc;

    ul {
        list-style-type: circle;

        ul {
            list-style-type: square;
        }
    }
}

ol {
    list-style-type: decimal;

    ol {
        list-style-type: lower-alpha;

        ol {
            list-style-type: lower-roman;

            ol {
                list-style-type: decimal;
            }
        }
    }
}

img {
    max-width: 100%;
}