/* Button resets and style */
button {
	margin: 0px auto;
	font-family: "Roboto";
	font-size: 16px;
	color: #ffffff;
	cursor: pointer;
	border-radius: 100px;
	padding: 10px 20px;
	border: 0px solid #000;		
	}

/* Initiate Auto-Pulse animations */
button.pulse-button {
	animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in;
}

/* Initiate color change for pulse-on-hover */
button.pulse-button-hover {
	animation: colorShift 10000ms infinite ease-in;
}

/* Continue animation and add shine on hover */
button:hover,
button:focus {
	animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in, hoverShine 200ms;
}

/* Declate color shifting animation */
@keyframes colorShift {
	0%, 100% {
			background: #0045e6;
	}
	33% {
		background: #fb3e3e;
	}
	66%{
		background: #0dcc00;
	}
}

/* Declare border pulse animation */
@keyframes borderPulse {
  0% {
    box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255,.4), 0px 0px 0px 0px rgba(255,255,255,1);
  }
  100% {
    box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255,.2), 0px 0px 0px 10px rgba(255,255,255,0);
  }
}

/* Declare shine on hover animation */
@keyframes hoverShine {
	0%{
		background-image: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
	}
	50%{
		background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
	}
	100%{
		background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4) 100%);
	}
}