@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;
}