@font-face {
  font-family: 'Bull5';
  /* If your CSS is in the same folder as index.html, try: */
  src: url('../fonts/min/Bull5.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

html, body {
  overflow-x: hidden;
}

.chapter-content{
  text-align:left;
  color: #151515;
  margin-right: 20px; 
  /* padding-bottom: 100px; */
}
.sidenote {
  font-size: 0.8rem;
  color: #555;
  margin-top: 0px; /* Adjust as needed */
}

.chapter-sidenote p{
  display:flex;
  flex-direction: column;
  flex: 1;
  font-family: "Bull5", mono;
  padding-top: 0px;
  font-size: 0.7rem;
  line-height: 17px;
}

sup[data-note] {
  font-family: "Bull5", mono;
  color: rgb(0, 0, 0);
size: 0.4rem;
}

.chapter-sidenote a {
  white-space: normal;
  word-wrap: break-word; /* For older browsers */
  overflow-wrap: break-word;
}

.chapter {
  position: relative; 
  margin-bottom: 2rem;
}

.chapter-sidenote {
  padding-top: 5px;
  font-size: 0.8rem;
  color: #555;
  width: 550px;
  position: absolute; 
  right: 0;        
  
}



body {
  background-color: #ffffff;
  font-family: "Bull5", mono;
  font-style: normal, italic;
  font-weight: 400;
}

h1 {
  font-family: "Bull5", mono;
  font-weight: 500;
  font-size: 2rem;
  font-style: normal;
  margin-bottom: -40px;
  margin-top: 50px;
  color: #151515;
  margin-left: 50px;
}

.title {
  font-family: "Bull5", mono;
  font-weight: 500;
  font-size: 2rem;
  font-style: normal;
  margin-bottom: -40px;
  margin-top: 50px;
  padding-top: 10px;
  color: #151515;
  margin-left: 50px;
}

.subhead {
  font-family: "logic-monospace", mono; /* or whichever font you prefer */
  font-size: 1.5rem;           /* adjust to desired size */
  font-weight: 500;          /* semi-bold style */
  font-style: italic;        /* or normal, depending on your taste */
  color: #151515;            /* text color */
  /* margin-lef: 80px;         */
  margin-bottom: 50px;       /* spacing below the heading */

}

h2 {
  font-family: "Bull5", mono;
  font-weight: 500;
  font-size: 1.5rem;
  font-style: normal;
  margin-bottom: 10px;
  margin-top: 50px;
  color: #151515;
  margin-left: 50px;
}

h3{
  font-family: "Bull5", mono;
  font-weight: 500;
  font-size: 1.3rem;
  font-style: normal;
  margin-bottom: 10px;
  margin-top: 20px;
  color: #151515;
  margin-left: 100px;
}
/* Navigation */
nav {
  background-color: #ffffff;
  padding: 10px 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

.open-on-mobile{
  display: none;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  color: #686868;
}

nav ul li {
  margin: 0 25px;
  color: #686868;
}

nav ul li a {
  color: #686868;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.2rem;
  transition: color  0.6s, transform 0.3s;
}

nav ul li a:hover {
  color: red;
  transform: translateY(-3px);
}
.bibliography p{
  width: 140%;
  font-family: "Bull5", mono;
  font-weight: 500;
  font-size: 1rem;
  font-style: normal;
  margin-bottom: 40px;
  overflow-wrap:break-word;


}

main p {
  font-family:Arial, Helvetica, sans-serif;
  font-weight: 300;
  margin-left: 50px;
  margin-right: 50px;
  /* line-height:5px; */
  /* margin-bottom: 1px; */
  font-size: 1rem;
  line-height: 1.3rem;
}


article {
  /* padding-right: 300px; */
  position: relative;
  width: 70%;
  padding-top: 4rem;
  /* margin-bottom: -1rem; */
}

  @media (max-width: 768px) {

    .marquee-container5 {
        width: 100vw !important;
    }
    

    .title {
      margin-left: 20px;
      font-size: 2rem;
    }

    .subhead{
      font-size: 1.2rem;
      margin-left: 20px;
    }

    h2{
      margin-left: 20px;
    }
    h3{
      margin-left: 72px;
    }
/* Make articles take full width */
article.chapter {
  width: 100vw;

}

/* Remove the reserved margin for main content */
.chapter-content {
  margin-right: 0 !important;
  margin-bottom: 20px;
}

/* Let the side notes fall in normal flow below the main text */
.chapter-sidenote {
  position: static !important;
  width: auto !important;
  margin-top: 1rem;
}

    .article {
      width:auto;
    }

  nav ul {
    display:none;
    flex-direction: column;
  }

  span.is-closed{
    display:block;
  }

  span.is-opened{
    display:none;
  }


  button.open-on-mobile.is-opened span.is-closed{
    display:none;
  }

  button.open-on-mobile.is-opened span.is-opened{
    display:block;
  }

  button.open-on-mobile.is-opened + ul{
   display:flex; 
  }

  nav ul li {
    margin: 10px 0;
    margin-left: 10px;
    display: block;
  }

  nav ul li a {
    font-size: 1rem;
  }

  nav {
    margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background:white; /* or transparent */
  font-size: 1rem;
  font-family: "Bull5", monospace; /* or your custom font */

  }

  .open-on-mobile{
    margin-left: 10px;
    display: block;
    margin: 10px;
    padding: 0;
    border: none;
    box-shadow: none;
    background:white; /* or transparent */
    font-size: 1rem;
    font-family: "Bull5", monospace; /* or your custom font */
  
  }

  .chapter-grid {
    grid-template-columns: 1fr;
  }
  .chapter-sidenote {
    margin-top: 1rem;
    max-width: 100%;}

    main p {
      margin-left: 20px;
    margin-right: 20px;
    }

  }






/* ======================== */
/* INFINITE CAROUSEL STYLES */
/* ======================== */


   .marquee-container1 {
    /* width:1200px;
    overflow: hidden;
    position: relative;
    margin: 2rem auto; /* Center the carousel with some vertical spacing */
    /* padding: 0; */
      rotate: -4deg;
      width: 100vw;        /* or 100% if you prefer */
      margin-top: 10px;           /* remove the auto-centering */
      padding: 0;
      overflow: hidden;    /* keep the overflow hidden so no scrollbars appear */
      position: relative;
  }

  .marquee-track1 {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;

    animation: marquee1 5s linear infinite;
  }
  
  .marquee-track1:hover {
    animation-play-state: paused;
  }
  
  @keyframes marquee1 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-5500px);
    }
  }
  
  .img-wrapper {
    position: relative;
    margin: 0;
    padding: 0;
  }
  
  .img-wrapper img {
    display: block;  /* remove inline gaps if any */
    margin: 0;
    padding: 0;
    width: auto;     /* if they have various widths, that’s fine, 
                        but double-check the total adds to 8437px */
    height: 600px;
    object-fit: cover;
  }
  
  .img-overlay {
    position: absolute;
    inset: 0; /* top:0, right:0, bottom:0, left:0 */
    background:black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .img-wrapper:hover .img-overlay {
    opacity: 1;
  }
/* ======================== */
/* INFINITE CAROUSEL STYLES */
/* ======================== */

/* Container to hide the overflow and define the visible area. 
   800px is used to match the code that translates from 0 to -800px. */
.marquee-container2 {
  rotate: -1.5deg;
  width: 100vw;        /* or 100% if you prefer */
  margin-top: 20px;
  margin-bottom: -30px;           /* remove the auto-centering */
  padding: 0;
  overflow: hidden;    /* keep the overflow hidden so no scrollbars appear */
  position: relative;
}

/* The track: 10 images, each 160px wide => 1600px total. 
   We animate from translateX(0) to translateX(-800px) = half the track. */
.marquee-track2 {
  display: flex;
  margin: 0;
  padding: 0;
  width:auto;
  animation: marquee2 10s linear infinite;
}

/* Pause the marquee if hovered. */
.marquee-track2:hover {
  animation-play-state: paused;
}

@keyframes marquee2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1800px);
  }
}

