body {
    background-color: rgb(0, 0, 0);
    color: white;
    display: flex;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    font-weight: 550;
}

p {
  padding: 20px 0px 20px 0px;
  text-align: center;

}

.parent {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 600px) {
  body {
    padding: 0;
    margin: 0;
  }
  .parent {
    flex-direction: column;
    align-items: center; /* keeps content centered horizontally */
    width: 100%;        /* full width on small screens */
    padding: 0 10px;       /* adds 10px padding all around */
    box-sizing: border-box;
  }

  video,
  img.under-video {
    width: 100%;         /* fill container width */
    max-width: 100%;     /* no overflow */
    height: auto;        /* maintain aspect ratio */
    display: block;
    margin: 0 auto;      /* center horizontally if smaller than container */
    padding: 0;          /* remove any extra padding */
  }

  .container {
    width: 100%;         /* full width on small screens */
    margin-top: 20px;    /* optional top spacing */
    padding: 0 10px;     /* adds 10px padding all around */
    box-sizing: border-box;
  }
}

.container {
    display: flex;
    flex-direction: column;
    /* padding: 0px 75px 0px 75px; breathing room left & right */
    margin-top: 50px; /* breathing room above */
}

#video-container {
  cursor: pointer;
  display: inline-block;
  padding: 100px 0px 100px 0px ;
  /* padding: 180px 0px 200px 0px; breathing room above & below */
}

#image-container {
  display: inline-block;
  padding-top: 50px;
}

  img.under-video {
    width: 100%;
    max-width: 640px; /* lock both video & image to same max width */
    height: auto;     /* preserve aspect ratio */
    display: block;
  }

  /* Ensure video shows full frame, not cropped */
  .parent video {
    object-fit: contain;
  }


    footer {
      color: #fff;
      padding: 60px 40px;
      display: flex;
      justify-content:space-around;
      align-items: center;
      max-height: 30px;
    }

    .footer-box {
      display: flex;
      gap: 15px;
    }

    .footer-box-left{
        align-items: left;
        padding: auto;
        padding: 0px 60px 0px 60px;

    }

    .footer-box-right{
        align-items: right;
        padding: 0px 60px 0px 60px;
    }

    .footer-box a {
      text-decoration: none;
      color: #fff;
      padding: 8px 12px;
      border-radius: 6px;
    }

    .footer-box a:hover {
        color: blueviolet;
    }