body, html {
  height: 100vh;
  overflow: hidden;
  background-image: url(assets/images/bg-mobile.jpg);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
}

@media (min-width: 800px) {
  body, html {
    background-image: none;
    background-color: #F300FF;
  }
}

body::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(assets/images/flare-mobile.png);
  background-size: contain;
  background-position: top right;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  background-repeat: no-repeat;
  z-index: 100;
}

@media (min-width: 800px) {
  body::after {
    background-image: url(assets/images/flare.png);
  }
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  list-style: none;
  font-weight: 400;
}

img {
  display: block;
  position: absolute;
}

#tagline {
  width: 120%;
  right: -10%;
  top: 5%;
  z-index: 5;
}

@media (min-width: 800px) {
  #tagline {
    width: 50vw;
    right: 30px;
    top: auto;
    bottom: 30px;
  }
}

#logo {
  width: 120%;
  left: -10%;
  top: 15%;
  z-index: 10;
}

@media (min-width: 800px) {
  #logo {
    width: 50vw;
    top: 30px;
    left: 50px;
  }
}

#soup {
  width: 130%;
  right: 10%;
  bottom: -10%;
}

@media (min-width: 800px) {
  #soup {
    width: 60vw;
    bottom: auto;
    top: 40px;
    right: -15vw;
  }
}

#janana {
  width: 90%;
  bottom: 10%;
  left: 10%;
  z-index: 20;
}

@media (min-width: 800px) {
  #janana {
    width: 30vw;
    bottom: 50px;
    left: 60px;
  }
}

a.cta-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  width: 240px;
  height: 240px;
  z-index: 100;
  top: 75%;
  left: 50%;
  -webkit-transform: translateY(-120px) translateX(-120px);
          transform: translateY(-120px) translateX(-120px);
}

@media (min-width: 1000px) {
  a.cta-button {
    width: 350px;
    height: 350px;
    z-index: 100;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-180px) translateX(-180px);
            transform: translateY(-180px) translateX(-180px);
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
  }
  a.cta-button:hover {
    -webkit-transform: translateY(-180px) translateX(-180px) scale(1.2);
            transform: translateY(-180px) translateX(-180px) scale(1.2);
  }
}

@-webkit-keyframes scale {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes scale {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

svg.star {
  fill: blue;
  -webkit-animation: rotation 12s linear infinite;
          animation: rotation 12s linear infinite;
  -webkit-filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    fill: red;
  }
  16% {
    fill: yellow;
  }
  32% {
    fill: lime;
  }
  48% {
    fill: cyan;
  }
  64% {
    fill: blue;
  }
  80% {
    fill: magenta;
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    fill: red;
  }
}

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    fill: red;
  }
  16% {
    fill: yellow;
  }
  32% {
    fill: lime;
  }
  48% {
    fill: cyan;
  }
  64% {
    fill: blue;
  }
  80% {
    fill: magenta;
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    fill: red;
  }
}

svg.cta {
  position: absolute;
  width: 200px;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}

@media (min-width: 1000px) {
  svg.cta {
    width: 250px;
  }
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 10px;
  z-index: 19;
  font-size: 12px;
  color: white;
  font-family: helvetica, arial, sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

@media (min-width: 800px) {
  footer {
    font-size: 14px;
    padding: 20px;
  }
}
/*# sourceMappingURL=style.css.map */