:root {
  /* pico-8 pallet*/
  --color-0: #000000;
  --color-1: #1d2b53;
  --color-2: #7e2553;
  --color-3: #008751;
  --color-4: #ab5236;
  --color-5: #5f574f;
  --color-6: #c2c3c7;
  --color-7: #fff1e8;
  --color-8: #ff004d;
  --color-9: #ffa300;
  --color-10: #ffec27;
  --color-11: #00e436;
  --color-12: #29adff;
  --color-13: #83769c;
  --color-14: #ff77a8;
  --color-15: #ffccaa;

  --text-color: #191922;
  --text-color-grey: #796972;
}

:root {
  --nav-height: 60px;
  --main-text-width: min(57ch, 90vw);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/** Quick fix for empty p-tags **/
p:empty {
  display: none;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

body {
  /*font-family: "Courier New", Courier, monospace;*/
  color: var(--text-color);
  font-family: "Lato", sans-serif;
  font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6,
nav {
  font-family: "Arvo", serif;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


/* external-link */
a[href^="https://"]:after {
  content: "↗";
}

a:focus-visible {
  outline-offset: 1px;
  outline-width: 4px;
  outline-style: dashed;
  outline-color: currentColor;
}

.title_section :is(h2, h3) {
  font-weight: normal;
}

.flyer h1 {
  letter-spacing: 6.5px;
  font-size: 3.9em;
}

.flyer h2 {
  margin-top: 24px;
  font-size: 2.4em;
}


main {
  width: 100%;
}

main.md {
  background-color: var(--color-7);
  padding-top: 60px;
  padding-bottom: 160px;
}

main.md .container {
  margin-inline: auto;
  width: var(--main-text-width);
}

main.md p {
  margin-bottom: 8px;
}

main.md h2 {
  margin-top: 40px;
  margin-bottom: 8px;
}


main.md ul {
  padding: revert;
}

main.md p {
  padding: revert;
  margin: revert;
}

main.events {
  background-color: var(--color-7);
  padding-top: 30px;
  padding-bottom: 160px;
}

main.events .container {
  margin-inline: auto;
  width: var(--main-text-width);
}

main.events ul {
  list-style: none;
}

main.events ul li {
  margin-block: 16px;
}


hr {
  border-top: 1px solid #e81c4f;
}

.beta {
  color: #ff0000;
  font-weight: bold;
}

.section {
  position: relative;
  padding-bottom: 120px;
}

.section>div {
  margin-inline: auto;
}

.section:not(.title_section) {
  line-height: 1.3em;
}

.section.title_section>div {
  margin-inline: auto;
  width: min(900px, 90vw);
}

.section:not(.title_section)>div {
  width: var(--main-text-width);
}

.section>div h1 {
  padding-block: 32px;
  /* margin-top: 16px;
    margin-bottom: 8px;*/
}

.section>div h2 {
  margin-top: 40px;
  margin-bottom: 8px;
}

.section>div h3 {
  margin-top: 40px;
  margin-bottom: 8px;
}

.section>div p {
  margin-bottom: 8px;
}

.section>div ul {
  padding-left: 40px;
  margin-bottom: 8px;
}

a[name] {
  height: 60px;
  width: 100%;
  display: block;
}

a[name="home"] {
  position: absolute;
  top: calc(-1 * var(--nav-height));
  height: 0px;
}

@media screen and (max-width: 720px) and (min-width: 0px) {
  a[name="home"] {
    position: fixed;
    top: 0;
  }
}

.section:nth-child(2n) {
  background-color: #ffffff;
}

.section:nth-child(2n + 1) {
  background-color: var(--color-7);
}

.mastodon {
  display: none;
}

.blog article ul {
  padding: revert;
}

.blog article p {
  padding: revert;
  margin: revert;
}

.blog :where(h1, h2, h3) {
  margin-top: .5rem;
}

@media screen and (min-width: 721px) {
  img.peop {
    position: absolute;
    bottom: 28px;
    right: 28px;
  }
}

@media screen and (max-width: 720px) and (min-width: 0px) {
  img.peop {
    /*position: relative;*/
    display: block;
    margin: auto;
  }

  .section .flyer h1 {
    padding-top: 60px;
  }

  .section>div {
    padding: 24px;
    width: auto;
  }

  .flyer h1 {
    letter-spacing: 6.5px;
    font-size: 2em;
  }

  .flyer h2 {
    margin-top: 24px;
    font-size: 1.8em;
  }

  a[name] {
    margin-bottom: 39px;
    display: block;
  }

  #people {
    width: 100%;
  }

  p,
  dt,
  dd,
  ul,
  li {
    font-size: 20px;
  }
}