:root {
    --color-background-primary: #A4BD99;
    --color-background-secondary: #E0E8DC;
    --color-background-tertiary: #C7CEC3;
    --color-background-highlight: #C7C3CE;
    --color-text-primary: #363835;
    --color-text-secondary: #091403;
    --border-radius-primary: 1em;
    --border-radius-secondary: 0.25em;
    --body-padding-side: max(0.5em, calc(100% - 75rem));
    background-color: var(--color-background-primary);
    max-width: 75em;
    margin: auto;
    margin-top: -0.75em;
}

*:target {
    background-color: var(--color-background-highlight);
}

*:target,
img {
    border-radius: var(--border-radius-secondary);
}

body {
    background-color: var(--color-background-secondary);
    color: var(--color-text-secondary);
    margin: 0.5em;
    padding-left: var(--body-padding-side);
    padding-right: var(--body-padding-side);
    padding-bottom: 0.25em;
    border-radius: var(--border-radius-primary);
}

h1,
h2,
h3,
h4 {
    color: var(--color-text-primary);
}

h1 {
    padding-top: 0.25em;
}

details {
    background-color: var(--color-background-tertiary);
    max-width: 30em;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: var(--border-radius-primary);
}

summary {
    cursor: pointer;
}

legend {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

input {
    margin: 0.5em;
}

fieldset {
    max-width: 50em;
    border: 1px solid var(--color-background-primary);
    border-radius: var(--border-radius-primary);
}

img {
    max-width: min(30em, 100%);
}

thead {
    font-weight: bold;
}

td {
    padding-right: 1.5em;
}