.banner time {
  font-size: 1.25rem;
}

.sign-up p {
  text-wrap: balance;
}

.content:not(:empty) {
  padding-bottom: 2rem;
}

ul.tiles.newsletters {
  text-align: center;
}
ul.tiles.newsletters li {
  margin-bottom: 10px;
}
ul.tiles.newsletters a {
  position: relative;
  background: var(--border);
}
ul.tiles.newsletters a.first {
  background: var(--primary);
}
ul.tiles.newsletters .content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0.25rem;
}
ul.tiles.newsletters .inner-container {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  height: 15rem;
  width: 15rem;
  background-color: var(--alt-background);
  padding: 1px 0 0 1px;
}
ul.tiles.newsletters li:nth-of-type(1n + 1) .inner-container {
  background-color: var(--background-first);
}
ul.tiles.newsletters li:nth-of-type(2n + 2) .inner-container {
  background-color: var(--background-second);
}
ul.tiles.newsletters li:nth-of-type(3n + 3) .inner-container {
  background-color: var(--background-third);
}
ul.tiles.newsletters li:nth-of-type(4n + 4) .inner-container {
  background-color: var(--background-fourth);
}
ul.tiles.newsletters li:nth-of-type(5n + 5) .inner-container {
  background-color: var(--background-fifth);
}
ul.tiles.newsletters span.title {
  font-weight: 500;
  font-size: 1.25rem;
  display: block;
  margin-bottom: 1rem;
}
ul.tiles.newsletters time {
  color: var(--color);
  font-weight: 400;
}
ul.tiles.newsletters .new {
  display: block;
  position: absolute;
  z-index: 1;
  width: 15rem;
  text-align: center;
  top: 1.75rem;
  color: var(--primary);
}
ul.tiles.newsletters a:hover, ul.tiles.newsletters a:focus-visible {
  background: var(--secondary);
}
ul.tiles.newsletters a:hover.first, ul.tiles.newsletters a:focus-visible.first {
  background: var(--secondary);
}
ul.tiles.newsletters a:hover .inner-container, ul.tiles.newsletters a:focus-visible .inner-container {
  background: var(--background);
}

.content img, .comic img {
  border: solid 1px var(--border);
}

.comic {
  margin: 2rem 0;
  box-shadow: 0 0 5px var(--border);
  padding: 1rem;
}
.comic img {
  margin-bottom: 0.5rem;
  clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);
}

.ps {
  margin-bottom: 1rem;
}

.signature {
  color: var(--primary);
  font-style: italic;
  font-weight: 500;
  margin: 2rem 0 1rem 1rem;
  font-size: 1.25rem;
}

.previous-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: solid 1px var(--secondary);
  border-bottom: solid 1px var(--secondary);
  padding: 1rem 0;
  margin-top: 1rem;
}

.latest-news span {
  display: block;
}
.latest-news a.button {
  display: block;
  text-align: center;
}
.latest-news a.button span {
  display: block;
}
.latest-news a.button .date {
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.dialog {
  display: none;
  position: fixed;
  top: 10%;
  left: 10%;
  right: 10%;
  max-height: 80%;
  background: var(--background);
  border: solid 1px var(--border);
  box-shadow: 0 0 5px var(--shadow);
  grid-template-rows: min-content auto min-content;
  overflow-y: auto;
}
.dialog > * {
  padding: 1rem 2rem;
}
.dialog .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--primary);
}
.dialog .dialog-header h2 {
  color: var(--primary-contrast);
  margin: 0;
}
.dialog .content {
  overflow-y: auto;
}
.dialog .dialog-footer {
  border-top: solid 1px var(--border);
  padding: 0.5rem 2rem;
  display: flex;
  justify-content: flex-end;
}

@keyframes open {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes close {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@media (prefers-reduced-motion) {
  @keyframes open {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes close {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
.dialog.show {
  display: grid;
  animation: open 250ms ease-in 1;
}

.dialog.hide {
  animation: close 250ms ease-out 1;
}

.img-button.left {
  float: left;
}

.img-button.right {
  float: right;
}

@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
}

.overlay.show {
  display: block;
  animation: show 250ms ease-in 1;
}

.overlay.hide {
  animation: hide 250ms ease-out 1;
}