header:not(.spaced) {
    --pico-typography-spacing-vertical: 0;
}

nav ul li {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.left-right {
    display: flex;
    justify-content: space-between;
}

.flex {
    display: flex;
}

.justify-end {
    justify-content: flex-end;
}

/* Margin Removal util */
.nomargin {
    margin: 0 !important;
}

/* Page Header and Footer */
body div.container > footer {
    border-top: 1px solid var(--pico-muted-border-color);
    padding-top: 1em;
}

body div.container > header {
    border-bottom: 1px solid var(--pico-muted-border-color);
    margin-bottom: 1em;
}

body div.container > header nav[aria-label=breadcrumb] ul li {
    padding-top: 0;
}

/* Table highlighting */
table tbody tr:not(thead tr) td, table tbody tr:not(thead tr) th {
    transition: background-color 200ms ease-in-out;
}

table:not(.nohighlight) tbody tr:not(thead tr):is(:hover, :focus, :active) td, table tbody tr:not(thead tr):is(:hover, :focus, :active) th {
    -webkit-tap-highlight-color: var(--pico-secondary-focus);
    background-color: var(--pico-secondary-focus);
}

.secondary {
    --pico-color: var(--pico-secondary);
    color: var(--pico-secondary);
}

/* Responsive stuff */
.responsive-article-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.small-article, .large-article {
    width: 100%;
}

@media (min-width: 768px) {
    .responsive-article-container {
        flex-direction: row;
    }

    .small-article {
        width: 40%;
    }

    .large-article {
        width: 60%;
    }
}

/* site-specific */
.showcase article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.showcase article .icon {
    font-size: 5em;
}

.showcase a {
    color: inherit !important; /* matches the surrounding text */
    text-decoration: none;
}

.showcase a:hover {
    color: inherit !important;
    text-decoration: none;
}

article.minecraft {
  text-align: center; /* Center everything by default */
}

article.minecraft > header {
  text-align: left; /* Override just the header */
}

.map-preview iframe {
    height: 40vh;
}