/* general page settings */

header {
    margin: 10px 0px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    max-width: var( --section-max-width );
}

#header-title {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    gap: 0px;
    max-width: var( --section-max-width );
}

#header-title-description {
    max-width: 700px;
    max-height: 140px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    flex: 10 1 auto;
    justify-items: end;
    align-items: center;
}

#header-title-description-email {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    text-align: end;
    max-height: 25px;
    align-self: start;
}

#header-title-description-social {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-content: flex-end;
    gap: 0px 5px;
    max-width: 700px;
    max-height: 70px;
}

#header-title-description-info {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    text-align: end;
    max-height: 35px;
    align-self: end;
}

#header-site-navigation {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    font-size: x-large;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

#header-featured-image {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    max-width: 990px;
    max-height: 335px;
    margin: var( --border-width ) var( --border-width ) var( --border-width ) var( --border-width );
}

.splash {
    cursor: pointer;
    position: fixed;
    top: 50%;
    left: 50%;
    height: *;
    width: *;
    transform: translate( -50%, -50% );
    background-color: var( --background-color );
    transition: all ease-in-out 600ms;
    padding: 5px;
}

.hidden {
    transition: 0.5s;
    display: none;
}

.splash-header {
    height: 100%;
    color: var( --text-color );
/*    font-family: consolas;*/
    font-size: x-large;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#schedule {
    margin: 10px 0px;
}

.schedule-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    min-width: var( --section-min-width );
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
}

.schedule-table-date {
    width: 10%;
    max-width: 10%;
}

.schedule-table-time {
    width: 10%;
    max-width: 10%;
}

.schedule-table-field {
    width: 18%;
    max-width: 18%;
}

.schedule-table-city {
    width: 17%;
    max-width: 17%;
}

.schedule-table-away {
    width: 10%;
    max-width: 10%;
}

.schedule-table-home {
    width: 10%;
    max-width: 10%;
}

.schedule-table-officials {
    width: 15%;
    max-width: 15%;
}

.schedule-table-result {
    width: 10%;
    max-width: 10%;
}

.schedule-table-break {
    width: 100%;
    max-width: 100%
    table-layout: fixed;
    min-width: var( --section-min-width );
    margin: 5px 0px;
}

.schedule-revision {
    text-decoration: line-through;
}

.results-team {
    width: 25%;
    max-width: 25%;
}

.results-regular-season-wins {
    width: 5%;
    max-width: 5%;
}

.results-regular-season-losses {
    width: 5%;
    max-width: 5%;
}

.results-regular-season-draws {
    width: 5%;
    max-width: 5%;
}

.results-post-season-wins {
    width: 5%;
    max-width: 5%;
}

.results-post-season-losses {
    width: 5%;
    max-width: 5%;
}

#schedule-game-changer {
    margin: 10px auto;
}

#teams {
    margin: 10px 0px;
    padding: 0px 0px;
    min-width: var( --section-min-width );
    max-width: var( --section-max-width );
}

.teams-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 30px;
    column-gap: 10px;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    padding: 10px 0px;
}

.teams-list-entry {
    flex: 1 1 300px;
    min-width: 150px;
    max-width: 300px;
    width: 30%;
}

.teams-list-entry-title {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 10px;
}

.teams-list-entry-logo {
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

#about {
    margin: 10px 0px;
    padding: 0px 0px;
    max-width: var( --section-max-width );
    min-width: var( --section-min-width );
}

#pay-fees {
    margin: 10px 0px;
    padding: 0px 0px;
    max-width: var( --section-max-width );
    min-width: var( --section-min-width );
}

#documents {
    margin: 10px 0px;
    padding: 0px 0px;
    min-width: var( --section-min-width );
    max-width: var( --section-max-width );
}

#documents-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 30px;
    column-gap: 20px;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    margin: 10px 0px;
}

.documents-list-entry {
    flex: 1 1 230px;
    min-width: 150px;
    max-width: 230px;
    width: 25%;
    margin: var( --border-width ) var( --border-width ) var( --border-width ) var( --border-width );
}

.documents-list-entry-title {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 10px;
}

.documents-list-entry-thumbnail {
    display: block;
    margin: auto;
    max-height: 298px;
    max-width: 230px;
}

footer {
    display: grid;
    max-width: var( --section-max-width );
    min-width: var( --section-min-width );
    margin: 10px 0px;
}

#contact {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.contact-info {
    display: block;
    margin-left: 30px;
    margin-right: 30px;
    font-size: smaller;
}

.contact-info img {
    width: 12px;
    height: 12px;
}