/* Wrapper for each image, so we can position the overlay. */
.img-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
}

/* Style each image (160x160, round corners). */
.img-wrapper img {
  width: auto;
  height: 600px;
  object-fit: cover;
  display: block;
}

/* The overlay that appears on hover. */
.img-overlay {
  position: absolute;
  inset: 0; /* top:0, right:0, bottom:0, left:0 */
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Fade in the overlay when hovering over the .img-wrapper. */
.img-wrapper:hover .img-overlay {
  opacity: 1;
}


a {
  color: blue;       /* normal state */
}

a:visited {
  color: blue   /* after you click it */
}

a:hover {
  color: red;        /* when you hover over it */
}

a:active {
  color: black    /* when it's being clicked */
}

/* ======================== */
/* INFINITE CAROUSEL STYLES */
/* ======================== */

/* Container to hide the overflow and define the visible area. 
   800px is used to match the code that translates from 0 to -800px. */
   .marquee-container3 {
    rotate: 3deg;
    width: 100vw;        /* or 100% if you prefer */
    margin-bottom: -80px;
    margin-top: 10px;           /* remove the auto-centering */
    padding: 0;
    overflow: hidden;    /* keep the overflow hidden so no scrollbars appear */
    position: relative;
  }
  
  /* The track: 10 images, each 160px wide => 1600px total. 
     We animate from translateX(0) to translateX(-800px) = half the track. */
  .marquee-track3 {
    display: flex;
    margin: 0;
    padding: 0;
    animation: marquee3 10s linear infinite;
  }
  
  /* Pause the marquee if hovered. */
  .marquee-track3:hover {
    animation-play-state: paused;
  }
  
  @keyframes marquee3 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-6411px);
    }
  }
  
  /* Wrapper for each image, so we can position the overlay. */
  .img-wrapper {
    position: relative;
    margin: 0;
    padding: 0;
  }
  
  /* Style each image (160x160, round corners). */
  .img-wrapper img {
    width: auto;
    height: 600px;
    object-fit: cover;
    display: block;
  }
  
  /* The overlay that appears on hover. */
  .img-overlay {
    position: absolute;
    inset: 0; /* top:0, right:0, bottom:0, left:0 */
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  /* Fade in the overlay when hovering over the .img-wrapper. */
  .img-wrapper:hover .img-overlay {
    opacity: 1;
  }

  /* ======================== */
/* INFINITE CAROUSEL STYLES */
/* ======================== */


.marquee-container4 {
  /* width:1200px;
  overflow: hidden;
  position: relative;
  margin: 2rem auto; /* Center the carousel with some vertical spacing */
  /* padding: 0; */
    rotate: -2deg;
    width: 100vw;        /* or 100% if you prefer */
    margin-top: 50px;           /* remove the auto-centering */
    padding: 0;
    overflow: hidden;    /* keep the overflow hidden so no scrollbars appear */
    position: relative;
}

.marquee-track4 {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  animation: marquee1 10s linear infinite;
}

.marquee-track4:hover {
  animation-play-state: paused;
}

@keyframes marquee4 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-5795px);
  }
}

