For Beatrix


              // Fonts
@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Josefin+Sans:300');
$font-primary: 'Dancing Script', cursive;
$font-secondary: 'Josefin Sans', sans-serif;

// Colors
$sky-color: #181835;
$sky-color-2: #784084;
$light-blue: #9796F2;
$clouds: lighten(#9796F2, 5%);
$white: #fff;


// General
body{
  margin: 0;
  padding: 0;
  background: $sky-color;
}

.artboard{
  position: relative;
  width: 40rem;
  max-width: 100%;
  height: 500px;
  margin: 3rem auto;
}


// Stars
.stars{
  .star{ 
    position: absolute;
    width: 10px;
    height: 10px;
    &::before, &::after{
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 3px;
      height: 3px;
      background: $white;
      border-radius: 50%;
      animation: shineMe 1s ease-in-out infinite alternate;
      transform-origin: middle;
      box-shadow: 0 0 6px 3px rgba($white, .15);
    }
    &::before{
      transform: translate(-50%, -50%);
    }
    &::after{
      transform: translate(-50%, -50%) rotate(90deg);
    }
    &:nth-child(1){
      top: 3%;
      left: 3%;
      &::before, &::after{
        animation-delay: 1s;
      }
    }
    &:nth-child(2){
      top: 20%;
      left: 23%;
      transform: scale(1.4);
    }
    &:nth-child(3){
      top: 3%;
      right: 7%;
      transform: scale(.7);
    }
    &:nth-child(4){
      top: 9%;
      left: 59%;
      transform: scale(1.5);
      &::before, &::after{
        animation-delay: 1.5s;
      }
    }
    &:nth-child(5){
      top: 19%;
      left: 69%;
      &::before, &::after{
        animation-delay: 1s;
      }
    }
    &:nth-child(6){
      top: 49%;
      left: 0;
      transform: scale(.7);
      &::before, &::after{
        animation-delay: 1s;
      }
    }
  }
}

@keyframes shineMe {
  from{
    height: 3px;
  }
  to{
    height: 100%;
  }
}

.stars2{
  .star{ 
    position: absolute;
    width: 10px;
    height: 10px;
    animation: swing2 8s linear infinite;
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 3px;
      height: 3px;
      background: $sky-color-2;
      border-radius: 50%;
      animation: shineMe2 2s ease-in-out infinite alternate;
      transform: translate(-50%, -50%);
      transform-origin: middle;
      box-shadow: 0 0 6px 3px rgba($light-blue, .15);
      opacity: .1;
    }
    &:nth-child(1){
      top: 20%;
      right: 3%;
    }
    &:nth-child(2){
      top: 30%;
      left: 6%;
    }
    &:nth-child(3){
      top: 3%;
      left: 32%;
    }
    &:nth-child(4){
      top: 9%;
      left: 69%;
    }
    &:nth-child(5){
      top: 40%;
      right: 9%;
    }
    &:nth-child(6){
      top: 50%;
      left: 25%;
    }
  }
}

@keyframes shineMe2{
  from{
    opacity: .3;
  }
  to{
    opacity: .9;
  }
}


// Moon
.moon{
  z-index: 2;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: $white;
  border-radius: 50%;
  &::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 15px 8px rgba($white, .18);
    animation: moonLight 2s ease-in-out infinite alternate;
  }
  .ship{
    z-index: 3;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    span{
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 20px;
      height: 5px;
      background: rgba($sky-color-2, .3);
      border-radius: 50%;
      transform: rotate(-15deg);
      animation: travel 12s linear infinite;
      &::before{
        position: absolute;
        left: 50%;
        top: -5px;
        content: '';
        width: 7px;
        height: 5px;
        border-radius: 50% 50% 0 0;
        border: 1px solid rgba($sky-color, .3);
        transform: translateX(-50%);
      }
      &::after{
        position: absolute;
        right: -3px;
        top: 2px;
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(#c00, .2);
        transform: translateY(-50%);
        animation: engine .2s ease-in-out infinite alternate;
      }
    }
  }
  
}

@keyframes moonLight{
  from {
    opacity: .5;
  }
  to {
    opacity: 1;
  }
}

