html,
body,
header,
main,
nav,
footer,
article,
section,
div,
aside,
address,
figure,
dl,
form,
dialog {
   display: flex;
   flex-direction: column;
}
html {
   min-height: 100%;
   font-family: ui-sans-serif, system-ui, sans-serif;
   line-height: 1.5;
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
}
@media print {
   html {
      font-family: serif;
   }
}
@media (prefers-reduced-motion: no-preference) {
   html {
      interpolate-size: allow-keywords;
   }
}
*, *::before, *::after {
   box-sizing: border-box;
   overflow-wrap: break-word;
}
body {
   margin: 0;
   padding: 0;
}
body > header,
body > footer {
   padding-block: 1rem;
}
body > header,
main,
body > footer {
   padding-inline: 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
   margin-block-start: 1rem;
   margin-block-end: 0.5rem;
   text-wrap: balance;
}
p,
dl,
ol,
ul,
menu,
th,
td {
   text-wrap: pretty;
}
p,
pre,
dl,
ol,
ul,
menu {
   margin-block-start: 0.5em; 
   margin-block-end: 0.5em;
}
dt {
   font-weight: bold;
}
dd + dt {
   margin-block-start: 0.25em;
}
a,
label {
   align-self: flex-start;
}
a:any-link {
   font-weight: bold;
   text-decoration: underline rgba(0, 0, 0, 0);
}
a:any-link:hover {
   text-decoration-color: inherit;
}
abbr[title],
dfn[title] {
   cursor: help;
}
figure {
   margin-left: auto;
   margin-right: auto;
   max-height: fit-content;
   max-width: fit-content;
}
figcaption {
   text-align: center;
}
caption {
   caption-side: bottom;
}
img {
   font-style: italic;
}
img, picture, svg, video, canvas, audio, iframe, embed, object {
   display: block;
   max-width: 100%;
}
img, svg, video, canvas {
   height: auto;
   width: auto;
}
picture {
   display: contents;
}
audio {
   width: 100%;
}
audio:not([controls]) {
   display: none;
}
u {
   text-decoration: none;
}
template, source {
   display: none;
}
details > summary {
   user-select: none;
}
hr {
   margin: 2rem 0;
   border: none;
   border-top: 1px solid currentColor;
   color: inherit;
}
kbd {
   display: inline-block;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
   0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
   border: 1px solid #b4b4b4;
   border-radius: 0.2em;
   background-color: #eee;
   padding: 0.12em 0.25em;
   color: #333;
   font-size: 0.85em;
   line-height: 1;
   white-space: nowrap;
   text-transform: capitalize;
}
pre {
   text-wrap-mode: wrap;
   white-space-collapse: preserve-breaks;
}
pre code {
   white-space: pre-wrap;
}
form {
   width: fit-content;
}
fieldset {
   margin: 0.5rem 0;
   padding-top: 0.5em; 
   padding-bottom: 1em;
}
label {
   display: flex;
   margin: 0.5rem 0;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   width: fit-content;
   gap: 0.5em;
}
label span:has(+:required):after,
fieldset[aria-required] legend:after {
   content: '*';
}
input:focus::placeholder::-webkit-input-placeholder,
textarea:focus::placeholder::-webkit-input-placeholder {
   color: transparent;
}
input:focus::placeholder::-moz-placeholder,
textarea:focus::placeholder::-moz-placeholder {
   color: transparent;
}
input:focus::placeholder:-ms-input-placeholder,
textarea:focus::placeholder:-ms-input-placeholder {
   color: transparent;
}
input:focus::placeholder,
textarea:focus::placeholder {
   color: transparent;
}
textarea {
   resize: vertical;
}
input,
textarea,
select {
   border: 1px inset grey;
   border-radius: 0.25rem;
   padding: 0.25rem 0.5rem;
   font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: 1rem;
}
button,
[role="button"],
[role="combobox"],
[role="listbox"],
[role="searchbox"],
[role="slider"],
[role="spinbutton"],
[role="switch"],
[role="textbox"],
input[type="reset"],
input[type="button"],
input[type="submit"],
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="image"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
label,
select,
summary,
textarea {
   min-width: 24px;
   min-height: 24px;
}
button:enabled:hover,
input[type="reset"]:enabled:hover,
input[type="button"]:enabled:hover,
input[type="submit"]:enabled:hover,
input[type="radio"]:enabled:hover,
label:hover input[type="radio"]:enabled,
label:hover input[type="radio"]:enabled + span,
input[type="checkbox"]:enabled:hover,
label:hover input[type="checkbox"]:enabled,
label:hover input[type="checkbox"]:enabled + span,
select:enabled:hover,
select:enabled:focus-within, 
summary:hover {
   filter: brightness(105%);
   cursor: pointer;
}
label:has(input[type="radio"]:enabled):hover,
label:has(input[type="checkbox"]:enabled):hover {
   cursor: pointer;
}
input:focus,
textarea:focus,
button:focus,
select:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
   outline: none;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8) inset
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   border: none;
   border-radius: 0.25rem;
   padding: 0.5rem 1rem;
   gap: 0.5rem;
   background-color: buttonFace;
   color: buttonText;
   font-size: 1rem;
}
button:enabled:active:hover,
input[type="button"]:enabled:active:hover,
input[type="reset"]:enabled:active:hover,
input[type="submit"]:enabled:active:hover {
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
}
*:disabled,
input[type="radio"]:disabled + span:before,
input[type="checkbox"]:disabled + span:before,
input[type="radio"]:disabled + span:after,
input[type="checkbox"]:disabled + span:after {
   opacity: 0.5;
   filter: saturate(0.5) contrast(0.8);
}
input[type="checkbox"],
input[type="radio"] {
   margin: 0;
}