@font-face {
  font-family: 'DynaPuff';
  src: url('../../fonts/DynaPuff-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DynaPuff';
  src: url('../../fonts/DynaPuff-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playpen_Sans';
  src: url('../../fonts/PlaypenSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playpen_Sans';
  src: url('../../fonts/PlaypenSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body::before {
    background-image: url("../../images/mount_smaller.avif");
}

.main-trailer {
    max-width: calc(60vh * 16 / 9);
    max-height: 60vh;
    width: calc(60vh * 16 / 9);
    height: 60vh;
    display: block;
    margin: 0 auto;
    border: none;
    padding: 0 0 0 0;
    --button-size: 6rem;
    position: relative;
    color: #fff;
    background:rgba(0, 255, 255, 0.5);
    border-radius: 40px;

    button {
      all: unset;
      box-sizing: border-box;
      cursor:pointer;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      *{
        pointer-events:none;
      }
    }
    .play-icon {
      height: var(--button-size);
      width: var(--button-size);
      position: absolute;
      top: calc(50% - (var(--button-size) / 2));
      left: calc(50% - (var(--button-size) / 2));
      z-index: 10;
    }
    img {
      width: 95%;
      transform: translate(2.5%, 0);
      height: calc(var(width) * 9 / 16);
    }
    iframe {
      height: 100%;
      width: 100%;
    }
}

.image-with-description {
  padding-top: 110px;
  display: flex;
  align-items: center;
}

.image-description {
  margin: 2px 5px;
  font-size: 2rem;
  color: white;
  font-family: 'Playpen_Sans', Arial, sanf-serif;
  padding: 20px;
  align-self: flex-start;
  background-color: rgb(0, 0, 255, 0.5);
  justify-content: center;
  line-height: 45px;
  border-radius: 20px;
}

.small-image {
  width: 50vw;
  height: min(25vw, 60vh);
  border-radius: 20px;
}

.notify-reboot-title {
  background-color: rgb(255, 0, 0, 0.5);
  color: white;
}

@media (max-width: 1000px) {
  .main-trailer {
      width: 95%;
      height: calc(95vw * 16 / 9);
  }

  .image-with-description {
    flex-direction: column; /* Stacks image and text vertically */
  }

  .image-description {
    align-self: center; /* Centers the text box */
  }

  .small-image {
    width: 95%; /* Make the image take up most of the screen width */
    height: auto; /* Allow the height to scale proportionally */
    margin: 2px 5px;
  }
}