:root {
    --abinb-measure: 120ch;
}
/* page layout */
html {
    height: 100%;
}
body {
    margin: 1rem 1rem 1rem 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

html.abinb-js body * {
    /* hide until load */
    display: none; 
}
html.abinb-js body {
    background-color: rgb(var(--abinb-page-background-color));
}
main {
    flex: 1;
}
main a.abinb-selflink {
    color: rgb(var(--abinb-text-color));
    margin-left: 1rem; 
}
main a.abinb-selflink .abinb-iconify {
    width: calc(var(--abinb-icons) * .6);
}
/* for page transitions */
body.abinb-fadeout {
    opacity: 0% !important;
    transition: opacity .25s;
}
body.abinb-fadein > * {
    animation-duration: .5s;
    animation-name: abinb-fadein;
}
  
@keyframes abinb-fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
  
body.abinb-dim-10 > main {
    opacity: 10% !important;
}
body.abinb-dim-70 > main {
    opacity: 70%;
}
svg.abinb-iconify {
    width: var(--abinb-icons);
    height: var(--abinb-icons);
} 
.center {
    box-sizing: content-box;
    max-inline-size: var(--abinb-measure);
    display:flex;
    flex-direction: column;
}
@media(min-width: 160ch) {
    .center {
        margin-inline: auto;
    }
}