html {
    /*background-color: aliceblue;*/
    /*background-color: #58655b;*/
    /*background-color: #e1ede4;*/
    background-color: #f4f4f4;
}

a {
    color: #fe502c;
}
a:hover {
    color: #58655b;
}

body {
    /*background-color: white;*/
    background-color: #fefefe;
    width: 90%;
    max-width: 45em;
    margin: 0 auto;
    padding: 1em;
    font-family: Helvetica, Arial;
}

#post-list {
    list-style-type: none;
}

main img {
    width: 100%;
    display: block;
    margin: auto;
}
#kofi {
    width: unset;
    display: unset;
    margin: unset;
}

main .smallimg img {
    width: 320px;
}
.pixelimg img {
    image-rendering: pixelated;
}

/*main {
    width: 90%;
    max-width: 45em;
    margin: 0 auto;
}*/
/*header {
    display: flex;
    flex-direction: column;
}*/

header {
    font-size: max(30px, min(8vw, 3em));
    /*display: flex;*/
    flex-direction: column;
}

header a {
    text-decoration: none;
    color: #fe502c;
    font-family: righteous, Helvetica, Arial;
    display: block;
    transition: rotate 1s;
}

header h1 {
    font-size: 100%;
    margin-bottom: 0px;
    width: fit-content;
    transition: rotate 1s;
}

header h2 {
    align-self: flex-end;
    /*max-width: 75%;*/
    font-size: 45%;
    margin-top: 0px;
    text-align: right;
    transition: rotate 1s, transform-origin 1s;
}
/*header h1:hover a {
    rotate: -15deg;
}

@media (min-width: 800px) {
    header h2 {
        transform-origin: right;
    }

    header:has(h1:hover) h2 {
        rotate: 2deg;
    }
}
@media (max-width: 800px) {
    header h2 {
        transform-origin: right;
        max-width: 68%;
    }
    header:has(h1:hover) h2 {
        rotate: 2deg;
    }
}
*/

/*header > h1, header > h2 {
    margin: auto;
}*/

pre {
    border: 1px solid #ccc;
    padding: 0.5em 1em;
    overflow: auto;
}

.date {
    font-family: monospace;
}