@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

body,
html,
main {
  height: 100%;
}

body {
  background-color: #640100;
  background-image: linear-gradient(#f86102, #640100);
  background-repeat: no-repeat;
  font-size: clamp(5px, 1.2vw, 15.33px);
  color: #fff;
}

.visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

a {
  color: #f86102;
}

main {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 100%;
}
main > a {
  padding-top: 20px;
  color: #640100;
}
main > div {
  aspect-ratio: 940/517;
  position: relative;
  height: auto;
  width: clamp(300px, 80wv, 940px);
}
main > div h1 {
  aspect-ratio: 940/476;
  background-color: transparent;
  background-image: url("/wp-content/static/images/codecandies/froheostern.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
  text-indent: -50000em;
  width: clamp(300px, 80vw, 940px);
}
main > div > div {
  bottom: 0;
  position: absolute;
  right: 0;
  width: clamp(10px, 20.3vw, 247px);
}
main > div > div p {
  margin-bottom: 1em;
}
main footer {
  margin-top: 7px;
  width: clamp(215px, 57vw, 675px);
}
main footer a {
  color: inherit;
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-decoration: none;
}
main footer ul {
  display: flex;
  list-style: none;
}
main footer ul li {
  flex: 1 0 48%;
}
main footer ul li + li {
  text-align: right;
}
main footer ul .previous-post::before {
  content: "←";
  padding-right: 0.25em;
}
main footer ul .next-post::after {
  content: "→";
  padding-left: 0.25em;
}