@counter-style leading-zero {
    system: decimal;
    pad: 2 "0";
}


body {
    font-size: var(--base-font-size);
    color: var(--base-text-color);

    p {
        font-size: var(--text-font-size);
        margin-top: var(--base-paragrapg-margin-top);
        margin-right: var(--base-paragrapg-margin-right);
        margin-bottom: var(--base-paragrapg-margin-bottom);
        margin-left: var(--base-paragrapg-margin-left);
    }
    label {
        font-size: var(--text-font-size);
        margin-top: var(--base-paragrapg-margin-top);
        margin-right: var(--base-paragrapg-margin-right);
        margin-bottom: var(--base-paragrapg-margin-bottom);
        margin-left: var(--base-paragrapg-margin-left);
    }

    button {
        cursor: pointer;

        padding-top: var(--button-padding-top);
        padding-right: var(--button-padding-right);
        padding-bottom: var(--button-padding-bottom);
        padding-left: var(--button-padding-left);

        border: none;
        border-radius: var(--button-border-radius);

        font-size: var(--button-font-size);
        color: var(--button-text-color);

        background-color: var(--button-background-color);

        &:hover {
            text-decoration: var(--button-hover-text-decoration);
        }
        &[disabled] {
            background-color: var(--color-disabled-element-background);
            color: var(--color-disabled-element-text);
            &:hover {
                text-decoration: none;
                cursor: not-allowed;
            }
        }
    }

    main {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        row-gap: 1rem;

        hyphens: manual;
        hyphenate-limit-chars: 9 4 4;

        margin-left: var(--main-margin-left);
        margin-right: var(--main-margin-right);
        margin-top: var(--main-margin-top);
        margin-bottom: var(--main-margin-bottom);

        h1 {
            font-size: var(--h1-font-size);
        }
    }

    .content-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        row-gap: 1rem;
        border:
            var(--elements-border-width)
            var(--elements-border-style)
            var(--color-elements-border);
        padding: var(--content-container-padding);
        max-width: var(--content-container-max-width);
    }

    a.button-link {
        padding-top: var(--button-padding-top);
        padding-right: var(--button-padding-right);
        padding-bottom: var(--button-padding-bottom);
        padding-left: var(--button-padding-left);

        border: none;
        border-radius: var(--button-border-radius);

        font-size: var(--button-font-size);
        color: var(--button-text-color);

        background-color: var(--button-background-color);

        text-decoration: none;
        cursor: pointer;

        &:hover {
            text-decoration: var(--button-hover-text-decoration);
        }
    }

    .hidden-unless-script-enabled {
        display: none;
    }
    .hidden {
        display: none;
    }

    .undecorated-link {
        text-decoration: none;
        color: inherit;
    }

    .centered {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .button-styling-removed {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        font: inherit;
        color: inherit;
        cursor: pointer;
        &:hover {
            text-decoration: none;
        }
    }

    .content-stack {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        row-gap: 1rem;
    }

    .table {
        display: table;
        margin-left: auto;
        margin-right: auto;
        .table-row {display: table-row;}
        .table-cell {display: table-cell;}
    }
}