/* styles.css 
   Project: 
   Author: 
   Date: 
	
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Open+Sans&family=Raleway&family=Roboto&display=swap');

/*main css*/

* {
  box-sizing: border-box;
}

img, video {
  width: 100%;
  display: block;
}

audio {
  display: block;
}


/*link style*/

a {
  text-decoration: none;
  color: darkred;
}

a:visited {
  color: gray;
}

a:hover, a:active {
  color: darkgray;
} 

body, html {
  font-family: 'Lato', sans-serif; 

}


h1, h2, h3, .pullquote {
  font-family: 'Open Sans', sans-serif;

}

header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: -1;
  background-color: black;
  /*max-height: 600px;*/
}

header img {
  /* this opacity makes the header image dark so you can read the headline text more easily. remove the opacity if you do not have your headline on top of the image.*/
  opacity: 0.6;
}

.title1 {
  position: absolute;
  width: 100%;
  top: 20%;
  color: white;
  text-align: center;
  padding: 3%;
}

.title1 h1 {
  font-size: 5.1em;
  margin-bottom: -4px;
 font-family: 'Playfair Display', serif;
  font-size: 6rem;
  color: #ffe08a;
  letter-spacing: 0;
  text-shadow: 0 4px 8px rgba(0,0,0,0.6);
}



.title1 h2 {
  font-size: 1em;
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-style: italic;
  color: rgba(255,224,138,0.8);
  text-shadow: 0 4px 8px rgba(0,0,0,0.6);
}

.title1 h3 {
  margin-top: 10%;
  font-size: 1.2em;
  font-style: italic;
  color: rgba(255,224,138,0.8);
  text-shadow: 0 4px 8px rgba(0,0,0,0.6);
}

.title2 {
  width: 100%;
  color: darkslategray;
  text-align: center;
  padding: 3% 10%;
}

.title2 h1 {
  font-size: 4.7em;
  margin-bottom: -4px;
}

.title2 h2 {
  font-size: 2em;
}

.title2 h3 {
  margin-top: 10%;
  margin-bottom: 0;
  font-size: 1.1em;
  font-style: italic;
}

.content {
  width: 100%;
  background-color: #fffde7;

}

.maintext {
  max-width: 640px;
  margin: auto;
  color: darkslategray;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
  padding: 1%;

}

.intro {
  background-color: rgba(255, 224, 178, 0.3);
}






.chapter1 {
  
}


.video-figure {
  /* 上下各留 1.5em 空白，不会挤到前后文字 */
  margin: 1.5em auto;
  /* 设个百分比宽度，响应式；并限制最大宽度 */
  width: 90%;
  max-width: 480px;     /* 你觉得合适的最大值 */
  text-align: center;   /* 如果有 figcaption 文本，也居中 */
}

.video-figure__media {
  display: block;       /* 块级，让 margin auto 生效 */
  width: 100%;          /* 铺满父容器宽度 */
  height: auto;
  border-radius: 8px;   /* 圆角 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);  /* 柔和阴影 */
}

.video-figure__caption {
  margin-top: 0.5em;
  font-size: 0.9em;
  color: #555;
}


/* —— 视频＋徽章 容器 —— */
.video-with-badge {
  position: relative;
  max-width: 480px;       /* 你要的宽度上限，也可以 100% */
  margin: 2em auto;       /* 上下留空、水平居中 */
}

