body {
    font-family: "Atkinson Hyperlegible Next", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.allcol h1{
    display: inline;
}
code, .mono{
    font-family: "Atkinson Hyperlegible Mono", sans-serif;
    font-optical-sizing: auto;
    font-size: 0.85em;
    font-weight: 400;
    font-style: normal;
    color: #1e1e2e;
    background-color: #ddd;
    padding: 5px;
    border-radius: 10px;
}
pre code{
    padding:10px;
}
main {
    margin: 5%;
    display: grid;
    grid-template-columns: 20% minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
}
@media screen and (max-width: 1024px) {
    main {
        grid-template-columns: minmax(0, 1fr);
    }
}
.allcol {
    grid-column: 1 / -1;
    margin-bottom: 40px;
    border-bottom: 1px solid #ddd;
}
#switcher{
    font-size:1.5em;
    padding: 7px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #ccc;
    width: fit-content;
}
#switcher > button {
    all: unset;outline: revert;
    cursor: pointer;
    margin: -7px;
    padding: 7px;
    font-size: 0.8em;
    color: #333;
}
#switcher:has(button:hover:nth-child(1)) {
    background: linear-gradient(to right, #aaa 50%, #ccc 50%)
}
#switcher:has(button:hover:nth-child(3)) {
    background: linear-gradient(to left, #aaa 50%, #ccc 50%)
}

#swspan{
    padding:7px;
    background-color:#fff;
    width: 40%;
    min-width: fit-content;
}
/*
#switcher>*:nth-child(1){
border-right: 1px solid #ccc;
}
#switcher>*:nth-child(3){
border-left: 1px solid #ccc;
}*/

h2 { margin-top: 0; }
blue{color: #1990b8 !important;}
gray{color: #7D8B99 !important;}
.new{margin-top: 80px;cursor:default;}
.new *:hover{
    text-decoration:underline;
    cursor:pointer;
}
a{color:#1990b8;text-decoration:none;}
a:hover{text-decoration:underline;}
.new a:hover{text-decoration:none;}
#c1d ul{list-style:none;padding:0;margin:10px 0 0;}
#c1d li{margin:4px 0;}

.blurb{
    border-bottom: 1px solid #ddd;
    padding: 12px 0;
}
.blurb h3{margin:0 0 6px;font-size:1.15em;}
.blurb p{margin:8px 0;}
.meta{font-size:0.85em;}
.tags{margin:6px 0;}
.tag{
    font-size:0.85em;
    background-color:#eee;
    color:#333;
    padding:2px 7px;
    border-radius:10px;
}
.tag:hover{background-color:#ddd;text-decoration:none;}

.work{max-width:42em;}
.work h2{margin-bottom:4px;}
.work blockquote{
    margin:16px 0; padding-left:12px; border-left:3px solid #ddd;
    color:#555;
}
.work .body{line-height:1.6;margin-top:24px;}

#sub{display:flex;flex-direction:column;gap:12px;max-width:42em;}
#sub label{display:flex;flex-direction:column;gap:4px;}
#sub input,#sub textarea{
    font:inherit;
    font-weight:400;
    padding:6px 8px;
    border:1px solid #ccc;
    border-radius:10px;
}
#sub textarea{resize:vertical;}
#sub button{
    font:inherit;
    width:fit-content;
    padding:6px 16px;border:1px solid #ccc;
    border-radius:10px; background-color:#ddd; cursor:pointer;
}
#sub button:hover{background-color:#ccc;}