body {
    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova',
                 'Nimbus Sans', Arial, sans-serif;
    font-weight: normal;
    margin: 0;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*min-height: 100vh;*/

    color: #1e1b1d;
    background-color: #f8fafc;
    line-height: 1.6;
}

b {
    position: absolute;
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
    width: 1px;
}

h1, h2, h3, h4, h5, h6 {
    color: #7b3c58;
    margin: 1em 0 0;
    line-height: 1;
}
h1 {
    margin-top: 0;
}

p {
    margin: 0 0 1em;
}

header {
    background-color: #7b3c58;

    /*background-color: #f8f9fa;*/
    padding: 0.5rem 1.5rem;
    /*border-bottom: 1px solid #e9ecef;*/
}

a {
    color: #bf6b8d;
}
a:visited {
    color: #8b3c58;
}
a:hover, a:focus, a:active {
    color: #bea13e;
}

nav {
    color: #f8fafc;

    ol, ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
        display: inline-block;
    }
    li::after {
        content: ' • ';
        padding: 0 0.5em;
    }
    li:last-child::after {
        content: '';
    }

    a, a:visited {
        color: #f8fafc;
        text-decoration: none;
        padding-right: 0.25em;
    }
    a:hover, a:focus, a:active {
        color: #bea13e;
    }
}
nav.years {
    color: #7b3c58;
    margin-bottom: 1em;

    li::after {
        padding: 0 0.1em;
    }
    a {
        color: #7b3c58;
        /*font-weight: bold;*/
        padding-right: 0;
    }
    a:hover, a:focus, a:active {
        color: #bea13e;
    }
    em {
        font-style: normal;
        font-weight: 900;
        /*font-size: 1.25em;*/
        /*line-height: 0.9;*/
    }
}


main {
    flex: 1;
    /*padding: 20px;*/
    padding: 1.5rem;
    /*max-width: 800px;*/
}

footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 1rem 2rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
}

h1 {
    color: #7b3c58;
    font-size: 3em;
}

/*
.year-nav {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 20px;
    list-style: none;
    padding: 0;
}

.year-nav li {
    margin: 0;
}

.year-nav a {
    color: #0066cc;
    text-decoration: none;
    font-weight: 500;
}

.year-nav a:hover {
    text-decoration: underline;
}

.year-nav .current-year {
    font-weight: bold;
    color: #333;
}
*/

.calendar-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));

    .month-container {
        break-inside: avoid;
    }

    table {
        border-collapse: collapse;
        /*width: 100%;*/
    }

    th, td {
        padding: 4px 7px;
        text-align: right;
    }

    thead tr:first-child th {
        font-size: 1.25em;
        text-align: left;
        padding-left: 4.7em;
    }

    thead th:nth-child(n+7) {
        color: #888;
    }

    tbody {
        td {
            color: #888;
        }
        th {
            font-weight: 500;
            padding-right: 10px;
            white-space: nowrap;
        }
    }

    .planning td:nth-child(n+2):nth-child(-n+6) {
        background-color: #7a7f8f;
        color: #bfe3d5;
    }
    .sprint td:nth-child(n+2):nth-child(-n+6) {
        background-color: #bfe3d5;
        color: #7a7f8f;
    }
}

/* Pentaweeks explanation page */

/*
ul {
    margin: 16px 0;
}

li {
    margin: 8px 0;
}

a {
    color: #0066cc;
}