/*.background-radial-gradient {
  background-color: hsl(218, 41%, 15%);
  background-image: radial-gradient(650px circle at 0% 0%,
      hsl(218, 41%, 35%) 15%,
      hsl(218, 41%, 30%) 35%,
      hsl(218, 41%, 20%) 75%,
      hsl(218, 41%, 19%) 80%,
      transparent 100%),
    radial-gradient(1250px circle at 100% 100%,
      hsl(218, 41%, 45%) 15%,
      hsl(218, 41%, 30%) 35%,
      hsl(218, 41%, 20%) 75%,
      hsl(218, 41%, 19%) 80%,
      transparent 100%);
    -webkit-animation: bg 30s infinite;
          animation: bg 30s infinite;    
}

@-webkit-keyframes bg {
  0%, 100% {
    background-color: #1e90ff;
  }
  25% {
    background-color: #39d24a;
  }
  50% {
    background-color: #ffe244;
  }
  75% {
    background-color: #ff36a3;
  }
}

@keyframes bg {
  0%, 100% {
    background-color: #1e90ff;
  }
  25% {
    background-color: #39d24a;
  }
  50% {
    background-color: #ffe244;
  }
  75% {
    background-color: #ff36a3;
  }
}
*/
hr{ 
  border: 0; 
  height: 3px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}


.background-radial-gradient {
  background: 
  radial-gradient(circle at 0% 0%,hsl(218, 41%, 35%) 15%,transparent 80%), 
  radial-gradient(1900px circle at 50% 100%, #000000, transparent 70%),
  linear-gradient(to top, dodgerblue 0%, transparent 70%), 
  linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #fff;
  -webkit-animation: bg 30s infinite;
          animation: bg 30s infinite;
}
}

@-webkit-keyframes bg {
  0%, 100% {
    background-color: #1e90ff;
  }
  25% {
    background-color: #288c32;
  }
  50% {
    background-color: #91592b;
  }
  75% {
    background-color: #871853;
  }
}

@keyframes bg {
  0%, 100% {
    background-color: #1e90ff;
  }
  25% {
    background-color: #288c32;
  }
  50% {
    background-color: #91592b;
  }
  75% {
    background-color: #871853;
  }
}

.bg-glass {
  background-color: hsla(0, 0%, 100%, 0.6) !important;
  backdrop-filter: saturate(200%) blur(25px);
}


// SASS Variables.
$text: #fff;
$link: #e34234;
$link-hover: #ba160c;
$background: #00356B;

canvas {
  display: block;
  vertical-align: bottom;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background: $background
}

.text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%,-50%);
  color: $text;
  max-width: 90%;
  padding: 2em 3em;
  background: rgba(0, 0, 0, 0.4);
  text-shadow: 0px 0px 2px #131415;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-size: 2.25em;
  font-weight: 700;
  letter-spacing: -1px;
}

a,
a:visited {
  color: $link;
  transition: 0.25s;
}

a:hover,
a:focus {
  color: $link-hover;
}


ul,li{
  color: hsl(218, 81%, 85%);
}