.rainbow {
	position: relative;
	overflow: hidden;
}

.rainbow::before {
	content: '';
	display: block;
	width: 100vw;
	height: 100vw;
	position: absolute;
	z-index: -1;
	transition: 300ms all ease-in-out;
	background: conic-gradient(rgb(255, 0, 0) 0%, rgb(255, 165, 0) 14.285%, rgb(255, 255, 0) 28.571%, rgb(0, 255, 0) 42.857%, rgb(0, 255, 255) 57.142%, rgb(0, 0, 255) 71.428%, rgb(75, 0, 130) 85.714%, rgb(255, 0, 0) 100%);
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}

.rainbow.rainbow-hover:hover::before {
	transform: translate( -50%, -50% ) rotate( 360deg );
}

.rainbow::after {
	content: '';
	display: block;
	background: #000;
	position: absolute;
	width: calc( 100% - 10px );
	height: calc( 100% - 10px );
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}