:root {
    --global-font-size: 15px;
    --global-space:10px;
    --font-stack: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
    --mono-font-stack: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
    --global-line-height: 1.6em;
    --page-width: 60em;
    --primary-color: #076678;
    --secondary-color: #707070;
    --display-h1-decoration: 1;
}

@media only screen and (max-width: 850px) {
    :root {
        --global-font-size: 14px;
        --global-line-height: 1.6em;
        --page-width: 70em;
    }
}

body {
    font-family: var(--font-stack);
    font-size: var(--global-font-size);
    background-color: #fff;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: var(--font-stack);
    clear: both;
}

.footer {
    margin-top: calc(var(--global-space) * 2);
    border-top: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

.image-grid {
    display: grid;
    grid-gap: 0.7em 1em;
    grid-template-rows: auto;
    grid-template-columns: repeat(auto-fit,
        minmax(calc(var(--page-width) / 4), 1fr));
}

a {
    color:var(--primary-color);
    text-decoration:none
}

footer,h1,h2,h3,h4,h5,h6,header,li,ol,p,ul {
    float:none;
    margin:0;
    padding:0;
}

h1,ol,p,ul {
    margin-top:calc(var(--global-space) * 2);
    margin-bottom:calc(var(--global-space) * 3);
}

h1 {
    position:relative;
    display:inline-block;
    display:table-cell;
    padding:calc(var(--global-space) * 2) 0 calc(var(--global-space) * 2);
    overflow:hidden;
    margin: 0px;
}

.logo {
    font-size: 2em;
    font-weight: 700;
    padding:calc(var(--global-space) * 3) 0 calc(var(--global-space) * 0.5);
}

h1::after {
    content:"====================================================================================================";
    position:absolute;
    bottom:5px;
    left:0;
    display:var(--display-h1-decoration);
}

.logo+*,h1+* {
    margin-top:0;
}

h2,h3,h4,h5,h6 {
    position:relative;
    margin-bottom:var(--global-line-height);font-weight:600
}

h1,h2,h3,h4,h5,h6,strong {
    font-size:var(--global-font-size);
}

li,li>ul>li {
    position:relative;
    display:block;
    padding-left:calc(var(--global-space) * 2);
}

li::after {
    position: absolute;top:0;left:0;
    content: "●";
}

.container {
    margin: 0 auto;
    padding: 0 calc(var(--global-space));
    max-width: var(--page-width);
}

img {
    width: 100%;
    border: solid 5px;
    border-color: white;
}

img:hover {
    transition: all 0.2s ease 0s;
    border-color: var(--primary-color);
}

.single {
    max-height: 100vh;
    max-width: 90vw;
    width: auto;
}