html{
background: linear-gradient(188deg, #8113ec, #13eca1);
background-size: 400% 400%;
-webkit-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
width:100%;
height: 100%;
}

#particles-js {width:100%; height:100%; position: absolute; -webkit-animation: appear 2.4s 1; animation: appear 2.4s 1;}




.ac { position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; text-align: center; }

.rndcnrs {border-radius: 2px;}

.box  { padding: 4rem 2rem; text-align: center; border:7px solid rgba(255,255,255,0.5); color: rgba(255,255,255,0.8); width: 5rem; height: 5rem; transition: all .3s 0s cubic-bezier(.77,-0.7,.24,1.64);}

 .box:hover { cursor: pointer;  background: rgba(255,255,255,0.1); width: 19rem; height: 19rem; border-radius: 50%; padding: 0rem 0rem; }

.box-option1  { padding: 4rem 2rem; text-align: center; border:7px solid rgba(255,255,255,0.5); color: rgba(255,255,255,0.8); width: 50rem; height: 5rem; background: rgba(255,255,255,0.);transition: all .3s 0s cubic-bezier(.77,-0.7,.24,1.64);   }

/* transition: all .3s 0s cubic-bezier(.77,-0.7,.24,1.64); */

.box h1 {color: inherit;}

/* ANIMATIONS */
@-webkit-keyframes AnimationName {
    0%{background-position:44% 0%}
    50%{background-position:57% 100%}
    100%{background-position:44% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:44% 0%}
    50%{background-position:57% 100%}
    100%{background-position:44% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:44% 0%}
    50%{background-position:57% 100%}
    100%{background-position:44% 0%}
}
@keyframes AnimationName { 
    0%{background-position:44% 0%}
    50%{background-position:57% 100%}
    100%{background-position:44% 0%}
}

@keyframes appear{
  from {
    @include transform(scale(0));
    opacity:0;
  }
  to {
    @include transform(scale(1));
    opacity:1;
  }
}