html,body {
  padding:0px;
	margin:0px;
	border:0px;
  height:100%;
  background-color: #000000;
}


h1 {
  text-align: center;
  font-family: monospace, sans-serif;
	font-weight: 700;
  font-size: 3rem;
  color:#fff;
  
}

.no-scroll {
  overflow:hidden;
}
  

p {
	margin: 1rem;
	text-align: left;
	color: #fff;
	font-family: monospace, sans-serif;
	font-weight: 500;
	line-height: 1.15;
	width: 100%;
  font-size: clamp( 2rem, 4.5vw + 1rem, 5rem );
}

.hidden {
  display:none!important;
}

.footer-zone {
	top:5px;
	position:fixed;	
	width:100%;
	text-align: center;
}

.reaction-wrapper {
  position:absolute;
	bottom:0;
  width:100%;
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
}

.textcontainer {	
  text-align: center;
}


.footer-section {
	flex-basis:100%;
}


.footer-copyright{
	font-size: 1rem;
}

.bottom-icon {
  z-index:20;
  font-size:6em;
}

.particletext {
  text-align: center;
  position: relative;
  font-size:2em;
}

.particle{
  z-index: 5;
}

.particletext.r1-icon > .particle {
  opacity: 0;
  position: absolute;
  animation: r1-anim 6s ease-in infinite;
}

.particletext.r1-icon > .particle:before, body .particletext.r1-icon > .particle:after {
  position: absolute;
  content: "";
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.particletext.r2-icon > .particle {
  opacity: 0;
  position: absolute;
  animation: r2-anim 6s ease-in infinite;
}

.particletext.r2-icon > .particle:before, body .particletext.r2-icon > .particle:after {
  position: absolute;
  content: '';
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  
}


.particletext.r3-icon > .particle {
  opacity: 0;
  position: absolute;
  animation: r3-anim 6s ease-in infinite;
}

.particletext.r3-icon > .particle:before, body .particletext.r3-icon > .particle:after {
  position: absolute;
  content: "";
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}



.particletext.r4-icon > .particle {
  opacity: 0;
  position: absolute;
  animation: r4-anim 6s ease-in infinite;
}

.particletext.r4-icon > .particle:before, body .particletext.r4-icon > .particle:after {
  position: absolute;
  content: "";
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}


@keyframes r1-anim {
  0% {
    opacity: 0;
    transform: translate(0, 0%) rotate(0deg);
  }
  20% {
    opacity: .3;
  }
  50% {
    opacity: .7;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, -9000%) rotate(0deg);
  }
}




@keyframes r2-anim {
  0% {
    opacity: 0;
    transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: .3;
  }
  50% {
    opacity: .7;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, -9000%) rotate(45deg);
  }
}


@keyframes r3-anim {
  0% {
    opacity: 0;
    transform: translate(0, 0%) rotate(0deg);
  }
  20% {
    opacity: .3;
  }
  50% {
    opacity: .7;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, -9000%) rotate(0deg);
  }
}

@keyframes r4-anim {
  0% {
    opacity: 0;
    transform: translate(0, 0%) rotate(0deg);
  }
  20% {
    opacity: .3;
  }
  50% {
    opacity: .7;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, -9000%) rotate(0deg);
  }
}


@media only screen and (max-width: 767px){

  .particletext {
    font-size:2em;
  }
  .bottom-icon{
    z-index:20;
    font-size:2em!important;
  }
}