/* Common CSS */

/* Generic centered flexbox: */
.centered-flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Nice centered footer: */
footer.fancy-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--pico-code-background-color);
    padding-block: 2rem;
}

/* Even bigger header: */
h1.biggest {
    font-size: 4rem;
}

/* Glowing text with the primary color: */
.glowing-text {
    color: var(--pico-color);
    text-shadow:
        0 0 5px var(--pico-primary),
        0 0 5px var(--pico-primary);
}

/* Text with a shadow effect: */
.shadowed-text {
    color: var(--pico-color);
}
html[data-theme="dark"] .shadowed-text {
    text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] .shadowed-text {
    text-shadow: 4px 4px 0px rgba(255, 255, 255, 0.5);
}

/* Image with a shadow effect and border radius: */
img.special-image {
    box-shadow: var(--pico-box-shadow);
    border-radius: var(--pico-border-radius);
}