@font-face {
    font-family: 'Bodoni-Poster';
    src: local('Bodoni Poster Compressed'), local('Bodoni-PosterCompressed'),
        url('fonts/Bodoni-PosterCompressed.woff2') format('woff2'),
        url('fonts/Bodoni-PosterCompressed.woff') format('woff'),
        url('fonts/Bodoni-PosterCompressed.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
  margin: 0;
}

h1 {
  font-family: Bodoni-Poster, serif;
  font-size: 6em;
  color: white;
}

#move.active {
  transform: translate(250px, 0px);
  transition: .75s;
  opacity: 1;
}
#move2.active {
  transform: translate(0px, 600px);
  transition: 1s;
  transition-timing-function: ease-out;
  opacity: 1;
}

#move3.active {
  transform: translate(-250px, 0px);
  transition: .5s;
  opacity: 1;
}

#fade.active {
  transition: .5s ease-in-out;
  opacity: 1;
}

#fade1.active {
  transition: .5s ease-in-out;
  opacity: 1;
}

#fade2.active {
  transition: 1.5s ease-in-out;
  opacity: 1;
}

#fade3.active {
  transition: 1s ease-in-out;
  opacity: 1;
}

.intro {
  background-color: black;
  width: 100%;
  height: 100vh;
  background-image: url(imgs/logo2.png);
  background-size: cover;
  background-position: center;
  display: flex;
  align-self: center;
  justify-content: center;
}

.logo {
  align-self: center;
  opacity: 0;
}

.bleach {
  background-color: black;
  width: 100%;
  height: 100vh;
  background-image: url(imgs/kurt89.jpg);
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
}

.date1 {
  position: relative;
  left: 10%;
  margin-top: 55vh;
  opacity: 0;
}

.bleach h1 {
  font-size: 7em;
  margin-bottom: 20px;
  border-bottom: 5px solid white;
}

.bleach, .nevermind p {
  color: white;
  font-family: 'Helvetica', sans-serif;
  font-size: 1em;
  font-weight: 300;
  text-align: justify;
  line-height: 1.5;
  margin: 0;
  padding: 0 10px 20px 0;
}

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30vw;
  height: 75vh;
  position: absolute;
  right: 8%;
  margin-top: 8%;

}

.flex2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30vw;
  position: absolute;
  left: 8%;
  margin-top: 10%;
}

.nevermind {
  background-image: url(imgs/water.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
}

.neverdate {
  position: absolute;
  left: 2%;
  padding: 8% 0 10% 0;
  opacity: 0;
}

#neverlogo, #incelogo, #uterologo {
  width: 25vw;
  padding-bottom: 50px;
}

#date2 {
  position: absolute;
  left: 50px;
  margin-top: 150px;
}

.dollar {
  position: absolute;
  left: 300px;
  top: -600px;
  opacity: 0;
}

.incesticide {
  background-color: #aaae76;
  width: 100%;
  height: 100vh;
  background-image: url(imgs/1992.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
}

.incesticide p {
  color: #302d18;
  font-family: 'Helvetica', sans-serif;
  font-size: 1em;
  font-weight: 400;
  text-align: left;
  line-height: 1.5;
  margin: 0;
  padding: 0 10px 20px 0;
}

.inalbum {
  width: 40%;
  position:absolute;
  bottom: 0;
  right: -250px;
  margin: 0;
  opacity: 0;
}

.utero {
  background-image: url(imgs/1993.png) ,url(imgs/utero.jpg);
  background-position: right bottom, center;
  background-size: 60%, cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
}

.angel {
  position: absolute;
  bottom: 0;
  right: 2%;
  opacity: 0;
}

.utero p {
  color: #302c26;
  font-family: 'Helvetica', sans-serif;
  font-size: 1em;
  font-weight: 400;
  text-align: left;
  line-height: 1.5;
  margin: 0;
  padding: 0 10px 20px 0;
}

.unplug {
  background-color: white;
  background-image: url(imgs/lilly-right.png), url(imgs/lilly-left.png);
  background-position: bottom right, top left;
  background-repeat: no-repeat;
  background-size: 40%, 30%;
  width: 100%;
  height: 100vh;
  margin-bottom: 0;
}

.unplug p {
  color: black;
  font-family: 'Helvetica', sans-serif;
  font-size: 1em;
  font-weight: 400;
  text-align: left;
  line-height: 1.5;
  margin: 0;
  padding: 0 10px 20px 0;
}

.kurt94 {
  position: relative;
  left: 7vw;
  top:20%;
  opacity: 0;
}

nav {
  height: 65%;
  display: flex;
  align-self: center;
  justify-content: center;
  position: fixed;
  right: 1%;
  top: 20vh;
}

ul {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

li {
  list-style: none;
}

a {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c6b8b5;
  box-shadow: 1px 1px 3px black;
}
 a:active {
  background-color: #f7e10f;
}

@media only screen and (max-height: 800px) {
  .nevermind p {
    font-size: .85em;
  }
}

@media only screen and (max-width:1100px) {
  .bleach, .nevermind, .incesticide, .utero, .unplug p {
    text-align: left;
    font-size: .8em;
  }

  .bleach h1 {
    font-size: 5em;
  }

  .date1 {
    position: relative;
    left: -50px;
    margin-top: 65vh;
    margin-left: 0;
    opacity: 0;
  }
}