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

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Varela&display=swap');




/*main css*/

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

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: 'Varela', sans-serif; 
}

h1, h2, h3, .pullquote {
  font-family: "Varela", sans-serif;
/*  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: 4%;
  color: white;
  text-align: center;
  padding: 3%;
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.title1 h1 {
  font-size: 5.1em;
  margin-bottom: -4px;
  background: linear-gradient(135deg, #dc2626, #ffffff, #1e3a8a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* backup shadow for readability */
  font-weight: bold;
  letter-spacing: 3px;
}

.title1 h2 {
  font-size: 2em;
  color: white;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}

.title1 h3 {
  margin-top: 5%;
  font-size: 1.4em;
  font-style: italic;
  color: white;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

.dropcap {
    float: left;
    font-size: 5em;
    color: darkslategray;
    line-height: .9;
    font-family: "Times New Roman", serif;
    margin-right: 10px;
}

.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: white;
  padding: 40px;
  color: #1e3a8a;
}


.chapter {
  text-align: center;
  font-size: 69px;
  line-height: 1.2;
  color: white;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.7),
    -2px -2px 0 #1e3a8a,                 
    2px -2px 0 #dc2626,                
    -2px 2px 0 #dc2626,                  
    2px 2px 0 #1e3a8a;                  
}

.w-d {
  width: 600px;
}

.text {
  width: 600px;
}

.journals{
  width: 600px;
  padding-top: 10px;
}

.grocery{
  width: 600px;
}

.cookies{
  width: 600px;
}


.menu {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  padding: 20px;
}

.menu li {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: black;
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 5%;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    padding: 1% 2%;
    margin-top: 5%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) ;
}

.menu li a {
  color: lightskyblue;
}

.menu li:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  background: black;
  cursor: pointer;
  color: white;
}

.menu li a:hover {
  color: firebrick;
}



.foodgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
  padding: 20px;
}

.foodgrid div {
  border-radius: 12px;
  color: blue;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: white;
}

.foodgrid div:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  background-color: red;
  cursor: pointer;
}

.maintext {
  max-width: 640px;
  margin: auto;
  color: darkslategray;
  font-size: 1.3em;
  line-height: 1.8em;
  text-align: justify;
  padding: 2%;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);

}

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

.mylist {
  list-style: none;
  padding: 0;
  margin: 40px auto;
  max-width: 800px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.mylist li {
  background: #1e3a8a;
  color: white;
  padding: 20px;
  border-radius: 10px;
  font-size: 1.2em;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mylist li:hover {
  background-color: #dc2626;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}



.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;
}

.center {
/*  color: orange;*/
  width: 70%;
  margin: auto;
}

.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;
}

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

.slidewrapper {
  position: relative;
}

.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: 100vh auto;
  background-color: white;
  color: darkslategray;  
  padding: 20px;
}



.smallphotoo {
   float: left;
   width: 23%;
   margin: 1%;
   border: 4px solid dimgrey;
}

/* Container for each image */
.smallphoto {
  position: relative;
  display: inline-block;
}

/* Make the images larger */
.smallphoto img {
  display: block;
  width: 400px; /* increase from 300px to 400px */
  height: auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}


/* rollover info */
/* Caption styling (same as before, centered on image) */


.rules-box {
  background: #f3f4f6;
  color: #1e3a8a;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  max-width: 600px;
  margin: 40px auto;
  text-align: left;
  border-left: 5px solid #dc2626;
}

.rules-box h2 {
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.rules-box p {
  font-size: 1em;
  margin-bottom: 20px;
}

.rules-box ul {
  list-style: none;
  padding-left: 0;
}

.rules-box ul li {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10px 15px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-weight: bold;
}

.four {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 3%;
}

.smallpic {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.smallpic img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.smallpic:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.smallpic:hover img {
  transform: scale(1.05);
}

.tinycap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #1e3a8a;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.6;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 2;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.smallpic:hover .tinycap {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.googlemap {
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  max-width: 700px;
  margin: auto;
}


.googlemap iframe {
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}

.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;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  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 {
    max-width: 800px;
    margin: 40px auto;
    color: darkslategray; /* Patriotic blue */
    font-size: 1.25em;
    line-height: 1.8em;
    text-align: left; /* More natural for reading long passages */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* subtle lift */
  }

  .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;
  }

  .textbox {
    margin: 100vh 20px;
  }

}