@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v47-all-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/roboto-v47-all-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/roboto-v47-all-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/noto-serif-v33-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    font-family: 'Noto Serif';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/noto-serif-v33-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/noto-serif-v33-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


html {
    --color-primary: rgb(65 95 145);
    --color-surface-tint: rgb(65 95 145);
    --color-on-primary: rgb(255 255 255);
    --color-primary-container: rgb(214 227 255);
    --color-on-primary-container: rgb(40 71 119);
    --color-secondary: rgb(86 95 113);
    --color-on-secondary: rgb(255 255 255);
    --color-secondary-container: rgb(218 226 249);
    --color-on-secondary-container: rgb(62 71 89);
    --color-tertiary: rgb(112 85 117);
    --color-on-tertiary: rgb(255 255 255);
    --color-tertiary-container: rgb(250 216 253);
    --color-on-tertiary-container: rgb(87 62 92);
    --color-error: rgb(186 26 26);
    --color-on-error: rgb(255 255 255);
    --color-error-container: rgb(255 218 214);
    --color-on-error-container: rgb(147 0 10);
    --color-background: rgb(249 249 255);
    --color-on-background: rgb(25 28 32);
    --color-surface: rgb(249 249 255);
    --color-on-surface: rgb(25 28 32);
    --color-surface-variant: rgb(224 226 236);
    --color-on-surface-variant: rgb(68 71 78);
    --color-outline: rgb(116 119 127);
    /*--color-outline-variant: rgb(196 198 208);*/
    --color-shadow: rgb(0 0 0);
    --color-scrim: rgb(0 0 0);
    --color-inverse-surface: rgb(46 48 54);
    --color-inverse-on-surface: rgb(240 240 247);
    --color-inverse-primary: rgb(170 199 255);
    --color-primary-fixed: rgb(214 227 255);
    --color-on-primary-fixed: rgb(0 27 62);
    --color-primary-fixed-dim: rgb(170 199 255);
    --color-on-primary-fixed-variant: rgb(40 71 119);
    --color-secondary-fixed: rgb(218 226 249);
    --color-on-secondary-fixed: rgb(19 28 43);
    --color-secondary-fixed-dim: rgb(190 198 220);
    --color-on-secondary-fixed-variant: rgb(62 71 89);
    --color-tertiary-fixed: rgb(250 216 253);
    --color-on-tertiary-fixed: rgb(40 19 46);
    --color-tertiary-fixed-dim: rgb(221 188 224);
    --color-on-tertiary-fixed-variant: rgb(87 62 92);
    --color-surface-dim: rgb(217 217 224);
    --color-surface-bright: rgb(249 249 255);
    --color-surface-container-lowest: rgb(255 255 255);
    --color-surface-container-low: rgb(243 243 250);
    --color-surface-container: rgb(237 237 244);
    --color-surface-container-high: rgb(231 232 238);
    --color-surface-container-highest: rgb(226 226 233);
    --color-positive-color: rgb(57 105 60);
    --color-positive-on-color: rgb(255 255 255);
    --color-positive-color-container: rgb(186 240 183);
    --color-positive-on-color-container: rgb(32 80 38);

    /* Modified colors */
    --color-on-surface: rgb(0 0 0 / 87%);
    --color-on-surface-variant: rgb(0 0 0 / 60%);
    --color-outline-variant: rgb(0 0 0 / 12%);

    /* New colors */
    --color-surface-sepia: rgb(228 226 212);
    --color-on-surface-sepia: rgb(37 34 34);

    --color-gold: rgb(254 191 73 / 60%);
    --color-silver: rgb(158 158 158 / 60%);
    --color-bronze: rgb(254 100 73 / 60%);
}

