body {
  font-family: system-ui, sans-serif;
  background: #f9f9f9;
  color: #333;
}

@media (min-width: 992px) {
  .page-contents {
    min-height: 65vh;
  }
}

h1 {
  font-weight: 600;
  margin-top: 1rem;
}

.opacity-50 {
  opacity: 0.5;
}

/* .carousel-item img {
  width: 100%;
  height: 600px;
  object-fit: cover;
} */

.carousel-item {
  aspect-ratio: 16 / 9;
  /* aspect-ratio: 3 / 2; */
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .carousel-item img {
    height: 300px;
  }
}

@media (max-width: 767.98px) {
  .carousel-caption h5 {
    font-size: 1rem; /* smaller heading */
  }
  .carousel-caption p {
    font-size: 0.875rem; /* smaller paragraph */
  }
}

/* .video-thumbnail {
  width: 100%;
  height: 160px;             
  border-radius: 0.375rem;   
  */

.video-thumbnail {
  width: 90%;
  aspect-ratio: 16 / 9;
  object-fit: cover;      /* keeps it cropped nicely */
  border-radius: 0.375rem;
}

  /* console output boxes */

  /* Default height */
  #console_output {
    height: 350px;
  }

  @media (min-width: 992px) {
    #console_output {
      height: 450px;
    }
  }

  @media (min-width: 1200px) {
    #console_output {
      height: 550px;
    }
  }

  .restricted-badge {
    display: inline-block;
    min-width: 100px;       
    height: 30px;
    font-size: 0.95rem;
    text-align: center;

    margin-top: 2px;      
    padding-top: 0.35rem; 
    padding-bottom: 0.35rem;
}

.presentation-badge {
    display: inline-block;
    min-width: 100px;    
    font-size: 0.95rem;   
    text-align: center;
}

.watch-btn {
    margin-top: 2px;         
    padding-top: 0.15rem;   
    padding-bottom: 0.15rem;
}