@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: clamp(2.25rem, 4vw, 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%;
}


/** Layout & components **/

/* Header */

#header {
    display: flex;
    flex-wrap: wrap;
    margin:0;
    background-image: url(https://s3.amazonaws.com/ncaanewsarchive/images/NCAA_bg.png);
}

#header .icon {
    display: inline-block;
    margin: .5rem;
    padding: .5rem 1rem;
}

#header .icon img {
    height: 6rem;
    width: 6rem;
}

#header .site-title {
    color: white;
    font-size: var(--font-size-3xl);
    align-self: end;
    padding: 0 1.5rem;
    margin-top: .5rem;
}

/* Article */

article {
    max-width: var(--content-width-lg);
    margin-left: auto;
    margin-right: auto;
}

/* rows */
.f-rows {
    display:flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: center;
}

 .f-quarter, f-one-quarter, .f-two-fifths, .f-three-fifths, .f-four-fifths, .f-third, .f-half, .f-two-thirds, .f-one-third, .f-full {
    flex: 0 0 100%;
    margin: 1rem 0;
    max-width: 100%;
}
.f-sixth, .f-fifth, .f-one-fifth {
    flex: 0 0 48%;
    margin: 1rem 1%;
    max-width: 48%;
}
 figure .f-quarter {
     flex: 0 0 50%;
     margin: 0;
     max-width: 50%;
 }

@media screen and (min-width: 768px) {
    .f-sixth {
        flex: 0 0 23.5%;
        margin: 1rem .75%;
        max-width: 23.5%;
    }
    .f-fifth, .f-one-fifth, .f-two-fifths {
        flex: 0 0 30.3%;
        margin: 1rem 1.5%;
        max-width: 30.3%;
    }
    .f-quarter, f-one-quarter, .f-third, .f-one-third, .f-half {
        flex: 0 0 48%;
        margin: 1rem 1%;
        max-width: 48%;
    }
    .f-third.fill-space, .f-one-third.fill-space, .f-half.fill-space {
        flex: 1 0 48%;
        max-width:98%;
        margin: 1rem 1%;
    }
    .f-three-fifths, .f-four-fifths {
        flex: 0 0 63.6%;
        margin: 1rem 1.5%;
        max-width: 63.6%;
    }
    .f-two-thirds, .f-full {
        flex: 0 0 98%;
        margin: 1rem 1%;
    }
    figure .f-quarter {
     flex: 0 0 50%;
     margin: 0;
     max-width: 50%;
    }
}
@media screen and (min-width: 1280px) {
    .f-sixth {
        flex: 0 0 16%;
        margin: 1rem .30%;
        max-width: 16%;
    }
    .f-fifth, .f-one-fifth {
        flex: 0 0 19%;
        margin: 1rem .5%;
        max-width: 19%;
    }
    .f-two-fifths {
        flex: 0 0 39%;
        margin: 1rem .5%;
        max-width: 39%;
    }
    .f-three-fifths {
        flex: 0 0 59%;
        margin: 1rem .5%;
        max-width: 59%;
    }
    .f-four-fifths {
        flex: 0 0 79%;
        margin: 1rem .5%;
        max-width: 79%;
    }
    .f-quarter, f-one-quarter {
        flex: 0 0 23.5%;
        margin: 1rem .75%;
        max-width: 23.5%;
    }
    .f-third, .f-one-third {
        flex: 0 0 30.3%;
        margin: 1rem 1.5%;
        max-width: 30.3%;
    }
    .f-two-thirds {
        flex: 0 0 63.6%;
        margin: 1rem 1.5%;
        max-width: 63.6%;
    }
    .f-third.fill-space, .f-one-third.fill-space {
        flex: 1 0 30.3%;
        max-width:97%;
        margin: 1rem 1.5%;
    }
    .f-two-thirds.fill-space {
        flex: 1 0 63.6%;
        max-width:97%;
        margin: 1rem 1.5%;
    }
    .f-full {
        flex: 0 0 97%;
        margin: 1rem 1.5%;
        max-width:97%;
    }
}

/** Card **/

.card {
    display: block;
    border: 1px solid #dddddd;
    border-radius: .25rem;
    margin: .25rem;
}

.card-body {
    padding: 1rem;
}

.card .card-heading {
    margin-top: -17px;
    margin-left: -17px;
    margin-right: -17px;
    background: var(--dark-blue);
    border-color: var(--dark-blue);
    color: white;
    text-align: center;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    line-height:1.25;
    text-transform: unset;
    margin-bottom: .5rem;
    padding: .5rem;
}