.right, .left {
  flex: 1
}

.middle {
  flex: 2;
}

#comic-image {
  box-sizing: border-box;
  border: 2px solid black;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.comic-nav {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.nav-right, .nav-left {
  border: 2px solid black;
  padding: 5px;
  background-color: white;
  width: fit-content;
}

a {
  font-size: small;
}

/* mobile wip */
@media (max-width: 1000px) {
  .three-column-layout {
    flex-direction: column;
  }

  .left, .right, .middle {
    flex: 1;
  }

  .middle {
    order: 2;
  }

  .left {
    order: 1;
    width: 100%;
  }

  .right {
    order: 3;
    width: 100%;
  }

  .comic-wrap {
    animation: none;
    transform: skew(0);
    width: 100%;
  }
}

@media (max-width: 500px) {
  .comic-nav {
    gap: 80%;
  }
}