@keyframes travel{
  from {
    top: 30%;
    right: -30%;
  }
  to{
    top: 70%;
    right: 130%;
  }
}
@keyframes engine{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}


// Light
.light{
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%) scale(1);
  width: 650px;
  height: 600px;
  background-image: radial-gradient(circle, rgba($sky-color-2, .7), transparent 70%);
  border-radius: 50%;
  animation: aurora 6s ease infinite alternate;
}

@keyframes aurora{
  from{
    transform: translateX(-50%) scale(1);
  }
  to{
    transform: translateX(-50%) scale(1.05);
  }
}


// Clouds
.cloud1,
.cloud2{
  z-index: 3;
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: $clouds;
  &::before{
    position: absolute;
    top: -30px;
    left: 40px;
    content: '';
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: $clouds;
  }
  &::after{
    position: absolute;
    top: 10px;
    left: 100px;
    content: '';
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: $clouds;
  }
  span{
    position: absolute;
    top: 25px;
    left: 70px;
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: $clouds;
  }
}
.cloud1{
  top: 70%;
  left: 3%;
  transform: scale(1.4);
  opacity: 0.4;
  animation: float 3s linear infinite alternate;
}
.cloud2{
  z-index: 1;
  top: 58%;
  left: auto;
  right: 20%;
  opacity: .4;
  animation: float2 3s linear infinite alternate;
}

@keyframes float{
  from{
    transform: scale(1.4) translateY(0);
  }
  to{
    transform: scale(1.4) translateY(10px);
  }
}
@keyframes float2{
  from{
    transform: translateY(0);
  }
  to{
    transform: translateY(-10px);
  }
}


// Sea
.sea{
  z-index: 3;
  position: absolute;
  top: 80%;
  left: 0;
  width: 100%;
  min-height: 340px;
  margin-bottom: 3rem;
  overflow: hidden;
  background: $sky-color;
  &::before{
    content: '';
    position: absolute;
    top: -300px;
    left: 50%;
    transform: translateX(-50%);
    width: 633px;
    height: 633px;
    border: 1px dashed rgba($clouds, .25); 
    border-radius: 50%;
  }
}

.beams{
  position: relative;
  height: 5px;
  margin: 1rem auto 0;
  background: $white;
  border-radius: 5px;
  &:nth-child(1){
    height: 3px;
    width: 50px;
    opacity: 0.3;
    animation: swing 8s linear infinite;
  }
  &:nth-child(2){
    width: 90px;
    opacity: 0.15;
    animation: swing2 8s linear infinite;
  }
  &:nth-child(3){
    width: 130px;
    height: 7px;
    opacity: 0.08;
    animation: swing 8s linear infinite;
  }
  &:nth-child(4){
    width: 170px;
    height: 9px;
    opacity: 0.04;
    animation: swing2 8s linear infinite;
  }
}

@keyframes swing {
  0% {
    transform: translateX(0); 
  }
  25% {
    transform: translateX(10px); 
  }
  50% {
    transform: translateX(0); 
  }
  75% {
    transform: translateX(-10px); 
  }
  100% {
    transform: translateX(0); 
  }
}
@keyframes swing2 {
  0% {
    transform: translateX(0); 
  }
  25% {
    transform: translateX(-10px); 
  }
  50% {
    transform: translateX(0); 
  }
  75% {
    transform: translateX(10px); 
  }
  100% {
    transform: translateX(0); 
  }
}


// Text
.text{
  margin-top: 3rem;
  text-align: center;
  color: $white;
  h1{
    display: inline-block;
    position: relative;
    margin: 0 0 1rem;
    font-family: $font-primary;
    font-size: 4em;
    &::before{
      content: '';
      position: absolute;
      top: 20px;
      right: 22px;
      width: 12px;
      height: 12px;
      background: lighten($sky-color-2, 10%);
      border-radius: 50%;
      transform: rotate(45deg);
    }
  }
  p{
    margin: 0;
    padding: 0 1rem;
    font-family: $font-secondary;
    font-size: 1.25em;
    color: rgba($clouds, .5); 
  }
}
            


!

Let’s block ads! (Why?)