:root {
    --pico-border-radius: 2rem;
    --pico-typography-spacing-vertical: 1.5rem;
    --pico-form-element-spacing-vertical: 1rem;
    --pico-form-element-spacing-horizontal: 1.25rem;

    /* Custom Shadow */
    --shadow-color: 0deg 0% 0%;
    --shadow-elevation-low:
        0.3px 0.6px 0.8px hsl(var(--shadow-color) / 0.06),
        0.4px 1px 1.3px -0.8px hsl(var(--shadow-color) / 0.08),
        1px 2.1px 2.9px -1.6px hsl(var(--shadow-color) / 0.09);
    --shadow-elevation-medium:
        0.3px 0.6px 0.8px hsl(var(--shadow-color) / 0.05),
        0.8px 1.7px 2.4px -0.4px hsl(var(--shadow-color) / 0.06),
        1.4px 3.1px 4.3px -0.8px hsl(var(--shadow-color) / 0.07),
        2.7px 5.8px 8px -1.2px hsl(var(--shadow-color) / 0.08),
        4.9px 10.7px 14.7px -1.6px hsl(var(--shadow-color) / 0.09);
    --shadow-elevation-high:
        0.3px 0.6px 0.8px hsl(var(--shadow-color) / 0.04),
        1.4px 3px 4.1px -0.2px hsl(var(--shadow-color) / 0.05),
        2.4px 5.3px 7.3px -0.4px hsl(var(--shadow-color) / 0.05),
        3.5px 7.7px 10.6px -0.5px hsl(var(--shadow-color) / 0.06),
        4.9px 10.7px 14.7px -0.7px hsl(var(--shadow-color) / 0.06),
        6.8px 14.7px 20.3px -0.9px hsl(var(--shadow-color) / 0.07),
        9.3px 20.1px 27.7px -1.1px hsl(var(--shadow-color) / 0.07),
        12.6px 27.2px 37.5px -1.3px hsl(var(--shadow-color) / 0.08),
        16.8px 36.5px 50.3px -1.5px hsl(var(--shadow-color) / 0.08),
        22.3px 48.3px 66.6px -1.6px hsl(var(--shadow-color) / 0.08);
}

body {
    font-family: 'Merienda', cursive;
    --pico-font-family: 'Merienda', cursive;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Merienda', cursive;
    --pico-font-family: 'Merienda', cursive;
}

h1 {
    --pico-typography-spacing-vertical: 0.5rem;
}

p,
span {
    font-family: 'Karla', sans-serif;
    --pico-font-family: 'Karla', sans-serif;
}

.indent {
    text-indent: 2rem;
}

button,
[role="button"] {
    --pico-font-weight: 700;
}

img {
    border-radius: 2rem;
    box-shadow: var(--shadow-elevation-high);
}

.small-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

#footer>p {
    text-align: center;
}

.blog-img {
    display: block;
    max-width: 70%;
    width: 100%;
    height: auto;
    margin: auto;
    border-radius: var(--pico-border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-elevation-high);
}

@media (min-width: 1200px) {
    .blog-img {
        max-width: 50%;
    }
}

.thumbnail {
    width: 160px;
    height: 100px;
    border-radius: var(--pico-border-radius);
    object-fit: cover;
    box-shadow: var(--shadow-elevation-medium);
}

.blog-entry {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--pico-typography-spacing-vertical);
}

.blog-entry > div:first-child {
    margin-right: 1.25rem;
    flex-shrink: 0;
}

.blog-entry h3 {
    margin-bottom: 0.25rem;
}

.blog-entry h3 a {
    text-decoration: none;
    color: inherit;
}

.blog-entry h3 a:hover {
    color: var(--pico-primary);
}

.blog-entry small {
    display: block;
    margin-bottom: 0.5rem;
}

.blog-entry p {
    margin-bottom: 0;
}

@media (max-width: 500px) {
    .blog-entry {
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-entry > div:first-child {
        margin-right: 0;
        margin-bottom: 0.75rem;
        width: 100%;
    }

    .thumbnail {
        width: 100%;
        height: 160px;
    }
}