:root{
    --gray10: #f4f4f4;
    --blue60: #0f62fe;
    --text: #161616;
    --alert60: #da1e28;
    --cyan20: #bae6ff;
    --cgray30: #c1c7cd;
    --gainsboro: #dcdcdc;
    --neutral: 'Neutral','Helvetica Neue', Helvetica, Arial, sans-serif;
    --mono: 'IBM Plex Mono', Menlo, Consolas, monospace;
}
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto; max-width: 100%;}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}figure{display: block;margin-block-start: 0;margin-block-end: 0;margin-inline-start: 0;margin-inline-end: 0;}
html{
    background-color: var(--gainsboro);
}
@media only screen and (max-width: 550px){
    .box{
        padding: 0 !important;
        margin: 1rem auto 7rem;
        width: 93%;
        font-size: 17px;
        line-height: 1.45;
        margin: 3em auto !important;
    }
    .centimg figure{
        max-width: 85vw !important;
        margin: auto !important;
    }
}
.box{
    margin: 3em;
    color: var(--text);
}
.box span, p{
    font-size: 20px;
    font-family: 'Calluna Sans';
    color: var(--text);
}
.box code{
    font-family: var(--mono);
}
.notfound{
    color: var(--alert60);
    margin: 5em;
    font-family: var(--neutral);
    max-width: 500px;
}
.centimg figure{
    max-width: 60vw;
    margin: 2em auto;
}
figcaption{
    font-family: var(--neutral);
    font-size: 14px;
    color:rgb(160, 160, 160);
    text-align: center;
}
figcaption span{
    font-style: italic;
}