/* region: Structure */

:root{
    --border-radius: 0.4rem;
}

#frame{
    margin:0 auto;
    background-repeat: repeat-y;
}

#nav-articles,
#nav-about{
    position:absolute;
    overflow: hidden;
    display:block;
    background-repeat: no-repeat;
}

#themer{
    position: absolute;
    z-index: 9;
    background-position: bottom;
    background-repeat: no-repeat;
}

.theme-button{
    position:absolute;
    top:0;
    display: inline-block;
    background-repeat: no-repeat;
}

#downscaler{
    position: absolute;
    z-index: 10;
}

#downscaler > FORM{
    padding:0;
    margin:0;
}

.downscaler-preset{
    background-repeat: no-repeat;
    position: absolute;
}

#display{
    position: absolute;
    z-index: 1;
    text-align: right;
    padding:0;
    margin:0;
    border:0;
    background: transparent;
}

#content{
    position:relative;
    background-repeat: no-repeat;
}

#page-header H1.with-abstract{
    margin-top:0;
    margin-bottom:0.4rem;
}

#page-header H2{
    margin:0;
    padding:0;
    font-size: var(--base-font-size);
}

#footer{
    font-size: var(--xs-font-size);
    text-align: center;
}

#footer-body{
    position: relative;
    top:5rem;
}

#home-button{
    position: absolute;
}

/* endregion */

/* region: Galleries */

.gallery-image{
    margin-bottom:4rem;
}

.gallery-image .visual{
    width:100%;
}

.gallery-image H4{
    margin-top:0.6rem;
    margin-bottom:1rem;
}

.gallery-image H4 > SMALL{
    font-size:60%;
    opacity: 0.7;
}

/* endregion */

/* region: Elements */

HTML{
    margin: 0;
    padding: 0;
}

BODY{
    padding: 0 0 6rem 0;
    margin: 0;
    font-family:"Nunito", sans-serif;
    font-size: var(--base-font-size);
    font-weight: 300;
    background: var(--document-background);
    color: var(--text-color-default);
}

IMG{
    display:block;
}

A{
    text-decoration: none;
}

A:link{
    color: var(--link-color);
}

A:visited{
    color: var(--link-visited-color);
}

A:hover{
    text-decoration: underline;
    color: var(--link-hover-color);
}

H1{
    font-size: var(--h1-font-size);
    font-weight: 400;
}

H2{
    font-size: var(--h2-font-size);
    font-weight: 400;
}

H3{
    font-size: var(--h3-font-size);
    font-weight: 400;
}

H4{
    font-size: var(--h4-font-size);
    font-weight: 400;
}

HR{
    border: solid 1px var(--border-primary);
}

BLOCKQUOTE{
    margin: 0 0 0.6rem 0;
    padding:0.6rem;
    border-left-width:0.3rem;
    border-left-style: solid;
    border-radius: 1rem;
    background: var(--blockquote-background);
    border-left-color: var(--border-primary);
}

BLOCKQUOTE > P:first-child{
    margin-top:0;
}

BLOCKQUOTE > P:last-child{
    margin-bottom:0;
}

B,STRONG{
    font-weight: 700;
}

PRE{
    margin: 0 0 0.6rem 0;
    padding:0.6rem;
    border-radius: 1rem;
    background: var(--blockquote-background);
}

A.btn,
BUTTON.btn{
    display: inline-block;
    border: none;
    border-radius: var(--border-radius);
    padding: 0.4rem 0.8rem;
    margin: 0;
    text-decoration: none;
}

A.btn:hover,
BUTTON.btn:hover{
    text-decoration: none;
}

A.btn.btn-primary,
BUTTON.btn.btn-primary{
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

A.btn.btn-secondary,
BUTTON.btn.btn-secondary{
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

A.btn.btn-danger,
BUTTON.btn.btn-danger{
    background: var(--button-danger-bg);
    color: var(--button-danger-text);
    font-weight: 700;
}


/* endregion */


/* region: Utils */

.mono{
    font-family: "Fira Mono", monospace;
}

.badge{
    display: inline-block;
    padding: 0.08rem 0.2rem;
    font-size: var(--xs-font-size);
    background: var(--blockquote-background);
    border-radius: 4px;
    margin-right: 0.2rem;
}

.badge.active{
    background: var(--document-background);
}

.badge .fa-solid,
.badge .fa-regular,
.badge .fa-light,
.badge .fa-thin{
    font-size: 80%;
}

H1 > A.permalink{
    font-size: 80%;
}

A.permalink{
    display:inline-block;
    padding-left:0.2rem;
    margin-top:-0.6rem;
    opacity: 0.2;
    text-decoration: none;
}

A.permalink:hover{
    opacity: 1;
}

A.permalink.share:hover{
    color: var(--link-share-color);
}

.visual{
    border-top-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-width: 0.3rem;
    border-color: var(--border-primary);
    border-top-style: solid;
    border-bottom-style: solid;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.6 ));
    background: var(--border-alt-primary);
    color: var(--text-color-invert);
    text-align: center;
}

.visual A{
    font-weight: bold;
    color: var(--text-color-invert);
}

IMG.separator{
    margin: 2rem 0;
}

.pagination{
    margin: 0 0 0.6rem 0;
    padding: 0.6rem;
    border-radius: 0.3rem;
    color: var(--text-color-invert);
    background: var(--pagination-background);
}

.pagination.top{
    margin-bottom: 2rem;
}

.pagination A{
    color: var(--link-color-invert);
}

/* endregion */