@media (prefers-color-scheme: dark) {
    html {
        --color-primary: rgb(170 199 255);
        --color-surface-tint: rgb(170 199 255);
        --color-on-primary: rgb(10 48 95);
        --color-primary-container: rgb(40 71 119);
        --color-on-primary-container: rgb(214 227 255);
        --color-secondary: rgb(190 198 220);
        --color-on-secondary: rgb(40 49 65);
        --color-secondary-container: rgb(62 71 89);
        --color-on-secondary-container: rgb(218 226 249);
        --color-tertiary: rgb(221 188 224);
        --color-on-tertiary: rgb(63 40 68);
        --color-tertiary-container: rgb(87 62 92);
        --color-on-tertiary-container: rgb(250 216 253);
        --color-error: rgb(255 180 171);
        --color-on-error: rgb(105 0 5);
        --color-error-container: rgb(147 0 10);
        --color-on-error-container: rgb(255 218 214);
        --color-background: rgb(17 19 24);
        --color-on-background: rgb(226 226 233);
        --color-surface: rgb(17 19 24);
        /*--color-on-surface: rgb(226 226 233);*/
        --color-surface-variant: rgb(68 71 78);
        /*--color-on-surface-variant: rgb(196 198 208);*/
        --color-outline: rgb(142 144 153);
        /*--color-outline-variant: rgb(68 71 78);*/
        --color-shadow: rgb(0 0 0);
        --color-scrim: rgb(0 0 0);
        --color-inverse-surface: rgb(226 226 233);
        --color-inverse-on-surface: rgb(46 48 54);
        --color-inverse-primary: rgb(65 95 145);
        --color-primary-fixed: rgb(214 227 255);
        --color-on-primary-fixed: rgb(0 27 62);
        --color-primary-fixed-dim: rgb(170 199 255);
        --color-on-primary-fixed-variant: rgb(40 71 119);
        --color-secondary-fixed: rgb(218 226 249);
        --color-on-secondary-fixed: rgb(19 28 43);
        --color-secondary-fixed-dim: rgb(190 198 220);
        --color-on-secondary-fixed-variant: rgb(62 71 89);
        --color-tertiary-fixed: rgb(250 216 253);
        --color-on-tertiary-fixed: rgb(40 19 46);
        --color-tertiary-fixed-dim: rgb(221 188 224);
        --color-on-tertiary-fixed-variant: rgb(87 62 92);
        --color-surface-dim: rgb(17 19 24);
        --color-surface-bright: rgb(55 57 62);
        --color-surface-container-lowest: rgb(12 14 19);
        --color-surface-container-low: rgb(25 28 32);
        --color-surface-container: rgb(29 32 36);
        --color-surface-container-high: rgb(40 42 47);
        --color-surface-container-highest: rgb(51 53 58);
        --color-positive-color: rgb(158 212 156);
        --color-positive-on-color: rgb(5 57 17);
        --color-positive-color-container: rgb(32 80 38);
        --color-positive-on-color-container: rgb(186 240 183);

        /* Modified colors */
        --color-on-surface: rgb(255 255 255 / 87%);
        --color-on-surface-variant: rgb(255 255 255 / 60%);
        --color-outline-variant: rgb(255 255 255 / 16%);

        /* New colors */
        --color-surface-sepia: rgb(228 226 212);
        --color-on-surface-sepia: rgb(37 34 34);

        --color-gold: rgb(254 191 73 / 60%);
        --color-silver: rgb(158 158 158 / 70%);
        --color-bronze: rgb(254 100 73 / 55%);
    }
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5em;
    color: var(--color-on-surface);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* Main Page */

.page-header {
    top: 0;
    position: sticky;
    background: var(--color-primary-container);

    width: 100%;
    max-width: 50em;
    display: grid;
    align-items: center;
    grid-template-columns: min-content auto;
    padding: 0.5em 0em;
}

.content {
    display: grid;
    background: var(--color-surface);
    /*padding: 1em;*/
    border-radius: 1em;
}

.historic-document {
    display: grid;
    background: var(--color-surface);
    padding: 1em;
    border-radius: 1em;
}

.historic-text {
    columns: 2;
    column-gap: 2em;
    margin-top: 1.5em;
}

.historic-text p {
    hyphens: auto;
}

.historic-text > p + p {
    text-indent: 2em;
}

.historic-document * {
    font-family: 'Noto Serif';
}

.historic-document + .historic-document {
    margin-top: 1em;
}

.historic-img-group {
    margin-bottom: 1em;
}

.historic-img-group > p {
    font-size: 0.875em;
}

.historic-text > .historic-source {
    font-family: 'Roboto';
    text-indent: 0;
    margin-top: 0.5em;
    font-size: 0.875em;
    color: var(--color-on-surface-variant);
}


.content-text {
    padding: 2em 2em 1em 2em;
}

.first-sentence {
    font-weight: 500;
}

.content-text > p {
    hyphens: auto;
}

.content-text > p + p {
    margin-top: 0.5em;
}

.hero {
    border-radius: 1em 1em 0em 0em;
}

.hero-bottom {
    border-radius: 0em 0em 1em 1em;
}

.hero-link-disabled {
    white-space: nowrap;
    align-self: center;
    justify-self: end;
    padding: 0.5em 1em;
    margin: 1em;
    border: 1px solid var(--color-outline);
    color: var(--color-on-surface-variant);
    border-radius: 0.25em;
}

.hero-link {
    white-space: nowrap;
    text-decoration: none;
    align-self: center;
    justify-self: end;
    padding: 0.5em 0.75em 0.5em 1em;
    margin: 1em;
    background: var(--color-primary);
    color: var(--color-on-primary);
    fill: var(--color-on-primary);

    /*color: var(--color-on-primary-container);
    border: 1px solid var(--color-on-primary-container);*/
    border-radius: 0.25em;
    transition: background 0.15s, color 0.15s, border-radius 0.15s;
}

.hero-link > .icon {
    fill: inherit;
    transition: fill 0.15s;
    margin-left: 0.75em;
}

.hero-link:hover {
    border-radius: 2em;
}

#your-board {
    font-weight: 500;
    margin-top: 1em;
}

