/* OVERRIDING DEFAULTS */

nav ul { margin-left: 0 !important; margin-right: 0 !important; }

/* centering */

main { text-align: center; }
main > * { text-align: initial; }
h1 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* sizing */

@media (max-width: 767px)  {
  .container { padding: 0.5em; }
}
@media (max-width: 479px)  {
  .container { padding: 0.25em; }
}

form {
  max-width: 480px;
  padding: 20px;
  margin: auto;
  border-radius: var(--mu-border-radius);
  border: 1px solid var(--mu-dropdown-border-color);
  background: var(--mu-dropdown-background-color);
}

/* colors */

:host(:not([data-theme=dark])),
:root:not([data-theme=dark]),
[data-theme=light] {
    --mu-background-color: #eee;
}
@media only screen and (prefers-color-scheme: dark) {
    :host(:not([data-theme])),
    :root:not([data-theme]) {
        --mu-background-color: rgb(19,22.5,30.5);
    }
}
[data-theme=dark] {
    --mu-background-color: rgb(19,22.5,30.5);
}

header {
    background: #8883;
    box-shadow: 0 3px 5px #8888;
}
details {
    border: 1px solid var(--mu-dropdown-border-color);
    background: var(--mu-dropdown-background-color);
    overflow: clip;
}
details[open] summary {
    background: #8888;
    color: var(--mu-accordion-active-summary-color) !important;
}

/* fancy details */

details {
    margin: 0;
    border-radius: 0;
}
details:first-of-type { border-radius: 0.5em 0.5em 0 0; }
details:last-of-type { border-radius: 0 0 0.5em 0.5em; }
details > * { padding: 1em; }
summary { font-size: 1.25em; }
details[open] summary { margin: 0; }