main {
    height: 90vh;
    padding: 0 !important;
}

nav {
    height: 10vh;
    max-width: 95%;
    margin-right: auto;
    margin-left: auto;
}

nav ol,
nav ul {
    align-items: center;
}

dialog article {
    max-height: 80vh;
    min-height: 40vh;
    height: auto;
    max-width: 90vw;
    width: auto;
}

dialog header {
    text-align: center;
}

dialog[x-ref=shortcutsModal] article > div {
    margin-bottom: 20px;
}

dialog[x-ref=weatherModal] {
    width: initial;
}

dialog[x-ref=weatherModal] article {
    display: grid;
    overflow: initial;
}

dialog[x-ref=weatherModal] article > button {
    padding: 6px 0;
    font-size: 24px;
}

dialog[x-ref=weatherModal] article > fieldset > input {
    font-size: 14px;
    max-width: inherit;
    width: initial;
    text-align: center;
}

dialog[x-ref=weatherModal] article > fieldset > button[disabled] {
    background-color: var(--pico-form-element-background-color);
    border: var(--pico-border-width) solid;
    border-color: var(--pico-form-element-border-color);
}

/*
 * Extending Pico
 */

:root {
    --pico-form-element-disabled-opacity: 1;
}

[role=flex] {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

[type=submit],
[type=reset],
[type=button] {
    margin-bottom: initial;
}

button[disabled][data-tooltip] {
    cursor: default;
    pointer-events: auto;
}

[data-tooltip]:not(a, button, input) {
    border-bottom: none;
}

[data-tooltip][data-ribbon-placement=left]:focus::before,
[data-tooltip][data-ribbon-placement=left]:focus::after,
[data-tooltip][data-ribbon-placement=left]:hover::before,
[data-tooltip][data-ribbon-placement=left]:hover::after {
    --pico-tooltip-slide-to: translate(-10%, 0.25rem);
}

[data-tooltip][data-ribbon-placement=right]:focus::before,
[data-tooltip][data-ribbon-placement=right]:focus::after,
[data-tooltip][data-ribbon-placement=right]:hover::before,
[data-tooltip][data-ribbon-placement=right]:hover::after {
    --pico-tooltip-slide-to: translate(-90%, 0.25rem);
}

[data-tooltip][data-placement=top]::before,
[data-tooltip][data-placement=top]::after,
[data-tooltip]::before,
[data-tooltip]::after {
    padding: inherit 1rem;
    border: 1px solid #000;
}

:where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],
:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
    opacity: 1;
}

@media (min-width: 576px) {
    :root {
        --pico-font-size: 100%;
    }
}

@media (min-width: 768px) {
    :root {
        --pico-font-size: 100%;
    }
}

@media (min-width: 1024px) {
    :root {
        --pico-font-size: 100%;
    }
}

@media (min-width: 1280px) {
    :root {
        --pico-font-size: 100%;
    }
}

@media (min-width: 1536px) {
    :root {
        --pico-font-size: 100%;
    }
}
