/* I. Main Project Work-bio and Work-visuals
--------------------------------------------------------------------------------*/ 
* {
      margin: 0;padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    #preamble {
      padding: 35px;
    }

    a {
      /* Target the links within the affiliations div */
      color: inherit;
      /* Inherit the color from the parent */
      text-decoration: none;
      /* Remove the underline */
    }

    @font-face {
      font-family: 'EuclidFlex-Light';
      src: url('fonts/EuclidFlex-Light.otf') format('opentype');
    }

    @font-face {
      font-family: 'EuclidFlex-Bold';
      src: url('fonts/EuclidFlex-Bold.otf') format('opentype');
    }

  
    body {
      color: white;
      font: normal normal 62.5%/1em;
      font-family: 'EuclidFlex-Light', sans-serif;
      letter-spacing: 0.5px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
 color: #DFF49A;}
	  
	  h1 {
      color: #DFF49A;
      font-size: 18pt;
	  line-height: 1em;
      padding-bottom: 0;
      font-family: 'EuclidFlex-Bold', sans-serif;
      padding-bottom: 0.5em;
    } 
	  
   h2 {
      font-size: 14pt;
      padding-bottom: 2em;
	  font-family: 'EuclidFlex-Light', sans-serif;
    }

   h3{color: white;
      font-size: 12pt;
	   padding-bottom: 10px;
    }

   p {
      font-size: 11pt;
      padding-bottom: 1em;
      font-family: 'EuclidFlex-Light', sans-serif;
      line-height: 21px;
      /* Default line height for <p> tags */
    }
	  
    img {
      border-style: none;
      vertical-align: bottom;
    }

    audio,
    canvas,
    video {
      display: inline-block;
    }


	  canvas{  
		  position: fixed; 
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1; 
			}
   #project-container {
      min-height: 100%;
      position: relative;
		
    }	  
    #main-content {

  min-height: 100vh; 		
		
   }

	 
    #main-content::after {
      content: "";
      display: table;
      clear: both;
    }

  
    section#content .project-header img {
		margin: 40px;
      width: 120px;
    }

    section#content #preamble,
    section#content article {
      max-width: 1200px
    }

   
    #work-bio {
      /* Removed position: fixed and related properties */
      width: 48.5%;
		position: fixed;
		padding: 10px;
    }
	 #work-bio::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
		 bottom:10px;
    background: linear-gradient(to bottom, rgba(106, 220, 176, 0.5) 0px, #47528e 100%);
    z-index: -1;
    border-top-left-radius: 110px;
	border-bottom-right-radius: 110px;
	 }
	  
   .bold-text {
      font-family: 'EuclidFlex-Bold', sans-serif;
	   color: #DFF49A;
    }

     #project-links {
      list-style: none;
		 margin-bottom: 115px;
    }

    section#content #work-bio #project-links li {
		font-size: 11pt;
      float: center;
      margin-left: 35px;
		margin-bottom: 10px;
		
    }
#project-links li img {
  width: 18px; /* Adjust the size as needed */
  height: auto;
  vertical-align: top; /* Align icon with the text */
  margin-right: 5px; /* Add some space between the icon and the link text */
}
    #work-visuals {
     float: right;
  width: 50%; /* Adjust as needed */
  clear: both; 
  margin-right: 0px; /* Add right margin for spacing */
  margin-left: auto; /* Push to the right */ 

    }


    #work-visuals ul {
      list-style: none;
      /* Remove list styling */
      padding: 0;
      /* Remove default padding */
      margin: 0;
      /* Remove default margin */
    }

    #work-visuals ul li {
      width: 100%;
      /* Ensure each <li> takes full width */
      margin: 0;
      margin-bottom:1px;
    }

    #work-visuals ul li img {
      width: 100%;
    }

    #work-visuals .slideshow-container img {
      width: 100%;
      object-fit: cover;
    }
	  
.slideshow-container {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 550px;
      margin-bottom: 1px;
    }

    .slideshow-container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }
	  
    .slideshow-container img:first-child {
      display: block;
    }

.slideshow-container .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  z-index: 1;
	color: transparent;
	  background-color: #6ADCAB; 
box-shadow: 0 0 0 0px #6ADCAB; /* Initial "border" with 0px width */
  transition: box-shadow 0.2s ease; /* Add transition for smooth effect */
}

.slideshow-container .arrow-left {
  left: -10px;
}

.slideshow-container .arrow-right {
  right: -10px;
}

.slideshow-container .arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45px; /* Adjust as needed */
  height: 45px; /* Adjust as needed */
  background-image: url("http://mshan.ca/img/btn_expand.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.slideshow-container .arrow-left::before {
  transform: translate(-50%, -50%) scaleX(-1); /* Flip for left arrow */
}
 
.slideshow-container .arrow:hover {
  box-shadow: 0 0 0 15px #6ADCAB; /* Expand "border" to 15px on hover */
}

