/* Add Polya font */
@font-face {
  font-family: Polya;
  src: url('PolyaFont.otf') format("opentype");
}
/* Add GlitchCity font */
@font-face {
  font-family: GlitchCity;
  src: url('GlitchCityRegular.ttf') format("truetype");
}
/* Add DoctorGlitch font */
@font-face {
  font-family: DoctorGlitch;
  src: url('DoctorGlitch.otf') format("opentype");
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-size: 16px;font-family: "Vazir",sans-serif;overflow: hidden !important}
a{text-decoration: none;}

.container {
  width: 100%;
  height: 100vh;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(14,14,14);
}
h1 {
  font-family: "Source Sans Pro Black",Poppins,"Vazir",sans-serif;
  font-size: 10rem;
  text-transform: uppercase;
  text-align: center;
  /*font-weight: lighter;*/
}
.text {
  position: relative;
  font-size: 1.9rem;
  color: rgb(241,241,241);
  text-align: center;
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.glitch{
  text-shadow: 3px 0 0 rgba(255,0,0,.6),
  -3px 0 0 rgba(0, 255, 250, 0.9);
  -webkit-animation: glitch 5s infinite steps(2);
  -o-animation: glitch 5s infinite steps(2);
  animation: glitch 5s infinite steps(2);
  transition: all .2s linear;
}

.btn:hover {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
.btn {
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: #f8f9fa 1px solid;
  padding: .375rem .75rem;
  margin: .375rem;
  font-size: 1rem;
  border-radius: .25rem;
  color: #f8f9fa;
  transition: all .5s ease-in-out;
}
.box
{
  position: absolute;
  background: rgb(14,14,14) fixed;
}
@keyframes glitch {
  10%{
    text-shadow: -1px 0 0 red,
    1px 0 0 rgba(0,255,255,.6);
  }
  20%{
    text-shadow: -2px 0 0 rgba(255,0,0,.6),
    2px 0 0 rgba(0, 255, 250, 0.9);

  }
  30%{
    text-shadow: -3px 0 0 red,
    3px 0 0 rgba(0,255,255,.6);
    transform: skewX(10deg);

  }
  40%{
    text-shadow: -2px 0 0 rgba(255,0,0,.6),
    2px 0 0 rgba(0, 255, 255, 0.6);
  }
  50%{
    text-shadow: -4px 0 0 rgba(255,0,0,.6),
    4px 0 0 rgba(0, 255, 250, 0.9);
    transform: skewY(-10deg);
  }
  60%{
    text-shadow: -1px 0 0 red,
    1px 0 0 rgba(0, 255, 255, 0.6);
    transform: scale(1.2);
  }
  70%{
    transform: rotateY(180deg);
  }
  80%{
    color: red;
    transform: translateX(5px);
  }
  85%{
    color: rgba(0, 255, 250, 0.9);
    transform: translateY(-5px);
  }
  90%{
    color: rgb(241,241,241);
    text-shadow: -3px 0 0 red,
    3px 0 0 rgba(0, 255, 250, 0.9);
    letter-spacing: 2px;
    transform: skewY(-10deg) skewX(10deg) scale(1.1) rotateY(180deg);
  }
}