@charset "UTF-8";
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  --y: 0;
  position: fixed;
  font-family: "Helvetica Neue", HelveticaNeue, "TeX Gyre Heros", TeXGyreHeros, FreeSans, "Nimbus Sans L", "Liberation Sans", Arimo, Helvetica, Arial, sans-serif;
  font-weight: bold;
}
body:before {
  content: "\a       Pellegrino(Back 2 Life)\a       \a       \a       \a       CONTROLS: TAP/SWIPE/LOOK AROUND TO INTERACT\a       \a       \a       \a          Corner cavalcade\a        stationing right off manistee\a       what’s understood don’t need to be said\a        or is even worth answering\a       you can’t get involved\a       part of tragic epilogue\a       toll road\a        under the waterway\a        got the message crossed\a       couldn’t have been absolved\a       i'm indelible\a        scribbling past the line\a       everyday was rhombus conquered\a        corner store masterminds\a        back when Darian was carrying all them cameras\a       if you slow down the tape\a        you can actually see when the city mishandled us\a       coach house was sparklin's\a       drive it and park it\a       technology in the compartment\a       mom said its gone sound convoluted\a        whether You Right or wrong\a       can’t change contour lines\a        when there nothing to hide at all\a       how you mad\a        when you curated that whole situation\a       under point of sale\a        terminal stadium configuration\a       now those are some sayings\a        that what’s worth Remembering\a       when the whole city textures\a        displayed as audible renderings\a       \a       \a       \a       They was at our head\a       They was at our heads\a       they was in our head\a       knocked us off the ledge\a       but now we more steady\a       are you ready\a       They was at our head\a       They was at our heads\a       they was in our head\a       knocked us off the ledge\a       but now we more steady\a       are you ready???\a       \a       \a       \a       Lasonic receiver\a        listening on a park bench\a       turn corner\a       in the chassis\a        citgo off Marquette\a       open route region\a        stuck limit obstructing\a       baby girl not the passenger\a        but sit in no. one seat\a       game code insert \a       bundled inside the cartridge\a       she call the corner Pelligrino\a        it's very clear that they sparkling\a       I know your response\a        to when I was on dirt\a       like hey mon\a        gotta go to work\a       (i understand)\a       Tell me something about\a        oasis worth honoring\a       new assistant culture\a        changing negatives to positives\a       abandoned in segments\a        like they urban planning ironically\a       enhancement outward the flesh tone\a        like pottery(?)\a       she said I don't feel right\a        trying to imbibe alone\a       I know you candlelit cubicle\a        huddled trying to write alone\a       swoop me off the trailway\a        (input address in the vessel)\a       come right along\a       so I changed apartments\a        wearing final home\a       \a       \a       \a       They was at our head\a       They was at our heads\a       they was in our head\a       knocked us off the ledge\a       but now we more steady\a       are you ready\a       They was at our head\a       They was at our heads\a       they was in our head\a       knocked us off the ledge\a       but now we more steady\a       are you ready???\a       \a       \a       \a       \a       LYRICS: A. JOHNSON + A. BALLARD\a       Production: A. JOHNSON FOR AUTOMOTOR LLC";
  position: fixed;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 1000;
  font-size: 1.1vw;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 7px;
  white-space: pre;
  color: white;
  pointer-events: none;
  -webkit-transform: translateY(calc( var(--y) * -0.3%));
          transform: translateY(calc( var(--y) * -0.3%));
}

.content {
  height: 100%;
  overflow: scroll;
}

.block {
  position: relative;
  height: 100vh;
  width: 100vw;
   max-width: 200%;
    max-height: 200%;
  background-image: url("http://vylevylevyle.com/images/europe.jpg");

}
.block:nth-child(even) {
  background-image: url("http://vylevylevyle.com/images/2d_chicago.jpg");
}

.item-parallax {
  position: relative;
  width: 75vw;
  height: 35vh;
  margin: auto;
  background-image: url("http://vylevylevyle.com/images/rock_texture.jpg");
}

.block:nth-child(1) .item-parallax {
  top: 25vh;
  -webkit-transform: translateY(calc( var(--y) * -0.1% ));
          transform: translateY(calc( var(--y) * -0.1% ));
}

.block:nth-child(2) .item-parallax {
  top: 50vh;
  -webkit-transform: translateY(calc( var(--y) * -0.13% ));
          transform: translateY(calc( var(--y) * -0.13% ));
}

.block:nth-child(3) .item-parallax {
  top: 75vh;
  -webkit-transform: translateY(calc( var(--y) * -0.07% ));
          transform: translateY(calc( var(--y) * -0.07% ));
}

.block:nth-child(4) .item-parallax {
  top: 100vh;
  -webkit-transform: translateY(calc( var(--y) * -0.1% ));
          transform: translateY(calc( var(--y) * -0.1% ));
}

.block:nth-child(5) .item-parallax {
  top: 125vh;
  -webkit-transform: translateY(calc( var(--y) * -0.07% ));
          transform: translateY(calc( var(--y) * -0.07% ));
}