*, *:before, *:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

@-webkit-keyframes scaleXY {
  0% {
    -webkit-transform: skew(-5deg, -5deg);
  }
  25% {
    -webkit-transform: skew(11deg, 11deg);
  }
  50% {
    -webkit-transform: skew(0deg, 0deg);
  }
  75% {
    -webkit-transform: skew(-8deg, -8deg);
  }
  100% {
    -webkit-transform: skew(-5deg, -5deg);
  }
}
@-moz-keyframes scaleXY {
  0% {
    -webkit-transform: skew(-5deg, -5deg);
  }
  25% {
    -webkit-transform: skew(15deg, 15deg);
  }
  50% {
    -webkit-transform: skew(0deg, 0deg);
  }
  75% {
    -webkit-transform: skew(-10deg, -10deg);
  }
  100% {
    -webkit-transform: skew(-5deg, -5deg);
  }
}
@-webkit-keyframes textScale {
  0% {
    -webkit-transform: skew(-1deg);
  }
  25% {
    -webkit-transform: skew(2deg);
  }
  50% {
    -webkit-transform: skew(0deg);
  }
  75% {
    -webkit-transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(-1deg);
  }
}
@-moz-keyframes textScale {
  0% {
    -webkit-transform: skew(-1deg);
  }
  25% {
    -webkit-transform: skew(2deg);
  }
  50% {
    -webkit-transform: skew(0deg);
  }
  75% {
    -webkit-transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(-1deg);
  }
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  position: absolute;
  list-style: none;
}

div {
  margin-bottom: 0;
}

li {
  font-family: "Caveat", cursive;
  font-size: 18px;
}
li span {
  vertical-align: middle;
}
li img {
  vertical-align: middle;
}

.landing {
  width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 20;
  display: grid;
  place-items: center;
}

.landing-image {
  cursor: pointer;
  width: 300px;
  height: 125px;
  -webkit-animation: scaleXY 10s infinite linear;
}

.site-3 {
  z-index: 15;
  display: grid;
  width: 100vw;
  top: 2vh;
  grid-template-rows: repeat(4, 23vh);
  position: fixed;
}

.arrow-chasing-itself {
  width: 1.75vw;
}

.site-3-issue-1-title, .site-3-issue-2-title, .site-3-issue-3-title, .site-3-issue-4-title, .site-3-snooperverse-title {
  padding: 3px;
  color: #0000EE;
  font-variant: small-caps;
  width: fit-content;
}
.site-3-issue-1-title span, .site-3-issue-2-title span, .site-3-issue-3-title span, .site-3-issue-4-title span, .site-3-snooperverse-title span {
  cursor: pointer;
  -webkit-animation: textScale 2s infinite linear;
}
.site-3-issue-1-title span:hover, .site-3-issue-2-title span:hover, .site-3-issue-3-title span:hover, .site-3-issue-4-title span:hover, .site-3-snooperverse-title span:hover {
  color: grey;
}
.site-3-issue-1-title img, .site-3-issue-2-title img, .site-3-issue-3-title img, .site-3-issue-4-title img, .site-3-snooperverse-title img {
  cursor: pointer;
}

.site-3-issue-3-title-span {
  -webkit-animation: textScale 2s infinite linear;
}

.purchase span {
  font-family: "Caveat", cursive;
  font-size: 18px;
  color: blue;
}
.purchase span:hover {
  cursor: pointer;
  font-family: "Caveat", cursive;
  font-size: 18px;
  color: grey;
}
.purchase .button {
  display: none;
}

.spinner {
  display: none;
}

/*snooper-issue-1*/
.snooper-1-black-background {
  background-color: black;
  width: 100%;
  height: 100%;
  display: table;
}
.snooper-1-black-background h4 {
  font-style: italic;
  font-size: 24px;
  margin: 0;
}

.snooper-1-black-background-image-container {
  align-items: center;
  justify-content: center;
  cursor: url("https://snooper.s3.amazonaws.com/down-arrow-black.png"), auto;
}

.snooper-1-black-background-image {
  width: 100%;
}

.snooper-1-black-background-text li, .snooper-1-black-background-text h4 {
  color: white;
}

/*snooper-issue-2*/
#snooperVideo {
  width: 100%;
  cursor: pointer;
}

.snooper-2-text h4 {
  font-style: italic;
  font-size: 24px;
  margin: 0;
}

/*snooper-issue-3*/
.snooper-3-audio-container {
  width: 100%;
  display: flex;
  place-content: center;
}
.snooper-3-audio-container h4 {
  font-style: italic;
  font-size: 24px;
  margin: 0;
}

.snooper-3-audio {
  display: flex;
  align-items: center;
  justify-content: center;
}

.snooper-3-text {
  position: fixed;
  bottom: 0;
  left: 0;
}

.snooper-4-container h4 {
  margin: 0;
}
.snooper-4-container .snooper-4-image-container img {
  width: 100vw;
}

@media screen and (max-width: 769px) {
  .site-3 {
    grid-template-rows: repeat(4, 18vh);
  }
  .site-3-issue-1 span, .site-3-issue-1 a, .site-3-issue-2 span, .site-3-issue-2 a, .site-3-issue-3 span, .site-3-issue-3 a, .site-3-issue-4 span, .site-3-issue-4 a, .site-3-snooperverse span, .site-3-snooperverse a {
    font-size: 25px;
  }
  .site-3-issue-1 .arrow-chasing-itself, .site-3-issue-2 .arrow-chasing-itself, .site-3-issue-3 .arrow-chasing-itself, .site-3-issue-4 .arrow-chasing-itself, .site-3-snooperverse .arrow-chasing-itself {
    width: 5vw;
  }
  .snooper-4-text li, .snooper-3-text li, .snooper-2-text li, .snooper-1-black-background-text li {
    font-family: "Baskerville", Serif;
    font-size: 18px;
  }
  .snooper-4-text .purchase span, .snooper-3-text .purchase span, .snooper-2-text .purchase span, .snooper-1-black-background-text .purchase span {
    font-family: "Baskerville", Serif;
    font-size: 18px;
  }
  .snooper-4-text .purchase span:hover, .snooper-3-text .purchase span:hover, .snooper-2-text .purchase span:hover, .snooper-1-black-background-text .purchase span:hover {
    font-family: "Baskerville", Serif;
    font-size: 18px;
  }
  .snooper-4-image-container, .snooper-3-image-container, .snooper-2-image-container, .snooper-1-image-container {
    width: 100vw;
  }
}
@media screen and (max-width: 414px) {
  .arrow-chasing-itself {
    width: 5vw;
  }
}
@media screen and (max-width: 411px) {
  .arrow-chasing-itself {
    width: 5vw;
  }
}
@media screen and (max-width: 376px) {
  .arrow-chasing-itself {
    width: 5vw;
  }
}
/*# sourceMappingURL=snooper-2.0.css.map */

/*# sourceMappingURL=styles.css.map */