html {
    font-size: 16px;
}

body {
    background: #ffe;
    color: #111;
    font: 1rem/1.5 sans-serif;
    margin: 0;
    padding: 0;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #111;
        color: #ffe;
    }

    a {
        color: dodgerblue;
    }

    a:visited {
        color: hotpink;
    }
}

.container {
    margin: 0 auto;
    max-width: 64rem;
    padding: 1rem;
}

.hero {
    padding: 2rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .row {
        display: flex;
    }

    .col {
        flex: 1;
    }

    .col:not(:last-child) {
        margin: 0 1rem 0 0;
    }
}

.list-item {
    margin: 0 0 1rem;
}

.event-item__header {
    display: flex;
}

.event-item__header > div {
    flex: 1;
}

.event-item__date {
    font-weight: bold;
    text-align: right;
}

.leaderboard-item {
    display: flex;
}

.leaderboard-item > div {
    flex: 1;
}

.leaderboard-item__score {
    text-align: right;
}