@font-face {
  font-family: 'ProximaNova';
  src: url('./fonts/ProximaNova-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ProximaNova';
  src: url('./fonts/ProximaNova-Light.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'ProximaNova';
  src: url('./fonts/ProximaNova-Semibold.otf') format('opentype');
  font-weight: 500;
  font-style: bold;
}

body {
    color: 'green' !important
}

.container {
    margin: auto;
    text-align: center;
    &__image {
        width: 100px;
        height: auto;
    }
}

.left {
    text-align: left;
}

$stars: 350;         // Number of start per layer
$depth: 300;         // Depth between star layers
$speed: 3s;          // Number of seconds to transition between layers
$width: 3000;        // Width of the starfield
$height: 960;        // Height of the starfield

html, body {
  height: 100%;
  overflow: hidden;
}
body {
  background: #000;
  perspective: 340px;
}
.stars {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  $box-shadow: ();
  @for $i from 0 through $stars {
    $box-shadow: $box-shadow, (random($width)-$width/2 + px) (random($height)-$height/2 + px) hsl(90,0,75+random(25));
  }
  box-shadow: $box-shadow;
  animation: fly $speed linear infinite;
  transform-style: preserve-3d;
  
  &:before, &:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    box-shadow: inherit;
  }
  &:before {
    transform: translateZ(-$depth + px);
    animation: fade1 $speed linear infinite;
  }
  &:after {
    transform: translateZ(-$depth * 2 + px);
    animation: fade2 $speed linear infinite;
  }
}

@keyframes fly {
  from {
    transform: translateZ(0px);
  }
  to {
    transform: translateZ($depth + px);
  }
}

@keyframes fade1 {
  from {
    opacity: .5;
  }
  to {
    opacity: 1;
  }  
}
@keyframes fade2 {
  from {
    opacity: 0;
  }
  to {
    opacity: .5;
  }  
}