body {
	background-color: black; 
    color: white;
	text-indent: 8%;
	text-align: left;
	font-size: 1.18em;
	font-family: Courier;
	font-weight: normal;
	margin-left: 20%;
	margin-right: 20%;
}
/*Page Title*/
h1 { 
	background-color: black; 
	font-weight: normal;
	text-indent: 0%;
	font-family: "IBM Plex Mono", monospace;
	color: white;
	text-align: center;
	
}

/*mid sized center heading;*/
h2 { 
	text-align: center;
	text-indent: 0%;
	font-weight: bold;
	font-size: x-large;
}

/*left font narrow*/
h3 { 
    color: white;
	text-indent: 0%;
	text-align: left;
	font-size: 1em;
	font-family: Courier;
	line-height:22px;
	font-weight: normal;
	margin-left: 10%;
	margin-right: 10%;
}

/*small heading font */
h4 { 
	font-family: Courier;
	font-size: 1.4em;
	margin-top: 3;
	text-indent: 0%;
	margin-left: 0%;
	font-weight: normal;
	color: white;
	text-align: center;	
}

/*center font*/
h5 { 
    color: white;
	text-align: center;
	font-size: large;
	font-weight: normal;
	margin-bottom: 0;
	margin-bottom: 0;
	text-indent: 0%;
	margin-left: 5%;
	border-width: 5px;
	border-color: White;
	margin-right: 5%;
	font-family: Courier;
}

/*indented left*/
h6 { 
    color: white;
	text-align: center;
    text-indent: 0px; /* Indent by 50 pixels */
	font-size: medium;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0%;
	margin-right: 0%;
	
 // font-style: italic;
	font-family: "IBM Plex Mono", monospace;
}

.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {
	width: 30%;
	border-width: 1px;
	border-style:solid;
	border-color: White;
	height: auto;
	transition: transform 0.25s ease;
	cursor: zoom-in
}

.click-zoom input[type=checkbox]:checked~img {
  transform: scale(4);
  cursor: zoom-out
}


.fix_block {
	position: fixed;
	bottom: 20px;
	left: min(max(75%, 50px), 1270px);
	text-align: left;
}


.banner {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

.work-container {
	margin-left: -10%;
	margin-right: -10%;
    display: flex;             /* Enables Flexbox layout */
    flex-direction: column;    /* Default to stacked (for mobile) */
    gap: 20px;                 /* Adds space between the quote boxes */
  }

.work-card {
    padding: 20px;
	min-width: 0;
    flex: 1;                   /* Makes all cards the same width */
  }

.quotes-container {
	margin-left: -15%;
	margin-right: -15%;
    display: flex;             /* Enables Flexbox layout */
    flex-direction: column;    /* Default to stacked (for mobile) */
    gap: 20px;                 /* Adds space between the quote boxes */
    padding: 0px;
  }

  .quote-card {
    padding: 20px;
    flex: 1;                   /* Makes all cards the same width */
  }

  /* Styling the text */
  .quote-text {
    font-style: italic;
    margin-bottom: 10px;
  }

  .quote-author {
    font-weight: bold;
    margin-top: 0;
  }

  /* 3. The "Media Query" (The magic switch) */
  /* When the window is wider than 768px (Tablets/Desktops)... */
  @media (min-width: 768px) {
	.work-container {
	flex-direction: row;    /* side-by-side */
	align-items: flex-start;
	}
    .quotes-container {
      flex-direction: row;   /* Switch layout to side-by-side */
    }
  }
  .video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}