:root {
    --optimalia-rosewater: #dc8a78;
    --optimalia-flamingo: #dd7878;
    --optimalia-pink: #ea76cb;
    --optimalia-mauve: #8839ef;
    --optimalia-red: #d20f39;
    --optimalia-maroon: #e64553;
    --optimalia-peach: #fe640b;
    --optimalia-yellow: #df8e1d;
    --optimalia-green: #40a02b;
    --optimalia-teal: #179299;
    --optimalia-sky: #04a5e5;
    --optimalia-sapphire: #209fb5;
    --optimalia-blue: #1e66f5;
    --optimalia-lavender: #7287fd;
    --optimalia-text: #4c4f69;
    --optimalia-subtext1: #5c5f77;
    --optimalia-subtext0: #6c6f85;
    --optimalia-overlay2: #7c7f93;
    --optimalia-overlay1: #8c8fa1;
    --optimalia-overlay0: #9ca0b0;
    --optimalia-surface2: #acb0be;
    --optimalia-surface1: #bcc0cc;
    --optimalia-surface0: #ccd0da;
    --optimalia-base: #eff1f5;
    --optimalia-mantle: #e6e9ef;
    --optimalia-crust: #dce0e8;
}

html{
    /* min-height: 100%; */
    overflow: auto;
    /* font-size: 62.5%; */
    /* font-size: 16px; */

    font-family: "Sono", serif;
    font-optical-sizing: auto;
    /* font-weight: 300; */
    font-style: normal;
    font-variation-settings:
        "MONO" 1;

    color: var(--optimalia-text);
}



body {
    position: relative;
    min-height: 100vh;
    background-color: var(--optimalia-base);
    margin: 0px;

    min-width: 17rem;

}

header, footer {
    background-color: var(--optimalia-mantle);
}

/* header & footer */
.bigflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* possibly useless */
    align-items: center;
    padding: 0.5rem;
    /* background-color: var(--optimalia-mantle); */

    * {
        margin: 0px;
    }

    a {
        color: var(--optimalia-text);
        text-decoration: none;
    }
}
.bigflex > * {
    flex: 1 0 0px;
    margin: 0px;
    height: min-content;
}

.smallflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: start; /* possibly useless */
    align-items: center;
    /* padding: 0.5rem; */
    background-color: var(--optimalia-mantle);
    justify-self: start;

    /* .filler {
        flex-grow: 3;
    } */


}
.smallflex > * {
    /* flex: 1 0 0px; */
    margin: 0px;
    margin-right: 1em;
    height: min-content;

}

.bloglist {
    display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
    justify-content: center;
}

.bloglist > * {
    flex: 1, 1, auto;
    width: 20rem;
    margin: 0.7rem;

    /* p {
        min-width: 20rem;
    } */
}

/* .smallflex:first-child {
    margin-right: 1em;
}

.smallflex:last-child {
    flex-grow: 3;
} */

.center{
    display: grid;
    margin-left: 1rem;
    margin-right: 1rem;
}
.center > *{
    /* width: max-content; */
    justify-self: center;
    margin: 0px;
}

.filler {
    min-width: 0px;
    height: 0px;
}

.vertfiller {
    min-width: 0px;
    height: 1rem;
}


footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: fit-content;
}

/* content */
article {
    max-width: 80ch;
    margin: auto;
    /* font-size: large; */
    height:82%;
    padding-bottom: 14rem;
    padding-left: 2rem;
    padding-right: 2rem;

    h1 {
        font-size: 2.1rem;
        margin-bottom: 0rem;
    }

    h2 {
        margin-bottom: 0.2rem;
    }

    a {
        color: var(--optimalia-teal);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }
}

article:has(.bloglist) {
    max-width: 80rem;

    a {
        color: var(--optimalia-text);
        text-decoration: none;
    }

}

p {
    white-space: break-spaces;
    overflow: visible;
}

hr {
    background-color: var(--optimalia-yellow);
    border: 0 none;
    height: 0.1rem;
    margin: 0px;
}

img {
    display: block;
    margin: auto;
    width: 80%;
    margin-top: 1rem;
    transition: .3s ease;
}

img:hover {
    /* position: fixed;
    z-index: 100;
    top: 2rem;
    left: 10%;
    width: 80%;
    height: 80%;
    object-fit: cover; */
    transform: scale(140%);
}