body {
    margin: 0;
    padding: 1rem calc(17vw - 40px);} 
.main {
    padding: 0.5rem calc( 10px + 5vw);
    color: var(--text);
    background: var(--bg);}

.rel {
    width: 150px;
    float: left;
    margin-right: 15px;
    margin-top: 10px;
    padding: 0;}

a, i, summary {
    color: var(--acc);}
a:hover, a:focus, summary:hover {
    color: var(--text);}

fieldset, .links {
    width: fit-content;
    padding: 0;
    margin: 1rem 0;}
.links {
    float: left;
    margin-bottom: 0;}
fieldset {
    float: right;
    border: none;
    margin-bottom: 0;}

img {
    box-sizing: border-box;
    max-width: 100%;}

table {
    margin: 0 10px 10px;
    display: inline-block;
    max-width: calc(56vw - 175px);}

@media screen and (max-width: 760px) {
    table {
        max-width: 100%;
        margin: 10px 0px;}
    .bio img {
        display: block;
        margin: 10px auto;}
}
table, .bio img {
    vertical-align: top;}
th, td {
    padding: 0.35rem 0.6rem;}
tr:nth-child(odd) {
    background: var(--bg);}
th {
    text-align: right;}

.bodyref {
    float: left;
    margin: 20px 0;
    margin-right: 3rem;}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
input {
    appearance: none;}
label {
    display: inline-block;}

details p {
    border-left: 1px solid var(--acc2);
    padding-left: 1em;}
summary {
    width: fit-content;
    padding: 0 0.4em 0 0.3em;}


ul {
    padding-left: 2vw;}
li::marker {
    color: var(--acc);}

dd:not(:has(details)):before {
    color: var(--acc);
    content: "- ";}
dd {
    margin-left: 2vw;}

dt {
    font-weight: bold;
    color: color-mix(in oklab, var(--acc), var(--text));
    text-decoration: 1px solid underline var(--acc);
    margin-top: 1em;
    padding: 0.7em 0.3em 0.4em;
    border-top: 1px solid color-mix(in oklab, var(--acc) 50%, var(--bg2));}}