/* Common CSS */

/* Headings and bold text use the primary color: */
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
    color: var(--pico-primary);
}

/* The biggest headings use small-caps: */
h1,
h2,
h3 {
    font-variant: small-caps;
}

section {
    /* The default of 1 rem is too little: */
    margin-bottom: 2rem;
}

/* 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);
}