html {
    height: 100%;
    height: 100vh;
}

body {
    height: auto;
    width: auto;
    min-height: 100%;
    min-height: 100vh;
    overflow-y: scroll;
    margin: 0;
    padding: 0;
}

:root:not([data-theme=dark])
.mybackground {
    background-image: url('/background-light.jpeg');
    background-size: cover;
    background-attachment: fixed;
}
[data-theme=dark]
.mybackground {
    background-image: url('/background-dark.jpeg');
    background-size: cover;
    background-attachment: fixed;
}

.feather {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.text-center {
    text-align: center;
}

.grid-2cols {
    grid-template-columns: auto auto;
}

.grid-3cols {
    grid-template-columns: auto auto auto;
}

.grid-4cols {
    grid-template-columns: auto auto auto auto;
}

.menu-right {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    bottom: 0;
    margin: 0;
}

.navtiles {
    outline-color: var(--pico-card-component-outline-color);
    outline-style: hidden;
    outline-width: thin;
    padding: calc(var(--pico-block-spacing-vertical) * 2 / 3) calc(var(--pico-block-spacing-horizontal) * 2 / 3);
    background-color: transparent;
}

.navtiles-grid > div {
    padding: calc(var(--pico-spacing) / 2) calc(var(--pico-spacing) / 2);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-code-background-color);
    color: var(--pico-muted-color);
    font-size: .875rem;
    text-align: center;
}