body{
    background:#fffdf1;
}
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    justify-items:center;
    align-items:center;
}
.grid .item{
    padding:1em;
    height:100%;
    max-width:11em;
    white-space:normal;
    font-weight:bold;
    text-align:center;
}
.flex{
    display:flex;
    place-content:space-evenly space-evenly;
    margin-bottom:1em;
    flex-wrap:wrap;
}
.flex *{
    flex:1;
    min-width:0;
}
.flex .item{
    height:100%;
    max-width:10em;
    white-space:normal;
}
header img{
    max-width:20em;
    margin:1em auto;
    white-space:normal;
}
main{
    margin:0 auto;
    max-width:35em;
}
#main{
    margin:1em auto;
    padding:1em;
    max-width:38em;
    font:1em/1.62em sans;
    white-space:normal;
}
footer{
    border-top:1px solid;
}
a{
    color:#5e3026;
    text-decoration:none;
    border-bottom:1px solid;
}
abbr{
    font-variant:small-caps;
}
@media(prefers-color-scheme:dark){
    body{
        background:#5e3026;
        color:#e7e1a8;
    }
    a{
        color:#fffdf1;
    }
}