* {box-sizing: border-box;}

:root {
        --text:#2e2e2e;
        --proportional: Inter, sans-serif;
        --monospace: monospace;
        --background:whitesmoke;
        --text-font-size: 1rem;
        --text-line-height: 1.8rem;
        --h-margin: 40px;
        --v-margin: 50px;

        --shadow-block-shadow-color:rgba(61,72,82,0.74902);
        --bg-grid-color:rgba(110,115,121,0.01);
}

 body {
        margin: 0px;
        padding: 0px;

        color:var(--text);
        font-family: var(--proportional);
        font-feature-settings: "kern" on;
        font-variant-ligatures: common-ligatures;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;

        font-weight: normal;
        font-size: var(--text-font-size);
        line-height: var(--text-line-height);
        text-align: center;


       background-color:var(--background);
       
        width: 100%;
        height: 100%;
        max-width: 1200px;
        padding: var(--v-margin);
        margin: 0px auto;
        min-height: calc(100vh - 100px);
}


nav a {text-decoration: none; font-size: 0.9em; color: inherit;}

.selected {color: var(--background); background-color: var(--text); border-radius: 2px; padding: 2px 4px;}

a::after {content:" ▸";}
span a:last-child::after {content:"";}


nav {margin: 1.2em 0;}

img {max-width: 100%; height: auto; border-radius: 6px; border: 2px solid #ccc3; margin-bottom: 1em;}
img:last-child {margin-bottom:0}

h3 {font-size: 4em; margin: 0.1em 0 0.6em 0}

.logo {
              position:fixed;
              bottom:0;
              left:0;
              width: 100%;
              color: grey;
              padding: 4px;
              background-color: #ecedec;
              border-bottom:1px solid lightgrey;
              text-align: center;
              font-size: smaller;
}


@media only screen and (max-width: 600px) {
    :root {
                --v-margin: 15px;
    }