.img-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
}

.img-wrapper img {
  display: block;  /* remove inline gaps if any */
  margin: 0;
  padding: 0;
  width: auto;     /* if they have various widths, that’s fine, 
                      but double-check the total adds to 8437px */
  height: 600px;
  object-fit: cover;
}

.img-overlay {
  position: absolute;
  inset: 0; /* top:0, right:0, bottom:0, left:0 */
  background:black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}

.img-wrapper:hover .img-overlay {
  opacity: 1;
}

  /* ======================== */
/* INFINITE CAROUSEL STYLES */
/* ======================== */


.marquee-container5 {
  /* width:1200px;
  overflow: hidden;
  position: relative;
  margin: 2rem auto; /* Center the carousel with some vertical spacing */
  /* padding: 0; */
    rotate: 2deg;
    width: 66vw;        /* or 100% if you prefer */
    margin-bottom: 30px;
    margin-top: 50px;           /* remove the auto-centering */
    padding: 0;
    overflow: hidden;    /* keep the overflow hidden so no scrollbars appear */
    position: relative;
}

.marquee-track5 {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  animation: marquee1 25s linear infinite;
}

.marquee-track5:hover {
  animation-play-state: paused;
}

@keyframes marquee5 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-5612px);
  }
}

.img-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
}

.img-wrapper img {
  display: block;  /* remove inline gaps if any */
  margin: 0;
  padding: 0;
   /* if they have various widths, that’s fine, 
                      but double-check the total adds to 8437px */
  height: 600px;
  object-fit: cover;
}

.img-overlay {
  position: absolute;
  inset: 0; /* top:0, right:0, bottom:0, left:0 */
  background:black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}

.img-wrapper:hover .img-overlay {
  opacity: 1;
}

/* ======================== */
/* INFINITE CAROUSEL STYLES */
/* ======================== */


.marquee-container6 {
  /* width:1200px;
  overflow: hidden;
  position: relative;
  margin: 2rem auto; /* Center the carousel with some vertical spacing */
  /* padding: 0; */
    rotate: 2deg;
    width: 100vw;        /* or 100% if you prefer */
    margin-bottom: 0px;
    margin-top: 50px;           /* remove the auto-centering */
    padding: 0;
    overflow: hidden;    /* keep the overflow hidden so no scrollbars appear */
    position: relative;
}

.marquee-track6 {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  animation: marquee1 25s linear infinite;
}

.marquee-track6:hover {
  animation-play-state: paused;
}

@keyframes marquee6 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-5612px);
  }
}

.img-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
}

.img-wrapper img {
  display: block;  /* remove inline gaps if any */
  margin: 0;
  padding: 0;
   /* if they have various widths, that’s fine, 
                      but double-check the total adds to 8437px */
  height: 600px;
  object-fit: cover;
}

.img-overlay {
  position: absolute;
  inset: 0; /* top:0, right:0, bottom:0, left:0 */
  background:black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}

.img-wrapper:hover .img-overlay {
  opacity: 1;
}

.marquee-track1:hover,
.marquee-track2:hover,
.marquee-track3:hover,
.marquee-track4:hover,
.marquee-track5:hover,
.marquee-track6:hover {
  animation-play-state: paused !important;
}