#board {
    list-style-type: none;
    margin-bottom: 1em;
}

.board-role {
    font-style: italic;
    color: var(--color-on-surface-variant);
    padding-left: 0.5em;
}

img {
    width: 100%;
}

.img-gallery {
    display: block;
}

.img-date {
    display: grid;
    grid-template-columns: auto min-content;
    grid-template-rows: auto auto;
}

.img-date > img {
    grid-column: 1/-1;
    grid-row: 1/-1;
}

.img-date > p {
    grid-column: 2;
    grid-row: 2;
    background: var(--color-surface);
    color: var(--color-on-surface);
    font-size: 1em;
    font-weight: 500;
    padding: 0em 0.5em;
    border-radius: 0.25em;
    margin: 1em;
}

#gallery-title-group {
    display: grid;
    grid-template-columns: min-content auto;
    margin: 1em 1em;
}

#gallery-title-group > h1 {
    position: relative;
    top: 0em;
}

.gallery-nav {
    display: flex;
    flex-flow: row wrap;
    list-style-type: none;
}

.gallery-nav.top-nav {
    margin-left: 1em;
    justify-self: flex-end;
}

.gallery-nav.bottom-nav {
    padding: 0.875em;
}

.page-link {
    display: block;
    border-radius: 0.25em;
    padding: 0.5em 1em;

    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    transition: color 0.15s, background 0.15s, border-radius 0.15s;
}

/* Is there a more efficient selector? */
.gallery-nav .page-link.current-page {
    border-radius: 1.5em;
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.gallery-nav > li {
    margin: 0.125em;
}

/* Is there a more efficient selector? */
.gallery-nav > li:first-child > a {
    border-radius: 1.5em 0.25em 0.25em 1.5em;
}

.gallery-nav > li:last-child > a {
    border-radius: 0.25em 1.5em 1.5em 0.25em;
}

.gallery-nav > li > .page-link-disabled {
    display: block;
    padding: 0.5em 1em;
    border-radius: 0.25em 1.5em 1.5em 0.25em;
    border: 1px solid var(--color-outline);
    color: var(--color-on-surface-variant);
}

/* Using page-link:hover causes flickering */
.gallery-nav > li:hover > a {
    border-radius: 1.5em;

    background: var(--color-primary);
    color: var(--color-on-primary);
}

@media (max-width: 50em) {
    .content, .historic-document {
        border-radius: 0;
        border-bottom: 1px solid var(--color-outline-variant);
    }

    .page-header {
        border-bottom: 1px solid var(--color-outline-variant);
    }

    .hero, .hero-bottom {
        border-radius: 0;
    }

    .content-text {
        padding: 1em 1em 0em 1em;
    }
}

@media (max-width: 40em) {
    #gallery-title-group {
        grid-template-columns: 1fr;
    }

    .gallery-nav.top-nav {
        margin-top: 0.5em;
        margin-left: 0em;
        justify-self: flex-start;
    }

    .img-date > p {
        font-size: 0.875em;
    }

    .historic-text {
        columns: 1;
        column-gap: 0em;
    }
}

