* {
    box-sizing: border-box;
    /* make everything easy to read on mobile */
    font-size: 1.2em;
}
html,body {
    font-size: 13.5px;
    margin: 0;
}
.page-wrapper {
    margin: 1.6em auto;
    max-width: min(78vw, 32rem);

    display: flex;
    flex-direction: column;
    align-items: center;
}

.score-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2em;
}

.score-form > *,
.teams-wrapper > * {
    margin: 0.2em 0 0.4em 0;
    width: 100%;
}
.score-form button {
    width: auto;
}
.score-form label {
    font-size: 0.87em;
    align-self: flex-start;
    margin-bottom: 0;
}
input {
    padding: 0.2em 0.5em;
}
input[readonly] {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}
.match-title,
input[name="matchName"] {
    font-size: 0.95em;

    margin-bottom: 2.8em;
    background: none;
    border: none;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    /* color: rgba(0, 0, 0, 0.641); */
}
.teams-wrapper {
    margin: 0;
}
.checkbox-wrapper {
    width: 100%;
    padding-left: 0.12em;
    margin: 0;
    margin-bottom: 0.4em; /* if you put margin on score input instead, score top border is hidden (chrome bug?) */

    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.14em;
}
.checkbox-wrapper input[type="checkbox"] {
    scale: 1.4;
    margin: 0.4em 0.25em 0.4em 0;
}
.checkbox-wrapper label {
    font-size: 0.87em;
    /* make the hitbox for tapping to toggle bigger */
    padding-right: 2.5em;
    margin: 0.25em 0;
}
button {
    border-radius: 0.5em;
    padding: 0.24em 0.7em;
    align-self: flex-end;
    font-size: 1em;
}

.sans-serif {
    font-family: sans-serif;
}

p {
    margin: 2em 0;
    font-size: 0.88em;
    color: rgb(65, 65, 65);
}