* {
    box-sizing: border-box;
}

html {
    font-size: clamp(1rem, 1vh + 0.5rem, 2rem);
    height: 100%;
}

body {
    text-align: center;
    font-family: 'DejaVu Sans Mono', sans-serif;
    background-color: #3c3c3c;
    color: #b2d2b2;
    margin: 0;
    height: 100%;
}

div.container {
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    display: flex;
    flex-flow: column;
}

@media screen and (max-width: 1000px) {
    div.container {
        width: 90vw;
    }

}

@media screen and (min-width: 1000px) {
    div.container {
        width: 80vw;
    }
}

@media screen and (min-width: 1400px) {
    div.container {
        width: 55vw;
    }
}

@media screen and (min-width: 1800px) {
    div.container {
        width: 50vw;
    }
}

@media screen and (min-width: 2000px) {
    div.container {
        width: 45vw;
    }
}

h1 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1.pn {
    font-size: 3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

p.flame {
    text-align: center;
}

p.flame span {
    margin-top: 0.5em;
    color: #69c0ffb0;
    font-size: 3em;
    user-select: none;
}

p {
    line-height: 1.5em;
}

a {
    color: #b2d2b2;
}

a:visited {
    color: #b2d2b2;
}

div.text {
    text-align: justify;
    flex-grow: 1;
}

hr {
    appearance: none;
    width: 100%;
    border-color: #b2d2b2;
    margin-block-start: 0;
    margin-block-end: 0;
}

div.infinity {
    flex-grow: 1;
}

div.infinity p {
    font-family: 'Bitstream Vera Sans Mono';
    flex-grow: 1;
}

div.nav p {
    margin-block-end: 0.42em;
    margin-block-start: 0.62m;
    font-size: 0.96em;
    margin-right: 1em;
    margin-left: 1em;
}

div.nav a.currentpage {
    text-decoration: underline;
    font-size: 1em;
}

div.nav div.articles {
    display: flex;
    justify-content: end;
    flex-grow: 1;
    margin-top: 0;
    border-bottom: 1px solid #b2d2b2;
}

div.nav a {
    text-decoration: none;
}


div.stamp {
    display: flex;
    flex-flow: row;
    text-align: start;
    font-size: 0.88em;
    line-height: 1.6;
}

@media screen and (max-width: 1000px) {
    div.stamp {
        font-size: 0.7em;
    }

    div.nav p {
        font-size: 0.8em;
        margin-block-end: 0.42em;
        margin-block-start: 0.62m;
        font-size: 0.9em;
        margin-right: 1em;
        margin-left: 1em;
    }

    div.nav a.currentpage {
        text-decoration: underline;
        font-size: 0.96em;
    }
}

div.stamp span.footer-name {
    flex-grow: 1;
}