html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  color: white;
  /* background: black; */
}

body {
  background: #151414;
}


body {
  text-align: center;
}

#container {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index:1;
  top: 0;
}

#content {
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
}

#content section {
  /* width: 80%; */
  height: 100%;
  position: absolute;
  padding-top:10%;
  margin:0;
}

#environment {
  perspective: 400px;
  perspective-origin: center center;
  width: 100%;
  margin: 0 auto;
  height: 500px;
}

section img{
  opacity:0.98;
  width: 100%;
  height: auto;
}


#cloud{
  opacity:0.98;
  width: 200%;
  height: auto;
  left: 90%;
  position: relative;
}

#cig2 {
  opacity:0.98;
  width: 100%;
  height: auto;
  left: -90%;
  position: relative;
  transform: translate3d(0,0,0);
}

#cig {
  opacity:0.80;
  width: 50%;
  height: auto;
  left: 50%;
  position: relative;
  /* filter: invert(3px); */
  transform: translate3d(0,0,0);
}

#rose {
  opacity:0.7;
  width: 50%;
  height: auto;
  right: 10%;
  position: relative;
  /* filter: hue-rotate(50deg); */
  mix-blend-mode: color-dodge;
  transform: translate3d(0,0,0);
  /* filter: blur(9px); */
}

#petals {
  width: 500%;
  height: auto;
  right: 100%;
  filter: blur(23px);
  position: relative;
}


#graffiti {
  width: 400%;
  height: auto;
  right: 150%;
  top: -50%;
  /* filter: blur(5px); */
  position: relative;
  transform: translate3d(0,0,0);
}


section.text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 8vh;
  text-shadow: 0 2px 10px rgba(50, 47, 48, 0.9);
  letter-spacing: -0.02em;
}

cite {
  display: block;
  font-size: 66px;
  padding-top: 2rem;
  font-family: "Ballet", cursive;
  letter-spacing: .2rem;
}


.invert {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  animation: flash 5.3s infinite;
}

.nextpage {
  font-size: 5vw;
  display: block;
  margin: 0 auto;
  font-family: "Ballet", cursive;
  width: 100%;
  text-align: center;
}

.nextpage a {
  color: white;
}


@keyframes flash {
  0%, 7% { opacity: 1; }    /* First 0.5 seconds (9% of 5.5s) visible */
  10%, 100% { opacity: 0; } /* Remaining 5 seconds + 0.5s invisible */
}