/* styles.css 
   Project: 
   Author: 
   Date: 
	
   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=EB+Garamond&family=Pangolin&display=swap');


*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: white;
   background-size: 20px 20px;
   background-image:
    linear-gradient(to right, #EAEAEA 1px, transparent 1px),
    linear-gradient(to bottom, #EAEAEA 1px, transparent 1px);
  text-align: justify;
  font-family: 'Georgia', sans-serif;
  font-size: 1em;
}

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

a {
  color: black;
  text-decoration: underline;
}

a:visited {
  color: black;
}

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

p {
  padding: 12px;
}



/*HEADER*/

.header video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header {
  position: relative;
  z-index: -20;
}



/*ANECDOTE*/

.anecdote img {
  position: absolute;
  z-index: -10;
  padding-top: 80px;
}

.anecdotesections {
  font-family: Courier;
  margin: auto;
  padding-top: 180px;
  max-width: 800px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  position: relative;
  font-size: 0.9em;
}

.left {
  margin-top: 50px;
}

.chaos p {
  cursor: pointer;
}



/*TEXT*/

.logline {
  padding-top: 240px;
  padding-left: 125px;
  padding-right: 125px;
  padding-bottom: 10px;
  font-size: 1.5em;
  font-family: Courier;
}

.opener {
  margin-top: 40px;
  margin-bottom: 20px;
}

.text {
  margin: auto;
  padding: 10px;
  line-height: 1.25em;
}

.one {
  padding-top: 50px;
  max-width: 700px;
  display: grid;
  grid-template-columns: 2fr 1.2fr;
}

.two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .twelve, .thirteen {
  max-width: 800px;
  margin: auto;
  padding: 10px;
  line-height: 1.25em;
}

.two {
  position: relative;
}

.newspaper {
  position: absolute;
  top: 100px;
  left: -320px;
  padding: 0px;
  margin: 0px;
}

.newspaper img {
  width: 40%;
}

.four {
  margin-top: 20px;
  margin-bottom: 25px;
  position: relative;
}

.four img {
  width: 25%;
  position: absolute;
  right: -210px;
  top: 370px;
}

.five {
  margin-top: 25px;
  position: relative;
}

.pullquote {
  font-family: Pangolin;
  font-size: 1.2em;
  line-height: 1.1em;
}

.squiggle {
  position: absolute;
  top: 100px;
  left: -320px;
  padding: 0px;
  margin: 0px;
}

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

.statistics img {
  padding: 20px;
}

.relationships img {
  margin-left: -40px;
  width: 80%;
}

.insta {
  position: relative;
}

.aomf {
  position: absolute;
  top: 300px;
  left: 60px;
  padding: 0px;
  margin: 0px;
  transform: rotate(-10deg);
}

.aomf img {
  width: 25%;
}

.eight {
  position: relative;
}

.eight p {
  padding-left: 100px;
}

.soorim img {
  width: 40%;
  position: absolute;
  left: -250px;
  top: 0px;
  transition: transform 0.5s ease;
}

.soorim img:hover {
  transform: scale(1.1);
}

.twelve {
  position: relative;
  margin-top: -20px;
  margin-bottom: 20px;
}

.twelve p {
  padding-right: 80px;
}

.thirteen {
  margin-top: -12px;
}

.thirteen img {
  margin-top: -12px;
}

.ally img {
  width: 35%;
  position: absolute;
  right: -200px;
  top: 0px;
  transition: transform 0.5s ease;
}

.ally img:hover {
  transform: scale(1.1);
}

.nine {
  position: relative;
  padding-top: 50px;
  padding-bottom: 0px;
}

.nine p {
  padding-right: 80px;
}

.josey img {
  width: 35%;
  position: absolute;
  right: -225px;
  top: -150px;
  transition: transform 0.5s ease;
}

.josey img:hover {
  transform: scale(1.1);
}

.yu img {
  margin-top: -80px;
  margin-bottom: -30px;
}

.ten {
  padding-bottom: 60px;
}

.eleven {
  max-width: 1200px;
  font-family: Pangolin;
  font-size: 1.2em;
}


