body {
  background-image: url("/assets/images/writing-background.png");
  background-size: 12em;
  image-rendering: pixelated;
}
p, h1, h2, a, nav, details {
  font-family: Helvetica;
}
p, a {
  font-size: large;
  letter-spacing: -0.08em;
}
a {
  color: hsl(177, 52%, 27%);
  text-decoration: underline;
}
a:hover, a:focus, a:active {
  color: hsl(180, 18%, 50%)
}
h1, h2 {
  letter-spacing: -0.1em;
}
h1 {
  font-size: xx-large;
  font-style: italic;
}
h2 {
  font-size: x-large;
  font-style: italic;
  font-weight: bold;
}
s {
  font-size: small;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-width: 0.4em;
  border-color: hsl(184, 44%, 22%);
  border-style: solid;
  box-shadow: 7px 7px 0 hsl(184, 44%, 22%);
}
.post {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-width: none;
  border-color: none;
  border-style: none;
  box-shadow: none;
}
.all {
  display: flex;
  justify-content: center;
  height: 100vw;
}
.main {
  background-color: hsl(44, 71%, 96%);
  width: 900px;
  height: fit-content;
  padding: 2em;
  border: 5px solid;
  filter: url(#wiggle);
}
.posts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.art {
  background-color: hsl(42, 100%, 95%);
  padding: 0.5em;
  width: 150px;
  height: 150px;
  border-color: hsl(184, 44%, 22%);
  border-style: solid;
  margin: 1em;
  box-shadow: 5px 5px 0 hsl(184, 44%, 22%);
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(33.33% - 20px);
}
@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }
}