* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  transition: background 1s ease-in-out;
  height: 350vh;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  color: #fff;
  font-family: sans-serif;
  font-size: 72px;
  font-weight: 600;
  text-transform: uppercase;
  &[data-bg="yellow"] { color: #333; }
}

h1 {
  font-family: futura-pt,sans-serif;
font-weight: 700;
font-style: normal;
  font-size: 75%;

}

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid white; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation:
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }
}

img {
  padding: 5px;
  vertical-align: middle;
  max-width: 750px;
}

#gif1 {
  width: 700px;
}

#image1, #image2, #image3, #image4, #image5, #image6, #image7{
  display: block;
  position: fixed, center;
/*   to center the image, give negative half
  the width and height of the image to the margins */

  transform: scale(0);
  width: 400px;
  height: 400px;
}

#trigger0, #trigger1, #trigger2, #trigger3, #trigger4, #trigger5, #trigger6, #trigger7, #trigger8{
  width: 100px;
  height: 5px;
  background: transparent;
  position: absolute;
}

#trigger0 {
  top: 130vh;
}

#trigger1 {
  top: 150vh;
}

#trigger2 {
  top: 250vh;
}

#trigger3 {
  top: 350vh;
}

#trigger4 {
  top: 450vh;
}

#trigger5 {
  top: 550vh;
}

#trigger6 {
  top: 650vh;
}

#trigger7 {
  top: 750vh;
}

#trigger8 {
  top: 850vh;
}
@keyframes zoom-in {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.zoom-in {
  animation: zoom-in 1s forwards;
}

@keyframes zoom-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.zoom-out {
  animation: zoom-out 1s forwards;
}


@media screen and (min-width: 700px) {

  #image1, #image2, #image3, #image4, #image5, #image6, #image7{


    width: 500px;
    height: 500px;
  }
  #gif1 {
  width: 1000px;
}
}

@media screen and (max-width: 700px) {
  h1{
    font-size: 45%;
  }
}

@media screen and (min-width: 1200px) {

  #image1, #image2, #image3, #image4, #image5, #image6, #image7{

    width: 800px;
    height: 800px;
  }
  #gif1 {
  width: 1200px;
}
}