:root {
  
  --clr-two: rgb(127, 255, 0);
  
  --clr-bg: white;
}



.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.neon-button {
  font-size: 1rem;

  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  padding: 0.5em 4em;
  margin: 2rem;
  border-radius: 0.25em;
  position: relative;
  border-radius: 2.25em;

}

.neon-button__2 {
  color: white;
  font-weight:bold;
  border: var(--clr-two) 0.125em solid;
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em --clr-two;
  box-shadow: inset 0 0 0.5em 0 var(--clr-two), 0 0 0.5em 0 var(--clr-two);
  background: rgb(0,0,0);
background: linear-gradient(74deg, rgba(0,0,0,1) 0%, rgba(213,1,1,1) 41%, rgba(225,91,0,1) 80%, rgba(255,112,0,1) 100%); 
width:80%;
text-align:center;
 font-size:25px;
}



.neon-button::before {
  content: "";
  position: absolute;
  top: 70%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: perspective(3.5em) rotateX(-25deg) scale(0.5, 0.2);
  filter: blur(1.5em);
  opacity: 0.1;
  pointer-events: none;
  transition: all .2s;
  
}

.neon-button.active::before {
  animation: scalingShadow 0.5s ease-in-out;
}

@keyframes scalingShadow {
  0% {
    top: 120%;
    transform: perspective(1.5em) rotateX(45deg) scale(0.8, 0.3);
  }
  50% {
    top: 165%;
    transform: perspective(1.5em) rotateX(45deg) scale(0.75, 0.3);
  }
  100% {
    top: 120%;
    transform: perspective(1.5em) rotateX(45deg) scale(0.8, 0.3);
  }
}


.neon-button__2::before {
  background: green;
  box-shadow: 0 0 2em 0.5em var(--clr-two);
}


.neon-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  z-index: -1;
  transition: opacity 100ms linear;
}

.neon-button__2::after {
  box-shadow: 0 0 2em 0.5em var(--clr-two);
  background-color: var(--clr-two);
}


.neon-button:hover::before,
.neon-button:focus::before {
  opacity: 1;
}

.neon-button:hover::after,
.neon-button:focus::after {
  opacity: 1;
}

.neon-button:hover,
.neon-button:focus {
  outline: none;
  color: var(--clr-bg);
  text-shadow: none;
}

.active {
  animation: animate 0.5s ease-in-out;
}

@keyframes animate {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-40%);
  }
  100% {
    transform: translateY(0%);
  }
}



@media screen and (max-width: 479px)
{
	.neon-button__2 {
  color: white;
  font-weight:bold;
  font-size:18px;
  border: var(--clr-two) 0.125em solid;
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em --clr-two;
  box-shadow: inset 0 0 0.5em 0 var(--clr-two), 0 0 0.5em 0 var(--clr-two);
  background: rgb(0,0,0);
background: linear-gradient(74deg, rgba(0,0,0,1) 0%, rgba(213,1,1,1) 41%, rgba(225,91,0,1) 80%, rgba(255,112,0,1) 100%); 

text-align:center;
}


	  
	  
.neon-button {
  font-size: 1rem;

  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  padding: 0.5em 2em;
  
  border-radius: 2.25em;
  position: relative;

}
	  
	  
}