/* styles.css 
   Project: JOUR 414 Capstone Project  
   Author: Quincy Bowie Jr. 
   Date: 3/25/25
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

/*@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Open+Sans&family=Roboto&display=swap');
*/
* {
  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: 'Courier New', 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.70;
}

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

.title1 h1 {
  font-size: 5em;
  font-style: italic;
  margin-bottom: -4px;
  color:rgb(230, 230, 0);
  line-height: 2;
}
.borderhover{
  padding-bottom: 35%;
}

.dek{
  padding: 25%;
}

.content {
  width: 100%; 
  padding-top: 25%; 
/*  background-image: url("../img/white-crumpled-paper-texture-background.jpg");
  background-color:rgba(25, 25, 112, 0.75);*/
/*  z-index:0;*/
  overflow-x: hidden;
 
/*  background-blend-mode:screen;*/
}
.JayHead,.jheanellehead,.jessihead{
/*  border-radius: 50%;*/
  width: 100%; 
  height: auto;
  border-style: solid;
  border-width: 5px;
  border-color: black;
  margin:auto;
  margin-top: 5px;
  margin-bottom: 5px;
}



.jaylonicontent{
  background-color:rgba(25, 25, 112, 1.0);
  background-image: url("../img/white-crumpled-paper-texture-background.jpg");
  background-blend-mode: overlay;
  font-family: courier;
  color: white;
}
 

/*.title1 h2:hover{
   transform:scale(1.075); 
/*   animation-duration: 500ms;*/
/*   transition-duration: 3s ease;*/

}*/
.title1 h2 {
  font-size: 2em;
  font-weight:300;
  margin-top: 15%;
  margin-bottom: 15%;
  font-style: italic;
}

.title1 h1 borderhover{
  line-height: 4;
}



.title1 h3 {
  margin-top: 10%;
  font-size: 1.2em;
  font-style: italic;
  margin-bottom: 30%;
  color: rgb(230,57,0);
}

.title1, .title2p{
  margin-top: 10%;
  font-size: 1.6em;
  font-style: normal;
  font-family: "Courier New";
  margin-bottom: 30%;
  color:firebrick;
}

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

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

.title2 h2 {
  margin-top: 5%;
  margin-bottom:5%;
  font-size: 2em;
  color:white;
}

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

.title2 img{
  width: 50%;
}

/*.title3{
   max-width: 640px;
  margin: auto;
  color: white;
  font-family: "Courier New";
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
 font-size: 1.4em;
  font-weight: 300;

}*/



 .maintext {
  max-width: 640px;
  margin: auto;
  color: white;
  font-family: "Courier New";
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
 font-size: 1.4em;
  font-weight: 300;
  line-height: 1.8em*/;
  padding: 1%;
  }

 /* .section1 {
    background-image: url("../img/white-crumpled-paper-texture-background.jpg");
  }*/

.pullquote {
  width: 50%;
  font-size: 1.4em;
  line-height: 1.6em;
  font-style: italic;
  text-align: left;
  color: rgb(230, 57, 0);
}

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

.sidepic {
  width: 50%;
}

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

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

.jheanellecontent{
  background-color: firebrick;
  background-image: url("../img/white-crumpled-paper-texture-background.jpg");
  background-blend-mode: overlay;
}
.sectionhead {
  text-align: center;
}

.jaylonisectionhead{
  color:rgb(230, 230, 0);
  text-align: center;
}

.wav1{
  width: 300px;
  height:200px;
  margin-right:60px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
}

.wav1text{
  color:white;
  font-family: courier;
}

.wav2{
  width: 300px;
  height:200px;
  border-style:solid;
  border-radius: 5px;
  border-color: white;

}


.maintext h2 {
  font-style: italic;
  text-align: center;
  margin-top: ;
}

.bigphoto {
  position: relative;
  height: 530px;
}

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

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

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

