@charset "UTF-8";

.pushable {
	position: relative;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	outline-offset: 4px;
	transition: filter 250ms;
}

.center-section {
	margin: auto;
	display: block;
}

.shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: hsl(0deg 0% 0% / 0.25);
	will-change: transform;
	transform: translateY(2px);
	transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.edge {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: linear-gradient( to left, hsl(340deg 100% 16%) 0%, hsl(340deg 100% 32%) 8%, hsl(340deg 100% 32%) 92%, hsl(340deg 100% 16%) 100% );
}


.edgeBlue {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: linear-gradient( to left, hsl(208, 100%, 16%) 0%, hsl(208, 100%, 32%) 8%, hsl(208, 100%, 32%) 92%, hsl(208, 100%, 16%) 100% );
}


.edgeYellow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: linear-gradient( to left, hsl(59, 100%, 16%) 0%, hsl(59, 100%, 32%) 8%, hsl(59, 100%, 32%) 92%, hsl(59, 100%, 16%) 100% );
}





.front {
	display: block;
	position: relative;
	padding: 12px 42px;
	border-radius: 12px;
	font-size: 1.25rem;
	color: white;
	background: hsl(345deg 100% 47%);	
	will-change: transform;
	transform: translateY(-4px);
	transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}


.frontBlue {
	display: block;
	position: relative;
	padding: 12px 42px;
	border-radius: 12px;
	font-size: 1.25rem;
	color: white;
	background: hsl(208, 100%, 51%);
	will-change: transform;
	transform: translateY(-4px);
	transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}


.frontOrange {
	display: block;
	position: relative;
	padding: 12px 42px;
	border-radius: 12px;
	font-size: 1.25rem;
	color: white;
	background: hsl(40, 100%, 51%);
	will-change: transform;
	transform: translateY(-4px);
	transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}










@charset "UTF-8";

.pushable {
	position: relative;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	outline-offset: 4px;
	transition: filter 250ms;
}

.center-section {
	margin: auto;
	display: block;
}

.shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: hsl(0deg 0% 0% / 0.25);
	will-change: transform;
	transform: translateY(2px);
	transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.edge {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: linear-gradient( to left, hsl(340deg 100% 16%) 0%, hsl(340deg 100% 32%) 8%, hsl(340deg 100% 32%) 92%, hsl(340deg 100% 16%) 100% );
}

.front {
	display: block;
	position: relative;
	padding: 12px 42px;
	border-radius: 12px;
	font-size: 1.25rem;
	color: white;
	background: hsl(345deg 100% 47%);
	will-change: transform;
	transform: translateY(-4px);
	transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.pushable:hover {
	filter: brightness(110%);
}

	.pushable:hover .front {
		transform: translateY(-6px);
		transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
	}

.pushable:active .front {
	transform: translateY(-2px);
	transition: transform 34ms;
}

.pushable:hover .shadow {
	transform: translateY(4px);
	transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .shadow {
	transform: translateY(1px);
	transition: transform 34ms;
}

.pushable:focus:not(:focus-visible) {
	outline: none;
}






.pushable:hover {
	filter: brightness(110%);
}

	.pushable:hover .front {
		transform: translateY(-6px);
		transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
	}

.pushable:active .front {
	transform: translateY(-2px);
	transition: transform 34ms;
}

.pushable:hover .shadow {
	transform: translateY(4px);
	transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .shadow {
	transform: translateY(1px);
	transition: transform 34ms;
}

.pushable:focus:not(:focus-visible) {
	outline: none;
}