/*DIGITAL ELEMENT: FILM REEL TIMELINE*/

  .slide {
    position: relative;
    cursor: pointer;
  }

  .caption {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    position: absolute;
    left: 0;
    top: 0;
    align-items: center;
    margin: auto;
    text-align: center;
    width: 100%;
    height: 100%;
    display: none;
  }

  .caption h1 {
    margin-top: 40px;
    font-size: 1.5em;
    padding: 10px;
    font-family: Courier;
  }

  .caption h2 {
    font-size: 1em;
    margin-top: -20px;
    font-family: Courier;
  }

  .slider {
    height: 250px;
    margin-left: -10px;
    position: relative;
    width: 105vw;
    display: grid;
    place-items: center;
    transform: rotate(3deg);
    overflow-x: hidden;
  }

  .slide-track {
    display: flex;
    width: calc(250px * 26);
    animation: scroll 30s linear infinite;
  }

  @keyframes scroll {

    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-250px * 13));
    }

  }

  .slide {
    height: 200px;
    width: 250px;
    display: flex;
    align-items: center;
  }

  .slider::before {
    left: 0;
    top: 0;
  }

  .slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
  }

  .overlay {
    background-color: rgba(0, 0, 0, 0.75);
    position: fixed;
    bottom: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    display: none;
    scroll-behavior:smooth;
    z-index: 15;
  }

  .modal-content {
    width: 80vw;
    height: auto;
    margin: auto;
    margin-top: 40px;
    background-color: black;
    overflow: auto;
  }

  .container {
    display: grid;
    justify-content: center;
    position: relative;
  }

  .thumbnails {
    display: flex;
    list-style: none;
    width: 100%;
    position: relative;
  }

  .thumbnails li {
    flex: auto;
    list-style: none;
  }

  .thumbnails li a {
    display: block;
    position: relative;
  }

  .thumbnails img {
    object-fit: cover;
    object-position: top;
    border: 1px solid black;
    position: relatve;
  }

  .cap {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    position: absolute;
    left: 0;
    top: 0;
    margin: auto;
    text-align: center;
    width: 100%;
    height: 100%;
    display: none;
  }

  .cap p {
    padding: 17px;
  }

  .slides {
    overflow: auto;
    height: 650px;
    border: 1px solid black;
  }

  .close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 5px;
    font-size: 28px;
    font-weight: bold;
    margin-top: -10px;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

/*AUDIOVISUAL ELEMENT: AUDIO FLIPCARDS*/

  /* FLIPCARD GALLERY CODE */

  .words {
    position: absolute;
    z-index: -15;
  }

  .body {
    padding-top: 125px;
  }

  .gallery2 {
    padding: 1%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    width: 90%;
    margin: auto;
  }

  .flip-card2 {
    margin: 0px auto; 
    background-color: transparent;
    width: 28vw; 
    height: 28vw;
    margin-bottom: 15px;
    perspective: 1000px;
  }

  .gallery {
    background-color: white;
    padding: 1%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 40px;
    width: 100%;
  }

  .flip-card-front img, .flip-card-back video {
    width: 100%;
    height: 100%;
  }

  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    margin: auto;
    background-color: transparent;
    width: 22vw; 
    height: 22vw; 
    perspective: 1000px; 
  }

  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  .flip-card2:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: transparent;
    color: black;
  }

  /* Style the back side */
  .flip-card-back {
    background-color: white;
    color: white;
    transform: rotateY(180deg);
  }

  /* END FLIPCARD GALLERY CODE */



/*FOOTER*/

.footer {
   position: absolute;
   background-color: black;
   color: white;
   margin: auto;
   text-align: center;
   padding: 30px;
   font-size: 0.75em;
   line-height: 1.75em;
   width: 100%;
}

.footer img {
   width: 15%;
   margin: auto;
   margin-top: 1%;
}

.footer h5 {
   max-width: 800px;
   margin: auto;
   font-style: italic;
   margin-bottom: 30px;
}




#anecdotemodal-content {
  width: 1120px;
  height: 630px;
}





/*media query for responsive design */

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


}