html {
    /* A box sizing reset: https://css-tricks.com/box-sizing/ */
    box-sizing: border-box;

    /* Sets the rm size for the rest of the styles */
    font-size: 16px;

    /* Layout */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    --site-width-margin: 4vw;

    /* Colors */
    --primary-hue: 20;
    --primary-saturation: 85%;
    --primary-lightness: 52%;
    --secondary-hue: 20;
    --secondary-saturation: 10%;
    --secondary-lightness: 5%;
    --color-primary: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
    --color-primary-highlight: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 15%));
    --color-primary-glow: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 35%));
    --color-secondary: hsl(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness));
    --color-secondary-highlight: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 30%));
    --color-secondary-glow: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 70%));
    --color-background: #fff;
    --color-surface: #fff;
    --color-border-on-background: #e0e0e0;
    --color-error: #b00020;
    --color-disabled: rgba(0, 0, 0, 0.12);
    --color-shadow: rgba(0, 0, 0, 0.8);
    --color-on-primary: #fff;
    --color-on-secondary: #fff;
    --color-on-error: #fff;
    --color-text-primary: rgba(0, 0, 0, 0.87);
    --color-text-secondary: rgba(0, 0, 0, 0.54);
    --color-text-link: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
    --color-text-hint: rgba(0, 0, 0, 0.38);
    --color-text-disabled: rgba(0, 0, 0, 0.38);
    --color-text-icon: rgba(0, 0, 0, 0.6);

    /* Dark colors in light mode */
    --color-dark-background: #000;
    --color-dark-surface: #121212;
    --color-dark-border-on-background: #333;
    --color-dark-text-primary: rgba(255, 255, 255, 0.92);
    --color-dark-text-secondary: rgba(255, 255, 255, 0.64);

    /* Dark definitions */
    --dark-primary-hue: 20;
    --dark-primary-saturation: 85%;
    --dark-primary-lightness: 55%;
    --dark-secondary-hue: 20;
    --dark-secondary-saturation: 5%;
    --dark-secondary-lightness: 90%;
}

html.dark-mode {
    /* Colors */
    --color-primary: hsl(var(--dark-primary-hue), var(--dark-primary-saturation), var(--dark-primary-lightness));
    --color-primary-highlight: hsl(var(--dark-primary-hue), var(--dark-primary-saturation), calc(var(--dark-primary-lightness) + 12%));
    --color-primary-glow: hsl(var(--dark-primary-hue), var(--dark-primary-saturation), calc(var(--dark-primary-lightness) - 40%));
    --color-secondary: hsl(var(--dark-secondary-hue), var(--dark-secondary-saturation), var(--dark-secondary-lightness));
    --color-secondary-highlight: hsl(var(--dark-secondary-hue), var(--dark-secondary-saturation), calc(var(--dark-secondary-lightness) - 22%));
    --color-secondary-glow: hsl(var(--dark-secondary-hue), var(--dark-secondary-saturation), calc(var(--dark-secondary-lightness) - 65%));
    --color-background: var(--color-dark-background);
    --color-surface: var(--color-dark-surface);
    --color-border-on-background: var(--color-dark-border-on-background);
    --color-error: #e94948;
    --color-disabled: rgba(255, 255, 255, 0.12);
    --color-shadow: 0, 0, 0;
    --color-on-primary: #000;
    --color-on-secondary: #000;
    --color-on-error: #000;
    --color-text-primary: var(--color-dark-text-primary);
    --color-text-secondary: var(--color-dark-text-secondary);
    --color-text-link: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
    --color-text-hint: rgba(255, 255, 255, 0.48);
    --color-text-disabled: rgba(255, 255, 255, 0.48);
    --color-text-icon: rgba(255, 255, 255, 0.52);
}

/*
Setting box sizing like this, allows us to define different
box-sizing settings for specific components
 */
*, *:before, *:after {
    box-sizing: inherit;
}


/* Reset all anchor tags */
a {
    color: inherit;
    text-decoration: none;
}
a:visited {
    color: inherit;
}