.gridpic {
  position: relative;
 /* width: 501.5px;
  height: 281.25px ;*/
}
.keisha img{
  width: 100%;
  height: 100% ;
  object-fit: cover;
}
.gridpic .photocaption {
  display: none;
}

.jessiujazicontent{
  background-color:rgba(232, 253,0,0.8);
  background-image: url("../img/white-crumpled-paper-texture-background.jpg");
  background-blend-mode: overlay;
  text-shadow: 1px 1px 2px #000000;;
  justify-content: center;
}

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

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

 /* Basic styling for the card flip */
.card-deck-section {
    text-align: center;
    margin-top: 50px;
}

.deck {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 30px;
   /*border-style: solid;
   border-color: white;*/
}

.card {
    width: 300px;
    height: 450px;
    perspective: 1000px;
    cursor: pointer;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 55%;
}

.card-front {
/*    background-color: #f0f0f0;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-back {
/*    background-color: #ccc;*/
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.controls {
    text-align: center;
    margin-top: 20px;

}

#resetBtn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    align:center;
}

/* Style for placeholder images */
.card-front img {
    width: 100%;
    max-height: 450px;
    padding: 5%;
}




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

#tospace{
  display: flex;
  justify-content: center;
}



.spacemakerspage{
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
/*   background-image: url("../img/white-paper-texture-background.jpg");
/*  background-image: url("../img/Spacemakers.jpeg");
   overflow-y: scroll;*/
overflow:hidden;
background: radial-gradient(circle at bottom, navy 0, black 100%);
text-align: center;
margin: 0 auto;
}

.space {
  background: rgba(128, 0, 128, 0.1) center / 200px 200px round;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  border: 1px solid white;
  z-index: -3;
}
.spacemakersclose{
/*   float: right;*/
   position: absolute;
   top: 10px;
   right:5px;
   width:25px;
   height: 25px;
   background-color: rgba(0, 0, 0, .1);
   margin-right: 10px;
   font-size: .8em;
/*   mix-blend-mode: overlay;*/
   color: white;
   border: solid 1px white;
   cursor: pointer;
}

.stars1 {
  animation: space 30s ease-in-out infinite;
  background-image:
    radial-gradient(
      1px 1px at 25px 5px, 
      white, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 50px 25px, 
      lightyellow, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 125px 20px, 
      white, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 50px 75px, 
      lightcoral, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2px 2px at 15px 125px, 
      white, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2.5px 2.5px at 110px 80px, 
      firebrick, 
      rgba(255, 255, 255, 0)
    );
}

.stars2 {
   animation: space 60s ease-in-out infinite;
  background-image:
    radial-gradient(
      1px 1px at 75px 125px, 
      lightcoral, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 100px 75px, 
      firebrick, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 199px 100px, 
      white, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2px 2px at 20px 50px, 
      white, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2.5px 2.5px at 100px 5px, 
      lightyellow, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2.5px 2.5px at 5px 5px, 
      aliceblue, 
      rgba(255, 255, 255, 0)
    );
  }

  .stars3 {
  animation: space 90s ease-in-out infinite;
  background-image:
    radial-gradient(
      1px 1px at 10px 10px, 
      lightgoldenrodyellow, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 150px 150px, 
      lightgreen, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 60px 170px, 
      white, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 175px 180px, 
      firebrick, 
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2px 2px at 195px 95px, 
      white, 
      rgba(255, 255, 255, 0)
    ), 
    radial-gradient(
      2.5px 2.5px at 95px 145px, 
      white, 
      rgba(255, 255, 255, 0)
    );
}

.meetthespacemakers{
  width: 50%;
 margin-top: 100px;
}

@keyframes space {
  40% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.25;
  }
  60% {
    opacity: 0.75;
  }
  100% {
    transform: rotate(360deg);
  }
}

.meetthespacemakers{
  z-index:1000;
}
/*footer */

footer {
  background-color: transparent;
  color: white;
  padding: 2%;
  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;
  }

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

  .popup {
    margin-bottom: 15px;
  }

  .popup .sidecap {
    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;
  }

}