/* relevant portion */
button {
	--border-radius: 24px;
	--border-width: 8px;

	-webkit-appearance: none;

	-moz-appearance: none;

	appearance: none;
	position: relative;
	padding: 1em 2em;
	border: 0;
	background-color: transparent;
	font-family: 'Montserrat', sans-serif;
	font-size: 2em;
	font-weight: 600;
	color: #fff;
}

button::after {
	--m-i: linear-gradient(#000, #000);
	--m-o: content-box, padding-box;

	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: var(--border-width);
	border-radius: var(--border-radius);
	background-image: conic-gradient(#488cfb, #29dbbc, #ddf505, #ff9f0e, #e440bb, #655adc, #488cfb);

	-webkit-mask-image: var(--m-i), var(--m-i);

	mask-image: var(--m-i), var(--m-i);
	-webkit-mask-origin: var(--m-o);
	mask-origin: var(--m-o);
	-webkit-mask-clip: var(--m-o);
	mask-clip: var(--m-o);
	mask-composite: exclude;
	-webkit-mask-composite: destination-out;

	filter: hue-rotate(0);
	-webkit-animation: hue linear 500ms infinite;
	animation: hue linear 500ms infinite;
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

button:hover::after {
	-webkit-animation-play-state: running;
	animation-play-state: running;
}

@-webkit-keyframes hue {
	to {
		filter: hue-rotate(1turn);
	}
}

@keyframes hue {
	to {
		filter: hue-rotate(1turn);
	}
}

/* to have things in good shape */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	background-color: #161724;
	display: grid;
	place-items: center;
}