:root {
    --primary-color: #9a2e34;
    --text-dark: #1f2d3b;
    --text-grey: #5c6b7f;
    --bg-light: #fcfcfd;
    --border-color: #e0e4eb;
    --font-stack: "Helvetica-Neue", Roboto, Helvetica-Neue, Arial, sans-serif;
}

body {
    margin: 0;
    padding: 1rem;
    font-family: var(--font-stack);
    background-color: #ffffff;
}

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

.entire-page {
    max-width: 1280px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.title-bar {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.site-logo img {
    height: auto;
    max-height: 120px;
    margin-right: 1rem;
}

.title-bar h1.site-title {
    font-size: 2rem;
    color: #2c3e4d;
}

.site-titles> :not(:first-child) {
    display: block;
    margin-top: -8px;
    font-weight: normal;
    color: #6b7c93;
}

nav.navmenu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
}

a.navlink {
    text-decoration: none;
    text-align: center;
    color: #f7eceb;
    font-weight: bold;
    display: block;
    min-width: auto;
    padding-right: 1.5ch;
    padding-left: 1.5ch;
    line-height: 38px;
}

span.navspan:hover {
    color: #ffffff;
    background-color: #ffffff25;
}

a.navlink.active {
    color: #ffffff;
    background-color: #ff000050;
}

.nav-container {
    background-color: #9a2e34;
}

a {
    color: var(--primary-color);
}

a.venue-link {
    color: var(--bg-light);
}

main {
    background-color: #eeeeee;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    border-left: 0.1rem solid #aaaaaa;
    border-right: 0.1rem solid #aaaaaa;
    border-bottom: 2rem solid #9a2e34;
}

.rounded-background {
    background-color: #dfcbc9;
    border-radius: 25px;
    padding: 25px 25px;
}

.club-night {
    display: flex;
}

.club-night-content {
    flex-grow: 1;
}

.links-div,
.button-grid,
.teams-container {
    display: flex;
    justify-content: center;
}

.teams-item {
    flex-grow: 1;
    text-align: center;
    margin: 0rem 1rem;
}

.match-cards-grid,
.league-tables-grid {
    display: flex;
}

.links-column,
.match-cards-item,
.league-table-wrapper {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 33.33%;
    padding: 0rem 0.25rem;
}

.fixture-table-div,
.league-table-div {
    background-color: #333333;
}

.match-card-caption,
.league-table-caption,
.fixture-table-caption {
    background-color: #9a2e34;
    border-top: 0.5rem solid #ff000050;
    color: #ffffff;
    padding: 0.5rem;
    margin-bottom: 0px;
    margin-top: 0px;
}

.fixture-table,
.league-table {
    padding: 0px;
    color: #ffffff;
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}

th,
td {
    border: 1px solid #1f1f1f;
    padding: 0.625rem;
    text-align: left;
}

tr.highlight-row {
    background-color: #666666;
    font-weight: bold;
}

.event-div {
    margin-bottom: 1rem;
}

.block-button {
    background-color: #9a2e34;
    opacity: 1;
    margin-top: 0.5rem;
    width: 200px;
    height: 50px;
    align-content: center;
    text-align: center;
}

.block-button:hover {
    opacity: 0.9;
}

a.block {
    text-decoration: none;
    color: #ffffff;
    width: 100%;
    height: 100%;
}

.match-card {
    background-color: #333333;
    border-bottom: 1px solid #1f1f1f;
    color: #ffffff;
    text-align: center;
}

.match-card-contents {
    margin: 1rem;
}

.post-card-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0rem 2rem;
}

.post-card-div {
    flex-grow: 1;
    flex-shrink: 0;
    background-color: #dfcbc9;
    border-radius: 10px;
    padding: 0px 10px;
    position: relative;
}

.blog-link-span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.post-card-title {
    font-size: 1.2rem;
    margin-bottom: 0rem;
    margin-top: 1rem;
}

.post-card-author {
    font-size: 1rem;
    margin-bottom: 0rem;
    margin-top: 0rem;
    font-weight: lighter;
    color: #2c3e4d;
}

.tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tag-item {
    background-color: #e0e4eb;
    border: 1px solid #1f2d3b;
    color: #1f2d3b;
    padding: 2px;
}

.chessboard {
    width: 100%;
}

.chessboard svg {
    display: block;
    margin: auto;
}

iframe.lichess-embed {
    width: 80%;
    aspect-ratio: 3/2;
}

/* =========================================================
   MOBILE RESPONSIVENESS (MEDIA QUERIES)
   ========================================================= */

/* Mobile Breakpoint */
@media screen and (max-width: 768px) {

    body {
        padding: 0.0rem;
    }

    main,
    .rounded-background,
    .post-card-grid {
        margin: 0;
        border: none;
    }

    .entire-page {
        max-width: 100%;
    }

    h1.site-title {
        font-size: 1.5rem;
        text-align: center;
    }

    h2 {
        text-align: center;
    }

    .title-bar,
    .club-night,
    .match-cards-grid,
    .teams-container,
    .links-div,
    .button-grid,
    .league-tables-grid {
        flex-direction: column;
    }

    .club-night img {
        max-width: 100%;
    }

    .link-column,
    .match-cards-item,
    .league-table-wrapper,
    .teams-item,
    .post-card-div {
        flex-basis: 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }

    .block-button,
    a.block {
        width: 100% !important;
        margin: 0 auto;
    }

    div.table-wrapper {
        display: block;
        overflow-x: auto;
    }

    th,
    td {
        padding: 0.5rem;
    }

    iframe.lichess-embed {
        width: 100%;
        aspect-ratio: 2/3;
    }
}

.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}