/* button code: https://codepen.io/cmillard/pen/yLQQoeM */

/* ROOT STYLES FOR VARIABLES */
:root {
	--system-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--fontPoppins: 'Poppins', sans-serif;
	
	--borderRadius: 3.125rem;
  --borderRadius: 0.678em;
}
/* ROOT STYLES FOR VARIABLES */

/* PAGE RESET STYLES */
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	outline: 0.063em solid rgba(0, 0, 0, 0);
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* PAGE RESET STYLES */

.button-shiny {
	position: relative;
	display: inline-block;
	padding: .718rem 1.618rem;
	color: rgba(255, 255, 255, 1);
	letter-spacing: 1px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 -1px 2px rgba(0, 0, 0, 0.2);
	background: rgba(67, 67, 67, 1);
	border: 1px solid rgba(0, 0, 0, .35);
	border-radius: var(--borderRadius);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.25),
		0 1px 0 rgba(255, 255, 255, 0.25) inset,
		0 0 0 rgba(0, 0, 0, 0.5) inset,
		0 1.10em 0 rgba(255, 255, 255, 0.25) inset,
		0 -1.10em 1.25em rgba(0, 0, 0, 0.32) inset,
		0 1.10rem 1.25em rgba(255, 255, 255, 0.05) inset,
		0 1.10em 6px rgba(255, 255, 255, .1) inset;

	transition: all 150ms linear 0s;

	text-transform: uppercase;
	font-family: var(--fontPoppins);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	/* margin: 0.618rem; */
	
	
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: 110% 120%;
	background-position: center center;
}

.button-shiny:hover {
	border-bottom: 4px solid rgba(0, 0, 0, .55);
	cursor: pointer;
	text-decoration: none;
	box-shadow:
		0 5px 6px rgba(0, 0, 0, 0.16),
		0 1px 0 rgba(255, 255, 255, 0.25) inset,
		0 0 0 rgba(0, 0, 0, 0.25) inset,
		0 20px 0 rgba(255, 255, 255, 0.04) inset,
		0 -20px 20px rgba(0, 0, 0, 0.32) inset,
		0 20px 20px rgba(255, 255, 255, 0.07) inset;
}


.button-shiny:active {
	border-bottom: 0px solid rgba(0, 0, 0, .55);
	box-shadow:
		1px 1px 1px rgba(255, 255, 255, .85),
		0 1px 0 rgba(255, 255, 255, 0.25),
		0 1px 0 rgba(255, 255, 255, 0) inset,
		0 0 5px rgba(0, 0, 0, 0.4) inset,
		0 20px 0 rgba(255, 255, 255, 0.03) inset,
		0 -20px 20px rgba(0, 0, 0, 0.25) inset,
		0 20px 20px rgba(255, 255, 255, 0.05) inset;
		
	-webkit-filter: saturate(120%);
	filter: saturate(120%);
}

.button-shiny:before {
	content: "";
	display: block;
	position: absolute;
	border-radius: inherit;
	background: -moz-linear-gradient(left, 
		rgba(255, 255, 255, 0) 0%, 
		rgba(255, 255, 255, 1) 50%, 
		rgba(255, 255, 255, 0) 100%
	);
	background: -webkit-gradient(linear, 
		left top, 
		right top, 
		color-stop(0%, rgba(255, 255, 255, 0)), 
		color-stop(50%, rgba(255, 255, 255, 1)), 
		color-stop(100%, rgba(255, 255, 255, 0))
	);
	background: -webkit-linear-gradient(left, 
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 1) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	background: linear-gradient(left, 
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 1) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	padding: x 12px;
	top: 0;
	left: 9%;
	height: 1.5px;
	width: 50%;
	box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
	opacity: .6;
	transition: all 150ms ease-in-out 0s;
}

.button-shiny:after {
	content: "";
	display: block;
	position: absolute;
	border-radius: inherit;
	background: -moz-linear-gradient(left, 
		rgba(255, 255, 255, 0) 0%, 
		rgba(255, 255, 255, 1) 50%, 
		rgba(255, 255, 255, 0) 100%
	);
	background: -webkit-gradient(linear, 
		left top, 
		right top, 
		color-stop(0%, rgba(255, 255, 255, 0)), 
		color-stop(50%, rgba(255, 255, 255, 1)), 
		color-stop(100%, rgba(255, 255, 255, 0))
	);
	background: -webkit-linear-gradient(left, 
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 1) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	background: linear-gradient(left, 
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 1) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	padding: x 12px;
	bottom: 0;
	right: 12%;
	height: 1.5px;
	width: 40%;
	box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
	opacity: .2;
	transition: all 150ms ease-in-out 0s;
}

.button-shiny:active:before,
.button-shiny:hover:active:before,
.button-shiny:active:after,
.button-shiny:hover:active:after {
	opacity: 0;
}

.button-shiny:hover:before {
	left: 45%;
	opacity: 1;
}

.button-shiny:hover:after {
	right: 55%;
	opacity: .3;
}

.button-shiny .shine {
	content: "";
	width: 200%;
	height: 200%;
	position: absolute;
	border-radius: inherit;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: inherit;
	background: linear-gradient(-115deg, 
		transparent 20%, 
		rgba(183, 183, 183, 0.25) 26%, 
		transparent 32% 
		),
		linear-gradient(-115deg, 
		transparent 20%, 
		rgba(255, 255, 255, 0.18) 35%, 
		transparent 48% 
	);
	
	background-size: 400% 800%, 400% 1200%;
	
	-webkit-filter: blur(10px);
	filter: blur(10px);
	
	transition: all 150ms ease-in-out 0s;
	
	background-blend-mode: color-burn, overlay;
	mix-blend-mode: color-dodge;
	z-index: 0;
	
	animation: buttonGradientMove 13s infinite;
	-webkit-animation: buttonGradientMove 13s infinite;
	animation-play-state: running;
	opacity: 1;
}

.button-shiny:hover .shine,
.button-shiny:active .shine {
	animation-play-state: paused;
	opacity: 0;
}


.button-shiny.holo-two {
  color: rgba(32, 32, 33, 1);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8), 0 -1px 2px rgba(255, 255, 255, 0.35);
	background: 
		radial-gradient(
			50% 123.47% at 50% 50%, 
			rgba(0, 255, 148, 1) 0%, 
			rgba(255, 0, 199, 1) 100%
		), 
		linear-gradient(
			121.28deg, 
			rgba(33, 49, 0, 1) 0%, 
			rgba(255, 0, 0, 1) 100%
		),
		linear-gradient(
			360deg, 
			rgba(0, 41, 255, 1) 0%, 
			rgba(143, 255, 0, 1) 80%
		),
		linear-gradient(
			114.9deg, 
			rgba(0, 198, 162, 1) 0%, 
			rgba(106, 69, 168, 1) 100%
		),
		radial-gradient(
			100% 148.07% at 0% 0%,
			rgba(255, 255, 255, 1) 0%, 
			rgba(29, 205, 0, 1) 70%
	);
	background-blend-mode: screen, color-dodge, overlay, difference, normal;
	background-repeat: no-repeat;
	background-size: 110% 120%;
	background-position: center center;
}


@keyframes buttonGradientMove {
	50% {
		background-position: 100% 0, 100% 0;
	}
}

@-webkit-keyframes buttonGradientMove {
	50% {
		background-position: 100% 0, 100% 0;
	}
}