* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

html, body, .content {
  width: 100%;
  height: 100%;
  color: #fff;
  background: #eaf5aa;
  font-family: 'Oswald', Verdana;
  font-weight: 300;
  overflow: hidden;
  background: linear-gradient(270deg, #83eea8, #eaf5aa);
  background-size: 400% 400%;
  -webkit-animation: bg 30s ease infinite;
  -moz-animation: bg 30s ease infinite;
  -o-animation: bg 30s ease infinite;
  animation: bg 30s ease infinite; }

.circle {
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  -webkit-animation: circle 10s forwards cubic-bezier(0.19, 1, 0.22, 1);
  -moz-animation: circle 10s forwards cubic-bezier(0.19, 1, 0.22, 1);
  -o-animation: circle 10s forwards cubic-bezier(0.19, 1, 0.22, 1);
  animation: circle 10s forwards cubic-bezier(0.19, 1, 0.22, 1); }

.content-bg {
  -webkit-filter: blur(50px);
  -moz-filter: blur(50px);
  filter: blur(50px);
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0; }

.circle-bg {
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  -webkit-animation: circle-bg 5s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-animation: circle-bg 5s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-animation: circle-bg 5s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  animation: circle-bg 5s forwards cubic-bezier(0.645, 0.045, 0.355, 1); }

@-webkit-keyframes circle {
  0% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); }
  15% {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); } }
@-moz-keyframes circle {
  0% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); }
  15% {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); } }
@-ms-keyframes circle {
  0% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); }
  15% {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); } }
@keyframes circle {
  0% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); }
  15% {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); } }
@-webkit-keyframes circle-bg {
  0% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); }
  30% {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); } }
@-moz-keyframes circle-bg {
  0% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); }
  30% {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); } }
@-ms-keyframes circle-bg {
  0% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); }
  30% {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); } }
@keyframes circle-bg {
  0% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); }
  30% {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0); } }
@-webkit-keyframes bg {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
@-moz-keyframes bg {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
@-ms-keyframes bg {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
@keyframes bg {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
@media (max-width: 1024px) {
  .content-bg {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    filter: blur(2px);
    opacity: 0.1; } }

/*# sourceMappingURL=style.css.map */