:root {
    /* https://www.youtube.com/watch?v=G1buM51f09s */
    /* https://utopia.fyi/ */
    /* @link https://utopia.fyi/type/calculator?c=700,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--almost-white: #faf9f6;
	--dark-grey: #585858;
	--link: ;
	--link-hover: ;
	--link-clicked: ;
}

body {
	color: var(--dark-grey);
	background: var(--almost-white);
    margin: 1rem;
    /* width: min(45rem, 70%); */
    font-family: serif;
    /* font-size: clamp(1rem, 1.25vw + 0.5rem, 1.25rem) */
    font-size: 1.1rem;
}

code, pre {
    font-size: 1rem;
}

* {
    box-sizing: border-box;
}

table.friendicons {
    margin: 1em auto;
}

table.friendicons img {
    width: 1.6rem;
    height: auto;
    display: inline;
    text-decoration: none;
}

table.friendicons a {
    text-decoration: none;
    font-size: 1.6rem;
}

img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.center, h1, h2, h3, h4, figcaption {
    text-align: center;
}

.preamble {
    font-size: 1.3rem;
    text-align: justify;
}

figcaption {
    margin-top: 0.5rem;
}

.frontmatter {
    align: center;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    max-width: 45rem;
    margin: auto;
    padding-bottom: 3rem;
}

/* TODO: remove this hack */
article {
    max-width: 45rem;
    margin: auto;
}

marquee {
    min-width: 100%;
}

pre {
    white-space: pre-wrap;
    margin: auto;
    max-width: fit-content;

}

.homepage-panels {
    /* display: flex; */
    margin: 0;
    padding: 0;
    /* flex-direction: row; */
    /* justify-content: space-around; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

ul {
    list-style-type: "+  ";
}

.newsbar {
    display: flex;
}

.newsbar * {
    flex: 1 1 0;
}

.wrap-center {
    display: flex;
    justify-content: center;
}

audio {
    max-width: 90%;
    margin: 0 auto;
    display: block;
}

.book {
    width: 20%;
    min-width: 100px;
    height: auto;
    margin: 0em auto;
    padding: 0em;
    /* margin-left: 1em; */
}

@media only screen and (max-width:1000px) {
    .homepage-panels {
        grid-template-columns: repeat(2, 1fr);

    }
}

@media only screen and (max-width:700px) {
    .homepage-panels {
        grid-template-columns: 1fr;

    }
    .book {
        float: none;
        margin: 1em auto;
        width: 50%;
    }
}