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

/*google font*/

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

/*cute font downloaded separately*/
@font-face {
    font-family: 'cantika_cute';
    src: url('font/cantika_cute.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'cantika_cute', sans-serif;
    overflow-y: hidden;
}

/*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: 'Times New Roman', sans-serif; 
}

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

}

.enterhere {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: white;
    font-family: 'cantika_cute', sans-serif;
    font-size: 4em;

}

.enterbutton {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: center;
}

.enterbutton img {
    width: 300px; /* Adjust this value to make the button smaller/larger */
    height: auto;
    display: block;
    margin: 0 auto;
}


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



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

.title1 h3 {
  margin-top: 10%;
  font-size: 1.5em;
  font-style: italic;
}

.title2 {
  width: 100%;
  text-align: center;
  padding: 3% 10%;
  font-family: 'cantika_cute', sans-serif;

}

.title2 h1 {
    font-family: 'cantika_cute', sans-serif;
    font-size: 9.5em;
    margin-bottom: -4px;
    color: #F59FD1;
}

.title2 h2 {
  font-family: 'cantika_cute', sans-serif;
  font-size: 3em;
  color: #F59FD1;
}

.title2 h3 {
  margin-top: 5%;
  margin-bottom: 0;
  font-size: 3em;
  /*font-style: italic;*/
  color: #D5A8FF;
}

.content {
  width: 100%;
  background-color: white;

}

.twopiece {
  display: grid;
  grid-template-columns: 1fr 1fr;

}

.leftside {
  min-height: 100vh;
  background-color: white;
}

.leftside img {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;

}

.rightside {
  background-color: white;
  padding: 40px;
}

.rightside p {
  margin-bottom: 40vh;
  font-size: 2em;
}


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

.maintext h3 {
  font-size: 1.8em;

}
.collection-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
  gap: 20px; /* space between images */
  max-width: 1000px; /* adjust as needed */
  margin: 0 auto;
  padding: 20px;
}

.collection-pics img {
  width: 100%;
  padding: 5px;
  transform: scale(1.1);  /* increases visual size */
  transform-origin: center;
}




@media (max-width: 768px) {
  .collection-container {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on tablet */
  }
}

@media (max-width: 480px) {
  .collection-container {
    grid-template-columns: 1fr; /* 1 per row on phone */
  }
}



.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 {
  font-size: 14px;
  color: #555;
  line-height: 1.2;       /* Decreases space between lines */
  margin: 4px 0 0 0;       /* Removes extra top/bottom margin */
  text-align: center;
}

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

.bigphoto {
  position: relative;
}

.two-photo-section {
  max-width: 100vw;
  padding: 20px;
}

.photo-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* allows wrapping on smaller screens */
}

.photo-row img {
  width: 100%;
  max-width: none;
  margin-left: -10%;
}



.caption {
  font-size: 14px;
  color: #555;
  line-height: 1.2;       /* Decreases space between lines */
  margin: 4px 0 0 0;       /* Removes extra top/bottom margin */
  text-align: center;      /* Optional: keeps text centered */
}


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

.googlemap {
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  max-width: 500px;
  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;
  }  

}

/* Directly target the section with .polycam */
section.polycam {
  margin: 10 !important; /* Force margin reset */
  padding: 20px !important; /* Optional: ensure padding is correct */
}

/* Ensuring the container also doesn’t inherit any margin from global styles */
.polycam-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px !important; /* override padding if needed */
  overflow-x: visible !important; /* no scrolling */
  justify-content: center;
  flex-wrap: nowrap;
}

.polycam-frame {
  width: 15vw;
  height: 20vw;
  border: none;
  flex: 0 0 auto;
}

.polycam-note {
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  font-style: italic;
  color: #444;
  text-align: center;
  margin-bottom: 20px;
}



section.lookbook {
  margin: 10 !important; /* Force margin reset */
  padding: 20px !important; /* Optional: ensure padding is correct */
}

/* Ensuring the container also doesn’t inherit any margin from global styles */
.lookbook-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px !important; /* override padding if needed */
  overflow-x: visible !important; /* no scrolling */
  justify-content: center;
  flex-wrap: nowrap;
}

.lookbook-text {
  width: 15vw;
  height: 20vw;
  border: none;
  flex: 0 0 auto;
}

.lookbook-caption {
  margin-top: 2px; /* reduces space above caption */
  font-size: 13px;
  color: #555;
  line-height: 1.2;
  text-align: center;

}


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

  .textbox {
    margin: 100vh 20px;
  }

}