/*II. Work-visuals <li>Bookcover</li>
--------------------------------------------------------------------------------*/
      .book-container {
		   background-color: #c4bec6;
		  padding-top: 5px;
		  padding-bottom: 5px;

      }

      .book {
        position: relative;
        display: block;
        width: 340px;
        height: 450px;
        margin: 5% auto;
        border-radius: 2px 4px 4px 2px;
        background: linear-gradient(45deg, #DAD5DC 0%, #f2ebf4 100%);
        font-family: acumin-pro, sans-serif;
        -webkit-box-shadow: 13px 13px 8px 0px rgba(151, 146, 153,0.6);
        -moz-box-shadow: 13px 13px 8px 0px rgba(151, 146, 153,0.6);
        box-shadow: 13px 13px 8px 0px rgba(151, 146, 153,0.6);
        font-weight: 400;
        color: #2b2b2b;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: -webkit-transform .5s;
        -moz-transition: -moz-transform .5s;
        transition: transform .5s;
      }

      .book:hover {
        -webkit-transform: rotate3d(0,1,0,35deg);
        -moz-transform: rotate3d(0,1,0,35deg);
        transform: rotate3d(0,1,0,35deg);
      }

      .book > div,
      .front > div {
        display: block;
        position: absolute;
      }

       .front {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 0% 50%;
        -moz-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        -webkit-transition: -webkit-transform .5s;
        -moz-transition: -moz-transform .5s;
        transition: transform .5s;
        -webkit-transform: translate3d(0,0,20px);
        -moz-transform: translate3d(0,0,20px);
        transform: translate3d(0,0,20px);
        z-index: 10;
      }

      .front > div {
        width: 340px;
        height: 450px;
      }

      .left-side{
        width: 40px;
        left: -20px;
        height: 450px;
        background-color: rgba(232,229,234);
        -webkit-transform: rotate3d(0,1,0,-90deg);
        -moz-transform: rotate3d(0,1,0,-90deg);
        transform: rotate3d(0,1,0,-90deg);
      }

      /* Remove the SVG elements */
      .cover svg {
        display: none; 
      }

      .cover .num-up{
        position: absolute;
        top: 64px;
        left: 47px;
        letter-spacing: 50px;
        transform: rotate(-90deg);
      }

      .cover .num-down{
        position: relative;
        top: 65px;
        left: -95px;
        transform: rotate(-90deg);
      }

      .author{
        font-family: acumin-pro, sans-serif;
        font-weight: 100;
        position: absolute;
        top: 380px;
        left: 50px;
        opacity: .8;
      }

      .front > div {
        border-radius: 0 3px 3px 0;
        box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1);
      }

       .front:after {
        content: '';
        position: absolute;
        top: 1px;
        bottom: 1px;
        left: -1px;
        width: 1px;
      }

      .cover:after {
        content: '';
        position: absolute;
        top: 0;
        left: 10px;
        bottom: 0;
        width: 3px;
        background: rgba(0,0,0,0.1);
        box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
      }

      .book-container h2 {
        width: 350px;
        height: 40px;
        color: #2b2b2b;
        font-size: 15px;
        line-height: 40px;
        padding-right: 10px;
        text-align: right;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotate(90deg) translateY(-40px);
        -moz-transform: rotate(90deg) translateY(-40px);
        transform: rotate(90deg) translateY(-40px);
      }

      /* Add background image to the cover */
      .cover {
        background: white; 
        background-size: cover; /* or 'contain' depending on your needs */
        background-repeat: no-repeat;
      }

      .left-side h2 span:first-child {
        font-weight: 400;
        font-size: 13px;
        padding-right: 20px;
      }

	
/* Master Footer
--------------------------------------------------------------------------------*/
    footer#project-footer {
		display: inline-block;
      max-width: 1450px;
      width: 100%;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      letter-spacing: 1px;
      position: relative;
      text-align: center;
      /* Center align the entire footer content */
    }

    .footer-content {
      border-top: 1px solid white;
      padding-top: 15px;
      text-align: center;
      font-family: 'EuclidFlex-Light', sans-serif;
      height: 77px;
      font-size: 14px;
    }

    footer#project-footer ul#affiliations {
      text-align: left;
      /* Explicitly set text alignment to left */
      list-style: none;
    }

    footer#project-footer ul#affiliations li {
      display: inline-block;
      float: left;
      /* Add this back in */
    }

    .legal {
      float: right;
      /* Float copyright to the right */
      text-align: right;
      /* Align the text to the right */
    }

    .copyright-logo {
      display: inline-block;
      width: 50px;
    }

    .copyright-logo img {
      width: 100%;
    }
		


/* @media 1200, 900, 475px
--------------------------------------------------------------------------------*/
    @media screen and (max-width:1200px) {
      footer#project-footer .footer-content {
        margin: 0 35px;
      }

      @media screen and (max-width:768px) {
        section#content #work-bio {
          float: none;
          position: relative;
          width: auto;
        }

        section#content #work-visuals {
          float: none;
          width: auto;
        }

        section#content section {
          height: auto !important;
        }

        section#content section article {
          padding: 60px 35px;
        }

   
        .footer-content {
          padding-top: 15px;
          font-size: 14px;
          text-align: center;
        }

        ul#affiliations {
          display: none;
          /* Hide the ul */
        }

        /* You can also optionally hide the individual list items */
        ul#affiliations li {
          display: none;
        }

        .copyright-logo,
        .legal {
          float: none;
          /* Remove floats */
          display: block;
          /* Make each element a block-level element */
          width: 100%;
          /* Make each element take full width */
          text-align: center;
          /* Align the text to the right */
        }

        .copyright-logo {
          padding-bottom: 15px;
          margin: 0 auto;
          /* Center the logo horizontally */
        }

        .copyright-logo img {
          width: 50px;
          margin: 0 auto;
          /* Center the logo horizontally */
        }
      }

      @media screen and (max-width:460px) {
        section#content {
          padding-bottom: 234px;
        }

        section#content #photography #example-photographs li {
          min-height: 50px;
        }

        footer#project-footer .footer-content {
          padding-top: 20px;
        }

        ul#affiliations {
          display: none;
          /* Hide the ul */
        }

        /* You can also optionally hide the individual list items */
        ul#affiliations li {
          display: none;
        }


        footer#project-footer .legal {
          text-align: center;
          width: auto;
        }

      }