@font-face {
  font-family: cfont;
  src: url(/font.otf);
}

#particles-js {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -100;

}

body {
  background-color: #141414;
}

#text {
  font-family: 'cfont';
  color: rgba(255, 255, 255, .1);
  background: linear-gradient(to right, rgb(76, 217, 105), rgb(52, 170, 220), rgb(88, 86, 217), rgb(255, 45, 83), rgb(255, 45, 83), rgb(88, 86, 217), rgb(52, 170, 220), rgb(76, 217, 105));
  background-size: 400%;
  -webkit-background-clip: text;
  font-weight: 900;
  text-align: center;
  animation: sTransition 10s linear infinite;
}

#text2 {
  font-family: 'cfont';
  color: rgba(255, 255, 255, .1);
  background: linear-gradient(to right,     rgb(76, 217, 208),     rgb(240, 133, 45), rgb(255, 45, 160), rgb(240, 133, 45), rgb(76, 217, 208));
  background-size: 400%;
  -webkit-background-clip: text;
  font-weight: 900;
  text-align: center;
  animation: sTransition 10s linear infinite;
}

h1{
   font-size: 06em;
   margin-bottom: 0;
   margin-top: 0;
}
a{
  font-size: 1.4em;
  text-decoration: none;
  color: inherit;
}

.flexbox {
  display: flex;
  justify-content: space-around
}

/* container */
.responsive-two-column-grid {
  display:block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* columns */
.responsive-two-column-grid > * {
  padding:5rem;
}

@media (min-width:1000px) {
  .responsive-two-column-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
  }
}

@keyframes sTransition {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 400%;
  }
}