@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
* {
    margin: 0;
    padding: 0;
}
html, body { 
    height: 100%;
}
body {
  background: #000712;
  overflow: hidden;
}

.soon
{
    position: fixed;
    top: calc(6% + 116px);
    left: calc(16% + 84px);
    font-family: 'Great Vibes', cursive;
    color: transparent;
    -webkit-text-stroke: 1px rgba(245, 245, 245, 1);
    font-weight: bold;
    font-size: 64px;
    z-index: 1001;
}

.moon {
    position: fixed;
    top: 6%;
    left: 16%;
    height: 300px;
    width: 300px;
    background: rgb(207, 207, 212);
    border-radius: 50%;
    box-shadow: 0 0 5px #d3b3fc, 0 0 25px #f1edf7, 0 0 50px #f2f0f5,		0 0 100px #c9b3fc, 0 0 170px #999aad, inset 0 5px 12px 26px #f5f5f5,		inset -2px 8px 15px 36px #e6e6db;
    z-index: 1000;
}

.ocean { 
  height: 5%;
  width:100%;
  position:fixed;
  bottom:0;
  left:0;
  background: #015871;
  z-index: 1003;
}

.wave {
  background: url(./assets/wave.svg) repeat-x; 
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0,-25px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}


@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkling, .clouds {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(./assets/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(./assets/twinkling.png) repeat top center;
  z-index:1;
  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds{
    background:transparent url(./assets/clouds.png) repeat top center;
    z-index:1002;
    -moz-animation:move-clouds-back 200s linear infinite;
    -ms-animation:move-clouds-back 200s linear infinite;
    -o-animation:move-clouds-back 200s linear infinite;
    -webkit-animation:move-clouds-back 200s linear infinite;
    animation:move-clouds-back 200s linear infinite;
}