main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 40vw;
  margin-left: 30vw;
}

@media only screen and (max-width: 1000px) {
  main {
    margin-left: 20vw;
    width: 60vw;
  }
}

@media only screen and (max-width: 800px) {
  main {
    margin-left: 10vw;
    width: 80vw;
  }
}

/*
  post body
*/

.post > h1 {
  margin-bottom: .5rem;
  line-height: 2.5rem;
}

.post > p {
  margin-bottom: 2rem;
}

.post > div {
  margin-bottom: 1.5rem;
}

.post > div > * {
  margin-bottom: 1.6rem;
  animation-delay: .5s;
}

.post > div > h1,
.post > div > h2 {
  font-weight: bold;
}

.post > div > ul {
  transform: translate(2rem, 0rem);
}

.post > div > p > img {
  width: 40vw;
  height: auto;
}

@media only screen and (max-width: 1000px) {
  .post > div > p > img {
    width: 60vw;
  }
}

@media only screen and (max-width: 800px) {
  .post > div > p > img {
    width: 80vw;
  }
}

/*
  section seperater
*/

.spacer {
  height: 2px;
  background-color: var(--color-primary);
  animation-delay: 1s;
}

/*
  post info/sharing
*/

.post_info {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  animation-delay: 1s;
}

svg {
  scale: .95;
}

.post_info > div {
  display: flex;
  gap: .5rem;
}

@media only screen and (max-width: 800px) {
  svg {
    scale: .9;
  }
}

/*
  post navigation
*/

.post_navigate {
  display: flex;
  justify-content: space-between;

  animation-delay: 1.5s;
}

.post_navigate > div {
  display: flex;
  flex-direction: column;
  
  font-size: 1.25rem;
}

.post_navigate > div:last-child {
  align-items: flex-end;
}

@media only screen and (max-width: 800px) {
  .post_navigate > div {
    font-size: 1rem;
  }
}