/* press-start-2p-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/press-start-2p-v16-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

body {
  background: #874A17;
  color: #ddd;
  font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px; }

header {
  position: relative;
  background: #5AD3EF url("../images/grass.webp") bottom left repeat-x;
  min-height: 150px;
  width: 100%;
  font-family: 'Press Start 2P', sans-serif; }
  header a {
    position: relative;
    color: #fff;
    display: block;
    font-weight: bold;
    font-size: 32px;
    padding: 24px Min(160px, 12vw) 58px;
    text-decoration: none;
    -webkit-text-stroke: 1px black;
    z-index: 2; }
    header a:hover, header a:focus {
      -webkit-text-decoration: dotted underline;
              text-decoration: dotted underline; }
  header::before {
    position: absolute;
    bottom: 32px;
    left: 40px;
    content: '';
    display: block;
    width: 106px;
    height: 66px;
    background: url("../images/domes.webp");
    z-index: 1; }
  header::after {
    position: absolute;
    bottom: 31px;
    left: 180px;
    content: '';
    display: block;
    width: 100px;
    height: 34px;
    background: url("../images/peeps.webp");
    z-index: 3; }

main {
  margin: 0 16px;
  max-width: 800px; }

h1 {
  font-size: 32px;
  font-weight: bold;
  color: #6fba3a; }

h2 {
  font-size: 26px;
  font-weight: bold;
  color: #ec7eac; }

a {
  color: #5ad3ef; }

footer {
  width: 100%;
  background: #533;
  color: #fff;
  font-size: 14px;
  color: #ccc;
  text-align: center; }
  footer ul {
    list-style: none;
    padding: 0;
    margin: 0 16px 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px; }
    footer ul li {
      margin: 0;
      padding: 0; }