.video-with-badge__media {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* —— “假”圆形按钮 —— */
.video-with-badge__badge {
  position: absolute;
  /* 垂直居中视频 */  
  top: 50%;  
  transform: translateY(-50%);  
  /* 去掉 right，改用 left，把徽章推到视频左侧 */  
  left: -80px;    /* 负值可以让它悬在视频边外，根据你想要的距离改 */  
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: url('../img/diana.jpg') no-repeat center center;
  background-size: contain;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: default;
  transition: transform .2s;
  z-index: 2;
}
.video-with-badge__badge:hover {
  transform: translateY(-50%) scale(1.1);
}



.chapter2{
  
;




}

.chapter3{

  background-color: rgba(225,248,255,0.8)



;

}



.pullquote {
  width: 50%;
  font-size: 1.4em;
  line-height: 1.6em;
  font-style: italic;
  text-align: left;
}

.name {
  font-size: 0.7em;
  text-align: center;
  line-height: 0.1em;
  padding-bottom: 30px;
}

.left {
  float: left;
  padding-right: 20px;
  margin-left: -40px;
}

.right {
  float: right;
  padding-left: 20px;
  margin-right: -40px;
}

.floatingpic {
  width: 50%;
}

.floatingpic audio {
  width: 100%;
  margin-top: 5px;
}

.floatingcap {
  margin-top: 0px;
  font-size:  0.8em;
  text-align: center;
}

.sectionhead {
  text-align: center;
  color: darkslategray;
}

.bigphoto {
  position: relative;
}

.photocaption {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding-left: 1%;
  color: white;
  background-color: rgba(0,0,0,0.4);
}

.sidebyside {
  display: flex;
}

.photoleft {
    flex-direction: row;
}

.photoright {
    flex-direction: row-reverse;
}

.sidephoto {
  flex: 2;
}

.sidecaption {
  flex: 1;
  background-color: black;
  color: white;
  font-size: 1.2em;
  display: grid;
  align-items: center;
  text-align: center;
  padding: 20px 40px;
}

.photogrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

.gridpic {
  position: relative;
}

.gridpic .photocaption {
  display: none;
}

.cycle-slideshow {
  max-width: 700px;
  margin: auto;
}



.slidewrapper {
  position: relative;
  max-width: 700px;
  margin: auto;
 ;

}



.slides {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: -1;
}

.bottomcredit {
  position: absolute;
  right: 0px;
  bottom: 0px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10px;
  color: white;
}

.backgroundimage {
  height: 100vh;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: -1;
}

.backgroundimage img {
  height: 100%;
  object-fit: cover;
}

.textbox {
  max-width: 640px;
  margin: 10em auto;
  background-color: rgba(255,224,204,0.8);
  color: whitesmoke;  
  padding: 10px;
}



.videoshow{
  position: relative;
  max-width: 700px;
  margin: auto;

}

.googlemap {
  /*overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  max-width: 700px;
  margin: auto;*/
  max-width: 700px;     /* 根据你文章宽度来定 */
  margin: 2em auto;     /* 上下留白、水平居中 */
  border-radius: 8px;   /* 圆角 */
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  overflow: hidden;     /* 圆角处剪掉 */
}

.googlemap iframe {
/*  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;*/
  width: 200%;
  height: 500px;        /* 或者更高，看需要 */
  border: 0;
}

.slide img {
  display: block;      /* 转换为块级元素 */
  margin: 0 auto;      /* 水平居中 */
  max-width: 80%;      /* 最大宽度为容器的 80% */
  height: auto;        /* 根据比例自适应高度 */
}


.youtube {
  max-width: 700px;
  margin: auto;
}

.responsivecontainer {
  position: relative; 
  padding-bottom: 56.25%; 
  padding-top: 30px; 
  height: 0; 
  overflow: hidden;
}

.responsivecontainer iframe, .responsivecontainer object, .responsivecontainer embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}

.clickhere {
  font-style: italic;
  font-size: 0.7em;
  text-align: right;
  padding-right: 1%;
}

.voxpop {
  max-width: 700px;
  margin: auto;
}

.voxgrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

.person {
  border-radius: 5px;
  box-shadow: 2px 3px 3px lightslategrey;
  overflow: hidden;
}

.person audio {
  width: 100%;
  display: block;
}

.headshot {
  position: relative;
  text-align: center;

}

.popup {
  cursor: pointer;
}

.infographic {
  max-width: 700px;
  margin: auto;
  margin-top: 0 !important;
}

/* Slideshow container */
.slideshow-container {
  max-width: 650px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

.mySlides img {
    width: 100%;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.slidetext {
  color: #f2f2f2;
  font-size: 15px;
  padding: 12px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dots {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  text-align: center;
}

.active, .dot:hover {
  background-color: #717171;
}

 
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/*footer */

footer {
  background-color: black;
  color: white;
  padding: 1%;
  text-align: right;
}

/*popup modal*/

.overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: scroll;
  display: none;
  z-index:  10;
}

.modal {
  width: 70%;
  margin: 2% auto;
}

.closer {
  position: absolute;
  right: 1vh;
  top:  1vh;
  width: 10%;
  cursor: pointer;
}

/*media query for responsive design */

@media only screen and (max-width: 900px) {

  .title1 {
    top: 5%;
  }

  .title1 h1 {
    font-size: 3.5em;
  }

  .title1 h2 {
    font-size: 1.5em
  }

  .title1 h3 {
    font-size: 1.1em;
  }

}


@media only screen and (max-width: 800px) {

  .pullquote {
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    display: none; /* remove this line if you want the pullquotes to display on mobile*/ 
  }

  .left, .right {
    margin: 0px;
    padding: 10px;
  }

  .floatingpic {
    width:  100%;
    margin: 0px;
    padding:  0px;
  }

  .popup {
    margin-bottom: 15px;
  }

  .popup .floatingcap {
    display: none;
  }  

}


@media only screen and (max-width: 640px) {

  .title1 {
    top: 1%;
  }

  .title1 h1 {
    font-size: 3em;
  }

  .title1 h2 {
    display: none;
  }

  .title1 h3 {
    font-size: 0.9em;
  }

  .title2 h1 {
    font-size: 2em;
  }

  .title2 h2 {
    font-size: 1.3em;
  }

  .title2 h3 {
    font-size: 1em;
  }

  .maintext {
    font-size: 1.4em;
    line-height: 1.6em;
    text-align: left;
    margin: 0px 15px;
  }

  .voxgrid {
    grid-template-columns: 1fr 1fr;
  }

  .person audio {
    background-color: black;  
  }

  .modal {
    width: 97%;
    margin: 10% auto;
  }

  .sidebyside {
    display: block;
  }

  .sidecaption {
    font-size: 1em;
    padding: 10px 20px;
  }