/* --------- */

body {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    background: var(--color-primary-container);
}

/*Title*/

header {
    width: 100%;
    max-width: 50em;
    display: grid;
    align-items: center;
    grid-template-columns: min-content auto;
    padding: 0.5em 0em;
}

footer {
    display: grid;
    justify-items: center;
    margin: 3em 0em;
}

footer p {
    font-size: 0.875em;
    color: var(--color-on-primary-container);
    padding: 0.25em;
}

footer a {
    color: inherit;
}

.waspo {
    font-weight: 500;
    color: inherit;
}

.page-icon {
    width: 1.5em;
    height: 1.5em;
    margin: 1em;
    fill: var(--color-on-primary-container);
}

.page-icon-link {
    padding: 0;
    margin: 0;
}

.page-title {
    color: var(--color-on-primary-container);
    font-size: 1.25em;
    font-weight: 500;
}

.seventy-five-years {
    color: var(--color-on-primary-container);
    font-weight: 400;
}

#title-group {
    display: grid;
    grid-template-columns: auto min-content;
    padding: 1em 1em;
}

#switch-gender {
    align-self: flex-start;
    margin: 0em 0em;
}

h1 {
    font-size: 1.75em;
    font-weight: 500;
    position: relative;
    top: -0.04em; /* TODO: Proper alignment in best lists */
}

h2 {
    font-size: 1.75em;
    font-weight: 500;
    line-height: 1.25em;
    padding-bottom: 0.25em;
}

hgroup > p {
    font-weight: 500;
}

#time-span {
    color: var(--color-on-surface-variant);
    font-weight: 500;
}

#women.selected {
    border-radius: 1.5em 1.5em 1.5em 1.5em;

    background: var(--color-primary);
    color: var(--color-on-primary);
}

.icon {
    width: 1.5em;
    height: 1.5em;
    /*vertical-align: -26%;*/
    fill: var(--color-on-surface);
    vertical-align: -25%;
}

#overview {
    padding-bottom: 0.75em;

    border-radius: 1em;
    background: var(--color-surface);
}

.bests-shortlinks {
    width: 100%;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: min-content auto;
    border-bottom: 1px solid var(--color-outline-variant);
    padding: 0.375em 0em;
}

#overview > .bests-shortlinks:last-child {
    border-bottom: none;
}

.stroke {
    font-weight: 500;
    white-space: nowrap;
    display: block;
    height: auto;
    margin-left: 1em;
    margin-top: 0.6em;
}

.distances {
    display: flex;
    flex-flow: row wrap;
    list-style-type: none;
    margin-right: 1em;
}

.distances > li {
    margin: 0.125em 0.125em;
}

.distances > li:first-child > a {
    border-radius: 1.5em 0.25em 0.25em 1.5em;
}

.distances > li:last-child > a {
    border-radius: 0.25em 1.5em 1.5em 0.25em;
}

.distances > li:hover > a {
    border-radius: 1.5em 1.5em 1.5em 1.5em;

    background: var(--color-primary);
    color: var(--color-on-primary);
}

.bests-shortlinks a {
    display: block;
    border-radius: 0.25em;

    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    padding: 0.5em 1em;
    transition: color 0.15s, background 0.15s, border-radius 0.15s;
}

.bests-header {
    display: grid;
    grid-template-columns: auto min-content;
    top: 0;
    position: sticky;
    background: var(--color-primary-container);
}

.club-bests-title {
    font-weight: 500;
    font-size: 1.25em;
    padding: 1em 1em;
    color: var(--color-on-primary-container);
}

