:root {
    
    /** Sizes */
    --size-base: 4px;
    --size-2: calc( var(--size-base) * 2);
    --size-3: calc( var(--size-2) * 2);
    --size-4: calc( var(--size-3) * 2);
    --size-5: calc( var(--size-4) * 2);

    --container-max-width: 700px;
    --container-width: 95% !important;

    /** Colors */
    --color-primary: rgb(50, 50, 50);
    --color-highlight: rgb(255, 157, 0);
    --color-shadows: rgb(163, 178, 186);
    --color-shadows-lighter: rgb(221, 235, 242);
    --bg-color-primary: white;
    --bg-color-secondary: #eee;
    --bg-color-img: rgb(242, 242, 242);

    /** Padding */
    --pad-1: var(--size-base); /* based on --size-base */
    --pad-2: calc( var(--pad-1) * 4);
    --pad-3: calc( var(--pad-2) * 4);

    /** Margin */
    --m-1: var(--size-base); /* based on --size-base */
    --m-2: calc( var(--m-1) * 4);
    --m-3: calc( var(--m-2) * 4);

    /** Fonts */
    --font-family: Monospace;
    --font-size:    calc( var(--size-base) * 3); /* based on --size-base */
    --font-size-lg: calc( var(--font-size) * 1.5);
    --font-size-sm: calc( var(--font-size) * 0.75);
}

/** style */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 1rem;
}

body {
    color: var(--color-primary);
    background-color: var(--bg-color-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding-bottom: var(--pad-3);
    font-size: var(--font-size);
    font-family: var(--font-family);
}

:is(h1, h2, h3, h4, h5, h6) > :is( a, a:visited) {
    text-decoration: none;
    color: var(--color-primary);
}

:is(h1, h2, h3, h4, h5, h6) > :is( a:hover ) {
    text-decoration: underline;
    color: var(--color-highlight);
    text-shadow: 2px 2px 5px var(--bg-color-primary);
}

a, a:visited {
    color: var(--color-highlight);
}

a:hover {
    color: var(--color-highlight);
}

#menu > a {
    font-size: var(--font-size);
}

h1, h2, h3, h4, h5, h6 {
    font-size: var(--font-size-lg);
    background: linear-gradient(to right, var(--bg-color-secondary),  transparent 40%);
}

:is(h1, h2, h3, h4, h5, h6)::before {
    content: "#";
    font-weight: lighter;
    font-size: var(--font-size);
    color: var(--bg-color-secondary);
    padding: var(--size-2);
    margin-right: var(--size-2);
    border-radius: var(--size-base);
    background-color: var(--color-highlight);
    vertical-align: middle;
    background-size: var(--size-5) var(--size-5);
    box-shadow: -4px -4px 0px var(--color-shadows-lighter);
}

p.wip {
    font-style: italic;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logo {
    padding-bottom: var(--pad-1);
    max-width: 80vw;
}

#menu {
    display: flex;
    justify-items: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    border-top: solid var(--bg-color-secondary) 2px;
    border-bottom: solid var(--bg-color-secondary) 2px;
    margin: 0.5rem;
    padding: 0.5rem;
    font-size: large;
}

#menu > a {
    margin: 0.2rem;
    flex: auto;
}

.container {
    width: var(--container-width);
    max-width: var(--container-max-width);
    background-color: var(--bg-color-primary);
    padding: var(--pad-3);
    padding-bottom: 0;
    border-radius: 0 0 var(--size-2) var(--size-2);
    box-shadow: 1px 1px 3px var(--color-shadows);
}

footer {
    position: relative;
    bottom: 0;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    background-color: var(--bg-color-primary);
    opacity: 0.5;
}

#credits {
    padding: 0.2em;
    padding-top: 0.5em;
    font-size: var(--font-size-sm);
}

p > quote {
    font-size: var(--font-size-lg);
}

img.illustration {
    border: solid var(--bg-color-secondary) 1px;
    border-radius: var(--size-2);
    box-shadow: 1px 1px 1px var(--color-shadows);
    background-color: var(--bg-color-img);
    padding: var(--pad-2);
}

section {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--pad-2);
    border-bottom: solid 1px var(--bg-color-secondary);
    padding-top: var(--pad-2);
}

section > :not(h1, h4, h3, h4, h5, h6) {
    margin-left: var(--pad-2);
    margin-right: var(--pad-2);
}

.gallery {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.gallery .legend {
  font-size: var(--font-size-sm);
  background-color: var(--bg-color-img);
  padding: var(--pad-1);
  transform: translateY(-12px);
  margin-left: var(--pad-2);
  margin-right: var(--pad-2);
  border-radius: 0 0 var(--size-base) var(--size-base);
}

.gallery div {
  flex: 1 200px;
  flex-direction: column;
  padding: 0px;
  display: flex;
  margin: var(--pad-1);
}

.gallery img {
  flex: 1;
  width: 100%;
  padding: 0px;
  object-fit: fill;
  margin: var(--pad-1);
}

code {
    background-color: var(--bg-color-secondary);
    border-radius: 2px;
    padding: 1px 2px 1px 2px;
    font-family: monospace;
    font-weight: bold;
}

.mb-1 {
    margin-bottom: var(--m-1);
}

.arrow-up {
    all: unset;
    margin-left: 1rem;
    cursor: pointer;
}

.arrow-up img {
    filter: brightness(0.5);
    transform: translateY(20%);
}