gallery/style/base.css

@import url(../fonts/muller/muller.css);

html {
  --thumb-size: 200px;
  --page-size: 1000px;

  --back-dark: hsl(129, 54%, 54%);
  --back-light: hsl(119, 69%, 69%);
  --dark-tum: hsl(41, 41%, 79%);
  --light-tum: hsl(47, 59%, 85%);
  --lighter-tum: hsl(47, 74%, 89%);
  --text-hue: 42;
  --text: hsl(var(--text-hue), 25%, 24%);
  --text-link: hsl(111, 30%, 42%);
  --shadow: hsla(42, 25%, 24%, 60%);
  --bheight: 121px;
  --bplacement: 60vh;

  background:
    url(border.png) left 0% bottom calc(var(--bplacement) - var(--bheight))
      repeat-x fixed,
    linear-gradient(to top,
                    transparent var(--bplacement),
                    var(--back-light) var(--bplacement),
                    var(--back-dark))
      fixed,
    url(spots.png) repeat fixed,
    linear-gradient(to top,
                    var(--dark-tum)    0vh,
                    var(--lighter-tum) var(--bplacement))
      fixed;

  color: var(--text);
  font-family: Muller;
  font-size: 16pt;

  --red: hsla(340, 100%, 70%, 60%);
  --green: hsla(93, 100%, 63%, 60%);
  --yellow: hsla(60, 100%, 70%, 60%);
}


body {
  margin: 2rem auto;
  padding: 1em 1em 1.5em 1em;
  border: 5px solid var(--dark-tum);
  box-shadow: 0px 0px 50px var(--shadow);
  background: var(--lighter-tum);
}


b { font-weight: 600; }
b b { font-weight: 900; }

h1, h2, h3 { font-weight: 900; }
h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 100%; }
h4 { font-size: 100%; font-weight: 600; }

header {
  position: relative;
  text-align: center;
  margin: 0 0 1em 0;
  --small: 90%;
}

header h1 {
  font-size: 300%;
  font-weight: 100;
  margin: 0;
}


a {
  color: var(--text-link);
  font-weight: 500;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

ul {
  padding-left: 1em;
}

ul > li {
  list-style: '— ';
  padding-left: 0;
}

section + section { margin-top: 1em; }
section > section + section { margin-top: 0.75em; }

h1[id] a, h2[id] a, h3[id] a, h4[id] a, h5[id] a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

h1[id]:hover::after,
h2[id]:hover::after,
h3[id]:hover::after,
h4[id]:hover::after,
h5[id]:hover::after {
  content: ' §';
  opacity: 60%;
}

b {
  /* rather than always 600 or whatever it does */
  font-weight: bolder;
}

.emoji {
  text-align: baseline;
  height: 1em;
}