.back-link {
    white-space: nowrap;
    text-decoration: none;
    align-self: center;
    justify-self: end;
    padding: 0.5em 0.75em 0.5em 1em;
    margin-right: 1em;
    color: var(--color-on-primary-container);
    fill: var(--color-on-primary-container);
    border: 1px solid var(--color-on-primary-container);
    border-radius: 2em;
    transition: background 0.15s, color 0.15s, border-radius 0.15s;
}

.back-link:hover {
    color: var(--color-on-primary);
    fill: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: 0.25em;
}

.back-link > .icon {
    fill: inherit;
    transition: fill 0.15s;
    margin-left: 0.75em;
}

.table {
    grid-template-columns: min-content auto min-content auto;
    display: grid;
    column-gap: 1em;
    background: var(--color-surface);
    /*padding: 0.5em 0em;*/
    border-radius: 1em;
}

.row {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;

    padding: 0.25em 1em;
    border-bottom: 1px solid var(--color-outline-variant);
}

.row:hover {
    background: var(--color-tertiary-container);
}



.table > .row:first-child {
    padding-top: 0.5em;
    border-radius: 1em 1em 0em 0em;
}

.table > .row:last-child {
    padding-bottom: 0.5em;
    border-bottom: none;
    border-radius: 0em 0em 1em 1em;
}

.row.first {
    background: linear-gradient(90deg, var(--color-gold), #FFFFFF00, #FFFFFF00);
}

.row.first:hover {
    background: var(--color-gold);
}

.row.first:hover .chip {
    background: var(--color-surface);
}

.row.second {
    background: linear-gradient(90deg, var(--color-silver), #FFFFFF00, #FFFFFF00);
}

.row.second:hover {
    background: var(--color-silver);
}

.row.second:hover .chip {
    background: var(--color-surface);
}

.row.third {
    background: linear-gradient(90deg, var(--color-bronze),  #FFFFFF00,  #FFFFFF00);
}

.row.third:hover {
    background: var(--color-bronze);
}

.row.third:hover .chip {
    background: var(--color-surface);
}

.chip {
    display: inline-flex;
    /*align-items: center;*/
    vertical-align: -25%;
    font-size: 0.875em;
    font-weight: 500;
    width: min-content;
    /* height: 1.5em; */
    z-index: 0;
    white-space: nowrap;
    border-radius: 0.5em;
    padding-right: 0.5em;

    background-color: var(--color-tertiary-container);
    color: var(--color-on-tertiary-container);
    fill: var(--color-on-tertiary-container);
}

.chip > svg {
    width: 1.125em;
    height: 1.125em;
    padding: 0.1875em;
}

/* Nth place */
.p {
    white-space: nowrap;
    justify-self: end;
}

/* Swim time */
.t {
    white-space: nowrap;
    justify-self: end;
    font-weight: 500;
}

/* Swimmer name */
.n {

}

/* Swimmer year */
.y {
    color: var(--color-on-surface-variant);
}

.c {
    /*justify-self: end;
    grid-column: 2/-1;*/
}

.old {
    background: var(--color-surface-sepia);
}

.old > * {
    color: var(--color-on-surface-sepia);
    font-family: 'Roboto Serif';
}

.old h2 {
    font-family: 'Roboto Serif';
    font-weight: 500;
}

.old .date {
    font-family: 'Roboto Serif';
    font-weight: 500;
}

main {
    max-width: 50em;
    width: 100%;
}

@media (max-width: 50em) {
    .table, #overview {
        border-radius: 0;
        border-bottom: 1px solid var(--color-outline-variant);
    }

    .table > .row:first-child {
        border-radius: 0em 0em 0em 0em;
    }

    .table > .row:last-child {
        border-radius: 0em 0em 0em 0em;
    }

    header, .bests-header {
        border-bottom: 1px solid var(--color-outline-variant);
    }
}

@media (max-width: 40em) {
    #title-group {
        grid-template-columns: 1fr;
    }

    #switch-gender {
        margin: 0.5em 0em 0em 0em;
    }

    .table {
        grid-template-columns: min-content auto min-content;
        border-radius: 0;
    }

    .c {
        justify-self: end;
        grid-column: 2/-1;
    }
}