/* site hand-coded by M.J. Towers */

@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@160..700&display=swap");
html {
  background: #ebe7a4;
  background: linear-gradient(
    180deg,
    rgba(235, 231, 164, 1) 0%,
    rgba(148, 181, 65, 1) 100%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body {
  display: flex;
  height: 90vh;
  justify-content: center;
  align-items: center;
  font-family: "Readex Pro", sans-serif;
  overflow-x: hidden;
  box-sizing: border-box;
}

#box {
  -width: 400px;
  padding: 5px;
  border: 3px dashed black;
  rotate: 10deg;
  border-radius: 25px 15px 45px 145px;
}

#box2 {
  width: 400px;
  padding: 5px;
  border: 3px solid white;
  rotate: -15deg;
  border-radius: 5px 15px 25px 15px;
}

#wrapper {
  width: 400px;
  padding: 30px;
  background-color: black;
  color: rgb(202, 202, 202);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  rotate: 5deg;
  margin-left: 0;
  box-sizing: border-box;
}

#wrapper.poem {
  width: auto;
}

@media screen and (max-width: 700px) {
  #box,
  #box2,
  #wrapper {
    width: 100% !important;
  }
}

a {
  color: rgb(243, 243, 136);
}

li:not(:last-child) {
  margin-bottom: 5px;
}