/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #fff;
  margin: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0.020em;
  font-size: 12px;
  color: #a7abb5;
}

canvas {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
}

.scene-wrapper {
  position: relative;
  height: 100%;
}

svg {
  max-height: 600px;
  max-width: calc(100% - 60px);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media(max-height: 780px) {
  svg {
    height: calc(100% - 60px);
  }
}

.instructions {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 20;
}

@media(max-height: 840px) {
  .instructions {
    bottom: 20px;
  }
}

.instructions span {
  color: #555656;
}

#waves path {
  -webkit-animation-name: waves;
          animation-name: waves;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes waves {
  0% {-webkit-transform: translateX(0);transform: translateX(0);}
  100% {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
}

@keyframes waves {
  0% {-webkit-transform: translateX(0);transform: translateX(0);}
  100% {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
}

#boat-1,
#boat-2 {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

#boat-1 {
  -webkit-animation-name: float;
          animation-name: float;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}

#boat-2 {
  -webkit-animation-name: floatReverse;
          animation-name: floatReverse;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}

@-moz-document url-prefix() {
  #boat-1,
  #boat-2 {
    display: none;
  }
}

@-webkit-keyframes float {
  0% {-webkit-transform: translateY(0) rotate(-10deg);transform: translateY(0) rotate(-10deg);}
  25% {-webkit-transform: translateY(5px) rotate(0deg);transform: translateY(5px) rotate(0deg);}
  50% {-webkit-transform: translateY(10px) rotate(10deg);transform: translateY(10px) rotate(10deg);}
  75% {-webkit-transform: translateY(5px) rotate(0deg);transform: translateY(5px) rotate(0deg);}
  100% {-webkit-transform: translateY(0) rotate(-10deg);transform: translateY(0) rotate(-10deg);}
}

@keyframes float {
  0% {-webkit-transform: translateY(0) rotate(-10deg);transform: translateY(0) rotate(-10deg);}
  25% {-webkit-transform: translateY(5px) rotate(0deg);transform: translateY(5px) rotate(0deg);}
  50% {-webkit-transform: translateY(10px) rotate(10deg);transform: translateY(10px) rotate(10deg);}
  75% {-webkit-transform: translateY(5px) rotate(0deg);transform: translateY(5px) rotate(0deg);}
  100% {-webkit-transform: translateY(0) rotate(-10deg);transform: translateY(0) rotate(-10deg);}
}

@-webkit-keyframes floatReverse {
  0% {-webkit-transform: translateY(0) rotate(10deg);transform: translateY(0) rotate(10deg);}
  25% {-webkit-transform: translateY(5px) rotate(0deg);transform: translateY(5px) rotate(0deg);}
  50% {-webkit-transform: translateY(10px) rotate(-10deg);transform: translateY(10px) rotate(-10deg);}
  75% {-webkit-transform: translateY(5px) rotate(0deg);transform: translateY(5px) rotate(0deg);}
  100% {-webkit-transform: translateY(0) rotate(10deg);transform: translateY(0) rotate(10deg);}
}

@keyframes floatReverse {
  0% {-webkit-transform: translateY(0) rotate(10deg);transform: translateY(0) rotate(10deg);}
  25% {-webkit-transform: translateY(5px) rotate(0deg);transform: translateY(5px) rotate(0deg);}
  50% {-webkit-transform: translateY(10px) rotate(-10deg);transform: translateY(10px) rotate(-10deg);}
  75% {-webkit-transform: translateY(5px) rotate(0deg);transform: translateY(5px) rotate(0deg);}
  100% {-webkit-transform: translateY(0) rotate(10deg);transform: translateY(0) rotate(10deg);}
}

svg {
  opacity: 0;
}

#outline {
  stroke-dasharray: 1572;
  stroke-dashoffset: 1572;
}

#city-line {
  stroke-dasharray: 495;
  stroke-dashoffset: 495;
}

#cloud-1,
#cloud-2 {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

#cloud-1 {
  -webkit-animation-name: clouds;
          animation-name: clouds;
  -webkit-animation-duration: 14s;
          animation-duration: 14s;
}

#cloud-2 {
  -webkit-animation-name: clouds;
          animation-name: clouds;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
}

@-webkit-keyframes clouds {
  0% {-webkit-transform: translateX(40px);transform: translateX(40px)}
  50% {-webkit-transform: translateX(0);transform: translateX(0)}
  100% {-webkit-transform: translateX(40px);transform: translateX(40px)}
}

@keyframes clouds {
  0% {-webkit-transform: translateX(40px);transform: translateX(40px)}
  50% {-webkit-transform: translateX(0);transform: translateX(0)}
  100% {-webkit-transform: translateX(40px);transform: translateX(40px)}
}

.gradient {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 0;
  height: 0;
  background: linear-gradient(180deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  z-index: 20;
  opacity: 0;
  transition: opacity 2s;
  -webkit-animation: AnimationName 5s ease infinite;
          animation: AnimationName 5s ease infinite;
}

@-moz-document url-prefix() {
  .gradient {
    display: none;
  }
}

@-webkit-keyframes AnimationName {
  0%{background-position:49% 0%}
  50%{background-position:52% 100%}
  100%{background-position:49% 0%}
}

@keyframes AnimationName {
  0%{background-position:49% 0%}
  50%{background-position:52% 100%}
  100%{background-position:49% 0%}
}