/* motion_graphics.css */Z
video {
  width: 100%;
}

header {
  position: fixed;
  top: 0;
  right: 0;
  padding: 1em;
  width: 100%;
  height: 75px;
  display: grid;
  grid-template-columns: 1fr auto;
  background-color: rgb(21, 78, 152);
  z-index: 1000; /* Ensure header stays on top */
}

header h1 {
  position: relative;
  top: -300px;
  color: rgba(240, 240, 240, 1);
}

h2 {
  margin-top: 30px;
  text-align: center;
}

iframe {
  width: 280px;
  height: 158px;
}

#work {
  margin-top: 50px;
  position: relative; /* Make the container a positioning context */
}

#work figcaption {
  display: block;
  padding: .5rem 0;
  background-color: rgb(46, 52, 114);
}

#work figcaption:hover, #workfigcaption:focus {
  background-color: rgba(30, 23, 255, 0.562);
}

#work video {
  width: 100%;
}

#work h3 {
  position: absolute;
  bottom: 20px; 
  left: 370px; 
  margin: 0; 
  text-decoration: underline;
  color: rgba(240, 240, 240, 1);
  z-index: 10; /* Stays above the video */
}

/* Responsive Adjustments */
@media screen and (min-width: 800px) {
  iframe {
      width: 560px;
      height: 315px;
  }
}