/* Reset headings and paragraphs */
h1, h2, h3, h4, h5, h6 {
    margin-top: 1em;
    margin-bottom: 0.5em;
}
p {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

figure {
    margin: 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
}


html {
    /* Fonts */
    --font-family-body: sans-serif;
    --font-family-heading: "Exo 2", sans-serif;
    --font-family-button: "Exo 2", sans-serif;
    --font-family-code: monospace;
    --font-weight-button: 600;
}

body {
    /* Standardize the line height */
    line-height: 1.4;
    font-family: var(--font-family-body);
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

/* Main Content Typography */

.main-content {
    font-family: var(--font-family-body);
    /* Make the font size fluid with the screen */
    font-size: calc(1em + 0.2vw);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
}

.main-content p,
.main-content .typography--body-md,
.typography--body-md {
    font-family: var(--font-family-body);
    font-weight: 400;
    font-size: 1.05em;
    line-height: 1.5;
    letter-spacing: normal;
}
.main-content .typography--body-sm,
.typography--body-sm {
    font-family: var(--font-family-body);
    font-weight: 400;
    font-size: 0.9em;
    line-height: 1.5;
    letter-spacing: normal;
}
.main-content .typography--body-lg,
.typography--body-lg {
    font-family: var(--font-family-body);
    font-weight: 300;
    font-size: 1.25em;
    line-height: 1.5;
    letter-spacing: normal;
}
.main-content h6,
.main-content .typography--h6,
.typography--h6 {
    font-family: var(--font-family-heading);
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
}
.main-content h5,
.main-content .typography--h5,
.typography--h5 {
    font-family: var(--font-family-heading);
    font-size: 1.32em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
}
.main-content h4,
.main-content .typography--h4,
.typography--h4 {
    font-family: var(--font-family-heading);
    font-size: 1.45em;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
}
.main-content h3,
.main-content .typography--h3,
.typography--h3 {
    font-family: var(--font-family-heading);
    font-size: 1.75em;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
}
.main-content h2,
.main-content .typography--h2,
.typography--h2 {
    font-family: var(--font-family-heading);
    font-size: 2em;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: normal;
}
.main-content h1,
.main-content .typography--h1,
.typography--h1 {
    font-family: var(--font-family-heading);
    font-size: 2.5em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
}
.main-content .typography--subtitle1,
.typography--subtitle1 {
    font-family: var(--font-family-heading);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
}
.main-content .typography--subtitle2,
.typography--subtitle2 {
    font-family: var(--font-family-heading);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
}
.main-content .typography--caption,
.typography--caption {
    font-family: var(--font-family-heading);
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
}

.main-content a {
    color: var(--color-text-link);
    text-decoration: underline;
}

.main-content .code {
    font-family: var(--font-family-code);
}

/* Anything larger than small (mobile) */
@media screen and (min-width: 640px) {

    .main-content h5,
    .typography--h5 {
        font-size: 1.36em;
    }
    .main-content h4,
    .typography--h4 {
        font-size: 1.6em;
    }
    .main-content h3,
    .typography--h3 {
        font-size: 1.8em;
    }
    .main-content h2,
    .typography--h2 {
        font-size: 2.2em;
    }
    .main-content h1,
    .typography--h1 {
        font-size: 3em;
    }
    .typography--subtitle1 {
        font-size: 1.5em;
    }
    .typography--subtitle2 {
        font-size: 1.2em;
    }

}


body {
    margin: 0;
    /* Force the page to full height so we can stick the footer to
    the bottom of the viewport */
    min-height: 100vh;
}

/* General purpose utility to set max page width */
.site-width-container {
    max-width: calc(var(--breakpoint-lg) - (var(--site-width-margin) * 2));
    margin-left: var(--site-width-margin);
    margin-right: var(--site-width-margin);
}

.page-section {
    margin-top: 3rem;
    margin-bottom: 2rem;
}

@media screen and (min-width: 1024px) {

    .site-width-container {
        max-width: calc(var(--breakpoint-lg) - 4rem);
        margin-left: auto;
        margin-right: auto;
    }

}

#site-layout {
    /*
    Set up a full height grid to stick the footer to the bottom of the
    viewport. This creates a top row for the header, a middle row for
    main content, and a bottom row for the footer
     */
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.container-row {
    display: flex;
    flex-direction: row;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.container-row--vertical {
    flex-direction: column;
}

.content-column--image > img {
    display: block;
    max-width: 100%;
}
.content-columns__one {
    margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {

    .content-columns {
        display: flex;
    }
    .content-columns__one {
        margin-bottom: 0;
    }
    .content-columns__one,
    .content-columns__two {
        flex-basis: 50%;
        flex-grow: 1;
    }
    .content-columns__two {
        margin-left: 3rem;
    }
    .content-column--image {
        margin-top: 2rem;
    }

}


p > .material-icons,
a > .material-icons {
    vertical-align: middle;
    font-size: 1em;
}

.surface {
    border-radius: 0.25rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-on-background);
    /* Clip the rounded corners of internal content */
    overflow: hidden;
    padding: 1rem;
}
.light-mode .surface--dark {
    background-color: var(--color-dark-surface);
    border-color: var(--color-dark-border-on-background);
    color: var(--color-dark-text-primary);
}

.media-container__image > img {
    display: block;
    width: 100%;
}
@media screen and (min-width: 768px) {

    .media-container {
        display: flex;
    }
    .media-container__image {
        width: 50vw;
        margin-right: 2rem;
    }

}

a.button,
.button {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-family-button);
    font-size: 1rem;
    font-weight: var(--font-weight-button);
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    height: 2.5em;
    border: none;
    border-radius: 0.25rem;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    overflow: hidden;
    vertical-align: middle;
    background: transparent;
    padding: 0 1em 0 1em;
    color: var(--color-primary);
}
.button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
a.button--secondary,
.button--secondary {
    color: var(--color-secondary);
}
a.button--raised,
.button--raised,
a.button--flush,
.button--flush {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    padding: 0 1.2em 0 1.2em;
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
a.button--secondary.button--raised,
a.button--secondary.button--unelevated,
.button--secondary.button--raised,
.button--secondary.button--unelevated {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
}
a.button--raised,
.button--raised {
    box-shadow: 0px 3px 1px -2px rgba(var(--color-shadow), 0.2), 0px 2px 2px 0px rgba(var(--color-shadow), 0.14), 0px 1px 5px 0px rgba(var(--color-shadow), 0.12);
}
a.button--outlined,
.button--outlined {
    border-style: solid;
    border-width: 2px;
    border-color: var(--color-primary);
}
a.button--secondary.button--outlined,
.button--secondary.button--outlined {
    border-color: var(--color-secondary);
}
a.button--raised.button--icon-leading,
a.button--flush.button--icon-leading,
.button--raised.button--icon-leading,
.button--flush.button--icon-leading {
    padding-right: 1em;
    padding-left: 0.75em;
}
a.button--raised.button--icon-trailing,
a.button--unelevated.button--icon-trailing,
.button--raised.button--icon-trailing,
.button--unelevated.button--icon-trailing {
    padding-right: 0.75em;
    padding-left: 1em;
}
a.button--outlined.button--icon-leading,
.button--outlined.button--icon-leading {
    padding-right: 1em;
    padding-left: 0.75em;
}
a.button--outlined.button--icon-trailing,
.button--outlined.button--icon-trailing {
    padding-right: 0.75em;
    padding-left: 1em;
}
.button .button__icon {
    margin-left: 0;
    margin-right: 0.5em;
    display: inline-block;
    position: relative;
    vertical-align: top;
    font-size: 1.125em;
    width: 1.125em;
    height: 1.125em;
}
.button__label + .button__icon {
    margin-left: 0.5em;
    margin-right: 0;
}
.button--raised .button__icon,
.button--flush .button__icon,
.button--unelevated .button__icon,
.button--outlined .button__icon {
    margin-left: -0.25em;
    margin-right: 0.5em;
}
.button--raised .button__label + .button__icon,
.button--flush .button__label + .button__icon,
.button--unelevated .button__label + .button__icon,
.button--outlined .button__label + .button__icon {
    margin-left: 0.5em;
    margin-right: -0.25em;
}
/* focus and hover state */
a.button:focus,
a.button:hover,
.button:focus,
.button:hover {
    cursor: pointer;
    background-color: var(--color-primary-glow);
}
a.button--secondary.button:focus,
a.button--secondary.button:hover,
.button--secondary.button:focus,
.button--secondary.button:hover {
    background-color: var(--color-secondary-glow);
}
a.button--flush:focus,
a.button--flush:hover,
a.button--raised:focus,
a.button--raised:hover,
.button--flush:focus,
.button--flush:hover,
.button--raised:focus,
.button--raised:hover {
    background-color: var(--color-primary-highlight);
}
a.button--secondary.button--flush:focus,
a.button--secondary.button--flush:hover,
a.button--secondary.button--raised:focus,
a.button--secondary.button--raised:hover,
.button--secondary.button--flush:focus,
.button--secondary.button--flush:hover,
.button--secondary.button--raised:focus,
.button--secondary.button--raised:hover {
    background-color: var(--color-secondary-highlight);
}
a.button--raised:focus,
a.button--raised:hover,
.button--raised:focus,
.button--raised:hover {
    box-shadow: 0px 2px 4px -1px rgba(var(--color-shadow), 0.2), 0px 4px 5px 0px rgba(var(--color-shadow), 0.14), 0px 1px 10px 0px rgba(var(--color-shadow), 0.12);
}
/* activated state */
a.button:active,
a.button.button--activated,
.button:active,
.button.button--activated {
    outline: none;
    filter: brightness(1.3);
}
a.button--raised:active,
a.button--raised.button--activated,
.button--raised:active,
.button--raised.button--activated {
    box-shadow: 0px 5px 5px -3px rgba(var(--color-shadow), 0.2), 0px 8px 10px 1px rgba(var(--color-shadow), 0.14), 0px 3px 14px 2px rgba(var(--color-shadow), 0.12);
}
/* disabled state */
a.button:disabled,
.button:disabled {
    cursor: default;
    pointer-events: none;
    color: var(--color-text-disabled);
}
a.button--raised:disabled,
a.button--flush:disabled,
.button--raised:disabled,
.button--flush:disabled {
    background-color: var(--color-disabled);
    color: var(--color-text-disabled);
}
a.button--raised:disabled,
.button--raised:disabled {
    box-shadow: 0px 0px 0px 0px rgba(var(--color-shadow), 0.2), 0px 0px 0px 0px rgba(var(--color-shadow), 0.14), 0px 0px 0px 0px rgba(var(--color-shadow), 0.12);
}
a.button--outlined:disabled,
.button--outlined:disabled {
    border-color: var(--color-text-disabled);
}


body {
    background-color: var(--color-dark-background);
}
.page-body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    /* Extra padding on the bottom to make room for the torn paper effect on the footer */
    padding-bottom: 6rem;
}

.nav-link {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-family-button);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.0892857143em;
    text-transform: uppercase;
    display: block;
}

.youtube-video > iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.formatted-table-wrapper {
    width: calc(98vw - calc(var(--site-width-margin) * 2));
    overflow-x: scroll;
}
table.formatted-table {
    border-collapse: collapse;
    border-top: 1px solid var(--color-border-on-background);
    border-left: 1px solid var(--color-border-on-background);
    table-layout: fixed;
}
table.formatted-table thead tr {
    background-color: var(--color-dark-surface);
    color: var(--color-dark-text-primary);
}
table.formatted-table th,
table.formatted-table td {
    padding: 0.5em;
    border-bottom: 1px solid var(--color-border-on-background);
    border-right: 1px solid var(--color-border-on-background);
}
table.formatted-table thead th:first-child {
    width: 3em;
}
table.formatted-table tbody td:first-child {
    /* Special case for the player number */
    text-align: right;
}
table.formatted-table th.formatted-table__highlighted-col {
    background-color: var(--color-primary-highlight);
}
table.formatted-table td.formatted-table__highlighted-col {
    background-color: var(--color-primary-glow);
}
/* LG Breakpoint */
@media screen and (min-width: 1024px) {

    .formatted-table-wrapper {
        width: auto;
        overflow-x: auto;
    }

}


header.site-header {
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
    /* Allow the shadow to show above elements below */
    position: relative;
    z-index: 1;
    background-color: var(--color-dark-background);
    color: var(--color-dark-text-primary);
}
.site-header__container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.site-header__brand {
    display: flex;
}
.site-header__brand-image {
    width: 96px;
}
.site-header__brand-image > img {
    display: block;
    width: 100%;
}
h1.site-header__brand-text {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1;
    margin-left: 1rem;
    font-family: var(--font-family-heading);
}
.site-header__brand-text > .site-header__brand-text__1 {
    display: block;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.07em;
    padding-left: 0.4rem;
}
.site-header__brand-text > .site-header__brand-text__2 {
    display: block;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 700;
    font-size: 2.75rem;
    letter-spacing: 0.04em;
}
.site-header__brand-text > .site-header__brand-text__3 {
    display: block;
    transform: skew(-10deg);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.5rem;
    background-color: var(--color-primary);
    margin-top: 0.25rem;
    padding: 0.1rem 0.5rem 0.1rem 0.5rem;
    letter-spacing: 0.08em;
}
.site-header__nav > ul {
    list-style-type: none;
    padding: 0;
    margin: 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.site-header__nav > ul > li {
    margin-top: 0.5rem;
    width: 100%;
    border-bottom: 1px solid var(--color-dark-border-on-background);
}
.site-header__nav > ul > li:first-child {
    margin-top: 0;
}
.site-header__nav > ul > li > a {
    padding: 0.5rem 0;
}
.site-header__nav > ul > li > a:hover,
.site-footer__nav > ul > li > a:hover {
    color: hsl(25, 85%, 55%);
}
/* SM Breakpoint */
@media screen and (min-width: 640px) {
    /* The site header can lay out horizontally on screens larger than 640px */
    .site-header__nav > ul {
        flex-direction: row;
        justify-content: flex-start;
    }
    .site-header__nav > ul > li {
        margin-top: 0;
        margin-left: 2rem;
        border-bottom: none;
        width: auto;
    }
    .site-header__nav > ul > li:first-child {
        margin-left: 0;
    }
}
/* MD Breakpoint */
@media screen and (min-width: 768px) {
    .site-header__nav > ul > li {
        margin-left: 3rem;
    }
}
/* LG Breakpoint */
@media screen and (min-width: 1024px) {
    .site-header__container {
        display: flex;
        justify-content: space-between;
        padding-bottom: 1rem;
    }
    .site-header__nav {
        border-top: none;
    }
    .site-header__nav > ul {
        justify-content: flex-end;
    }
    .site-header__nav > ul > li {
        margin-left: 2rem;
    }
}

footer.site-footer {
    background-color: var(--color-dark-background);
    color: var(--color-dark-text-primary);
    position: relative;
}
.site-footer__container {
    padding-top: 1rem;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.site-footer__container::before {
    content: '';
    display: block;
    height: 30px;
    width: 100%;
    background-image: url(/images/papier-top.svg);
    background-repeat: repeat-x;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -30px;
}
.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}
a.site-footer__brand-image {
    display: block;
    width: 36vw;
    max-width: 150px;
}
.site-footer__brand-image > img {
    display: block;
    width: 100%;
}
.site-footer__snippet {
    text-align: center;
    max-width: 70vw;
}
.site-footer__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60vw;
    max-width: 30rem;
}
.site-footer__nav > ul {
    list-style-type: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.site-footer__nav > ul > li {
    text-align: center;
    margin-top: 2rem;
}
address.footer-rink-address {
    margin-top: 2rem;
    font-style: normal;
    text-align: center;
}
address.footer-rink-address > h4 {
    text-transform: uppercase;
    font-weight: 400;
}
a.footer-rink-address__rink {
    display: block;
    color: var(--color-dark-text-primary);
}
.footer-rink-address__map-link > .button {
    color: hsl(var(--dark-primary-hue), var(--dark-primary-saturation), var(--dark-primary-lightness));
}
.footer-rink-address__map-link > .button--outlined {
    border-color: hsl(var(--dark-primary-hue), var(--dark-primary-saturation), var(--dark-primary-lightness));
}
.footer-rink-address__map-link > .button--outlined:focus,
.footer-rink-address__map-link > .button--outlined:hover {
    background-color: hsl(var(--dark-primary-hue), var(--dark-primary-saturation), calc(var(--dark-primary-lightness) - 40%));
}
/* SM Breakpoint */
@media screen and (min-width: 640px) {
    a.site-footer__brand-image {
        width: 25vw;
    }
    .site-footer__nav > ul {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .site-footer__nav > ul > li {
        margin-left: 3rem;
    }
    .site-footer__nav > ul > li:first-child {
        margin-left: 0;
    }
}
/* MD Breakpoint */
@media screen and (min-width: 768px) {
    .site-footer__brand {
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }
    a.site-footer__brand-image {
        width: 20vw;
    }
    .site-footer__snippet {
        margin-left: 2vw;
        text-align: left;
        max-width: 42vw;
    }
}

.home-hero {
    height: 280px;
    position: relative;
    /* Prevent overflow scroll when we position an element slightly outside */
    overflow: hidden;
}
.home-hero > img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 640px) {

    .home-hero {
        height: 350px;
    }

}
@media screen and (min-width: 768px) {

    .home-hero {
        height: 450px;
    }

}
@media screen and (min-width: 1024px) {

    .home-hero {
        height: 580px;
    }

}
@media screen and (min-width: 1280px) {

    .home-hero {
        height: 700px;
    }

}

.home-info {
    background-color: var(--color-dark-background);
    color: var(--color-dark-text-primary);
    position: relative;
    /* Extra margin on the bottom to make room for the torn paper effect */
    margin-bottom: 4rem;
}
.home-info::before {
    content: '';
    display: block;
    height: 30px;
    width: 100%;
    background-image: url(/images/papier-top.svg);
    background-repeat: repeat-x;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -30px;
}
.home-info::after {
    content: '';
    display: block;
    height: 36px;
    width: 100%;
    background-image: url(/images/papier-bottom.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -30px;
}
.home-info__content {
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home-info__logo {
    width: 25vw;
    flex: none;
}
.home-info__logo > img {
    display: block;
    width: 100%;
}
.home-info__text {
    font-size: 1.2em;
    text-align: center;
    width: 70vw;
}
@media screen and (min-width: 640px) {

    .home-info__content {
        /* Position relative so we can float the logo with
           absolute positioning */
        position: relative;
        flex-direction: row;
        align-items: flex-start;
        padding-bottom: 0;
    }
    .home-info__logo {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 4vw;
        width: 170px;
    }
    .home-info__text {
        /* Margin needs to match the logo width */
        margin-left: calc(4vw + 170px + 4vw);
        text-align: left;
        width: auto;
        max-width: 36rem;
    }

}

.branded-header {
    background-color: var(--color-dark-background);
    color: var(--color-dark-text-primary);
    position: relative;
    /* Extra margin on the bottom to make room for the torn paper effect */
    margin-bottom: 4rem;
}
.branded-header::before {
    content: '';
    display: block;
    height: 30px;
    width: 100%;
    background-image: url(/images/papier-top.svg);
    background-repeat: repeat-x;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -30px;
}
.branded-header::after {
    content: '';
    display: block;
    height: 36px;
    width: 100%;
    background-image: url(/images/papier-bottom.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -30px;
}
.branded-header__content {
    padding-top: 2rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.branded-header__logo {
    width: 32vw;
    flex: none;
}
.branded-header__logo > img {
    display: block;
    width: 100%;
}
.branded-header__text {
    text-align: center;
    width: 70vw;
}
.branded-header__subtitle {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}
.branded-header__header {
    margin-top: 0;
}
@media screen and (min-width: 640px) {

    .branded-header__content {
        /* Position relative so we can float the logo with
           absolute positioning */
        position: relative;
        flex-direction: row;
        align-items: flex-start;
        padding-top: 0;
        padding-bottom: 0;
    }
    .branded-header__logo {
        position: absolute;
        z-index: 2;
        top: 1rem;
        left: 4vw;
        width: 170px;
    }
    .branded-header__text {
        /* Margin needs to match the logo width */
        margin-left: calc(4vw + 170px + 4vw);
        text-align: left;
        width: auto;
        max-width: 36rem;
    }

}


/* Extra vertical whitespace below the home hero */
.leagues--home {
    margin-top: 6rem;
}
.leagues__row {
    display: flex;
    justify-content: space-evenly;
    margin-top: 3vw;
}
a.leagues__item {
    display: block;
    width: 30vw;
}
.leagues__item > img {
    width: 100%;
    display: block;
}
.leagues__info {
    text-align: center;
}
@media screen and (min-width: 640px) {

    a.leagues__item {
        width: 25vw;
    }

}
@media screen and (min-width: 768px) {

    a.leagues__item {
        max-width: 250px;
    }

}
@media screen and (min-width: 1024px) {

    .leagues {
        display: flex;
        justify-content: center;
    }
    .leagues__row {
        justify-content: flex-start;
        margin-top: 0;
    }
    a.leagues__item {
        width: 15vw;
        max-width: 180px;
    }

}

.home-updates__post {
    margin-bottom: 4rem;
}

address.home-page-rink-address {
    padding: 1rem;
    font-style: normal;
}
a.home-page-rink-address__rink {
    display: block;
    height: 20vw;
}
a.home-page-rink-address__rink > img {
    display: block;
    height: 100%;
}
.home-page-rink-address__map-link {
    margin-bottom: 0;
}
/* Very SM Breakpoint */
@media screen and (min-width: 580px) {
    address.home-page-rink-address {
        display: flex;
        flex-wrap: wrap;
    }
    a.home-page-rink-address__rink {
        display: block;
        height: 16vw;
        max-height: 100px;
    }
    .home-page-rink-address__address {
        margin-left: 2rem;
    }
    .home-page-rink-address__map-link {
        margin-top: 2rem;
        margin-left: 2rem;
    }
}

.teams-categories-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.teams-categories-container .category {
    margin-top: 3rem;
    padding: 1rem;
    width: 100%;
}
.teams-categories-container .category h3 {
    margin-top: 0;
}
@media screen and (min-width: 768px) {

    .teams-categories-container .category {
        margin-top: 3rem;
        padding: 1rem;
        width: 48%;
    }

}

nav.team-page-nav {
    margin-top: 2rem;
}
nav.team-page-nav > ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
nav.team-page-nav > ul > li {
    margin-top: 2rem;
    width: 80%;
}
nav.team-page-nav > ul > li:first-child {
    margin-top: 0;
}
nav.team-page-nav > ul > li > a {
    width: 100%;
}
@media screen and (min-width: 768px) {

    nav.team-page-nav > ul {
        flex-direction: row;
    }
    nav.team-page-nav > ul > li {
        margin-top: 0;
        margin-right: 1rem;
        width: auto;
    }

}

ul.game-results-list,
ul.game-schedule-list {
    list-style-type: none;
    padding: 0;
}
ul.game-results-list > li,
ul.game-schedule-list > li {
    margin-top: 2rem;
    padding-bottom: 0.5rem;
}

.schedule-event.surface {
    padding: 0;
}
.schedule-event__header {
    margin: 0;
    background-color: var(--color-dark-surface);
    color: var(--color-dark-text-primary);
    padding-left: 1rem;
    padding-right: 1rem;
}
.schedule-event__header > h6 {
    margin-top: 0;
    padding-top: 0.25rem;
    margin-bottom: 0;
}
.schedule-event__header > p.schedule-event__time,
.schedule-event__header > p.schedule-event__result {
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0.25em;
}
.schedule-event__result {
    color: hsl(var(--dark-primary-hue), var(--dark-primary-saturation), var(--dark-primary-lightness));
    font-weight: 700;
}
.schedule-event__body {
    padding: 0 1rem;
}
.schedule-event__title {
    margin-top: 0.5em;
}
address.schedule-event__location {
    font-style: normal;
}
address.schedule-event__location > p {
    margin: 0;
}

.tryout-teams .surface {
    padding: 1rem;
}
.tryout-teams .surface h3 {
    margin-top: 0;
}
.tryout-teams .surface ul {
    margin-bottom: 0;
}

.posts-container {
    position: relative;
    background-color: var(--color-dark-background);
    color: var(--color-dark-text-primary);
    padding: 1rem 0;
    margin-top: 4rem;
    margin-bottom: 3rem;
}
.posts-container::before {
    content: '';
    display: block;
    height: 30px;
    width: 100%;
    background-image: url(/images/papier-top.svg);
    background-repeat: repeat-x;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -30px;
}
.posts-container::after {
    content: '';
    display: block;
    height: 36px;
    width: 100%;
    background-image: url(/images/papier-bottom.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -30px;
}

.player-profile__photo {
    width: 120px;
}
.player-profile__photo > img {
    display: block;
    width: 100%;
}
.player-profile__details-row > p{
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}
.player-profile__details-definition {
    display: inline-block;
    min-width: 6em;
}
@media screen and (min-width: 768px) {

    .player-profile {
        display: flex;
    }
    .player-profile__photo + .player-profile__details {
        margin-left: 4rem;
    }
    .player-profile__details h3 {
        margin-top: 0;
    }

}

@media screen and (min-width: 1024px) {

    .player-profile__details-row {
        display: flex;
    }
    .player-profile__details-row > p{
        min-width: 12em;
    }

}



.mt-1 {
    margin-top: 0.5rem;
}
.mb-0 {
    margin-bottom: 0;
}