@media screen and (orientation:portrait) {
  article {
    max-width: 98vw;
  }
}

@view-transition {
  navigation: auto;
}

/* Create a custom animation */

@keyframes move-out {
  from {
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes move-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

/* Apply the custom animation to the old and new page states */

::view-transition-old(root) {
  animation: 0.4s linear both move-out;
}

::view-transition-new(root) {
  animation: 0.4s linear both move-in;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
}




.media-container {
  width: 100%;
}

table {
  margin-top: 15px;
  margin-bottom: 15px;
  width: unset !important;
  border: 1px solid var(--color-accent);
  border-spacing: 0px;
  max-width: 100%;

}

table th {
  padding: 15px;
  border: 1px solid var(--color-accent);
}

table td {
  padding: 15px;
  margin: 0px;
  border: 1px solid var(--color-accent);
}

header {
  height: fit-content !important;
}

iframe {
  margin-top: 5px;
  max-width: 55rem;
  width: 90vw;
  aspect-ratio: 16/9;
}

article .image-container img {
  max-height: 45vh !important;
}

.caption,
.caption p {
  margin: 0;
}

a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.gallery2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 90vw;
  width: 100%;
  padding: 0;
}

.gallery2 .image-container {
  width: unset !important;
}

.gallery2 img,
.gallery2 video {
  width: 220px;
  height: 220px;
  max-width: unset;
  max-height: unset;
  min-width: unset;
  min-height: unset;
  overflow: hidden;
  margin: 2px;
  border-radius: 15px;
  object-fit: cover;
}

.hover-gif span {
  position: absolute;
  z-index: +1;
  color: white;
  background-color: black;
  bottom: 5px;
  font-size: 15px;
  left: 0;
  border-radius: 5px;
  padding: 5px;
  font-weight: bold;
}


@media screen and (orientation:portrait) {

  .gallery2 img,
  .gallery2 video {
    width: 160px;
    height: 160px;
  }


  .hover-gif span {
    font-size: 10px;
  }
}