body {
	background-color: black; 
    color: white;
	text-align: left;
	font-size: 1.18em;
	font-family: Courier;
	font-weight: normal;
	margin-left: 10%;
	margin-right: 10%;
    max-width: 100%;
    overflow-x: visible;
}
/*Page Title*/
h1 { 
	font-size: 2.4em;
	text-indent: 0%;
	margin-left: 5%;
	margin-right: 5%;
	font-family: "IBM Plex Mono", monospace;
	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: 8%;
	text-align: left;
	font-size: 1.2em;
	font-family: Courier;
	line-height:26px;
	font-weight: normal;
	margin-left: 8%;
	margin-right: 8%;
}

/*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; 
	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;
}

.page-wrapper {
    max-width: 1500px;
}

/* banner */
.banner {
    display: block;
    max-width: 100%;
    height: auto;
}

.banner-wrapper {
    position: relative;
    overflow: hidden;

    background-image: url(border_top.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 3208px 42px;

    display: flex;
    justify-content: center;

    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 45px;
	z-index: -2;
}
.content-area {
    position: relative; /* Anchor for the side border */
    padding-left: 5%;
    padding-right: 5%;
}

.content-area::after {
    content: "";
    position: absolute;
    left: 0px;
    top: -58px;      /* Starts exactly at the bottom of the banner */
    bottom: 0;   /* Ends exactly when the text ends */
    width: 50px;
    
    background-image: 
        url(border_left_cap.png), 
        url(border_left.png);
    
    background-position: 
        top left, 
        top 300px left; /* Match the pixel height of your cap image */
    
    background-repeat: 
        no-repeat, 
        repeat-y;
        
    background-size: 50px auto;
    z-index: -1;
    pointer-events: none;
}
.content-area::before {
    content: "";
    position: absolute;
    right: 0px;
    top: -58px;      /* Starts exactly at the bottom of the banner */
    bottom: 0;   /* Ends exactly when the text ends */
    width: 50px;
    
    background-image: 
        url(border_right_cap.png), 
        url(border_right.png);
    
    background-position: 
        top right, 
        top 300px right; /* Match the pixel height of your cap image */
    
    background-repeat: 
        no-repeat, 
        repeat-y;
        
    background-size: 50px auto;
    z-index: -1;
    pointer-events: none;
}

.work-container {
	border: 2px dotted;
	border:white;
	border: solid;
	background-color: black;
	margin-left: -7%;
	margin-right: -7%;
    display: flex;             /* Enables Flexbox layout */
	flex-direction: row;    /* side-by-side */
	align-items: flex-start;
	align-items: center;
    gap: 20px;                 /* Adds space between the quote boxes */
  }

.work-card {
    padding: 20px;
	min-width: 0;
    flex: 2 1 0;                   
  }

 .work-card.copy {
		width: 60%;
		max-width: 500px;
		min-width: 310px;
    flex: 1 1 0;   
  }

.quotes-container {
	margin-left: -15%;
	margin-right: -15%;
    display: flex;   
    justify-content: center;
	flex-wrap: wrap;
     /*flex-direction: column;    */
    gap: 30px;                
    padding: 0px;
  }

  .quote-card {
    padding: 20px;
	width: 70%;
	max-width: 550px;
	min-width: 325px;
	/*border: 2px solid white;*/
	flex: 1 1 300px;   
	background-color: black;
    background-image: url(critic_laurel.png);
	background-repeat: no-repeat;
    background-size: 100%; 
	background-position: bottom center;
	display: flex;
	flex-direction: column;
    justify-content: center;
  }

  /* Styling the text */
  .quote-text {
	margin-left: 11%;
	margin-right: 11%;
	text-indent: 8%;
    font-style: italic;
    justify-content: center;
	margin-top: auto;
	margin-bottom: auto;
  }

  .quote-author {
	margin-left: 15%;
	margin-right: 15%;
    font-weight: bold;
	text-align: center;
    margin-top: auto;
    margin-top: 10px;
    margin-bottom: 5px;
  }
  
  @media (max-width: 1250px) {
      .nav_item.desktop_only{  display:none }
  }

  @media (max-width: 1100px) {
      body {
	    margin-left: 5%;
	    margin-right: 5%;
      }
      .nav_item.desktop_only{  display:none }
      .quotes-container {
	    margin-left: -9%;
	    margin-right: -9%;
      }
      .quote-card {
        min-height: 190px;
       }
       .work-container {
            flex-direction: column;    /* Default to stacked (for mobile) */
	        align-items: flex-start;
	        align-items: center;
            gap: 0px;
            padding-top: 15px;
        padding-bottom: 30px;
	    }
        .work-card {
    padding: 0px;
		width: 90%;               
  }
	.work-card.copy {
    padding: 0px;
		width: 80%;
		max-width: 900px;
		min-width: 310px;
	}
  }

  @media (max-width: 768px) {
      body {
	    margin-left: 0%;
	    margin-right: 0%;
      }
      .quotes-container {
	    margin-left: 0%;
	    margin-right: 0%;
      }
      h1{
	    margin-left: 2%;
	    margin-right: 2%;

      }
      .banner-wrapper {
        padding-left: 0%;
        padding-right: 0%;
      }
  }
  .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%;
}


.navbar {
    display: flex;
    flex-direction: row;
    max-height: 55px;
    align-items: stretch;
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 0;
    margin: 0;
    z-index: 1000;
    justify-content: flex-end;
}
.nav_item{
	flex: 1 1 auto;   
    position: relative;
    padding-bottom: 16px;
    z-index: 1002;
	text-align: center;
    overflow: hidden;
    background-image: url(button_bottom.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 1413px 296px;
}
.nav_item img {
    width: auto; 
    height: 45px;
}
.nav_item.desktop_only{
}

.navbar:after {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    bottom: 0;
    
    background-image: 
        url(button_left.png), 
        url(button_right.png);
    
    background-position: 
        bottom left, 
        bottom right; 
    
    background-repeat: 
        no-repeat, 
        no-repeat;
        
    background-size: 20px 283px;
    z-index: 1003;
    pointer-events: none;
}