*,
*::before,
*::after {
	box-sizing: border-box;
}

@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}

.rainbow {
	position: relative;
	z-index: 0;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
}

.rainbow_two {
	position: relative;
	z-index: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
}

@media not all and (min-width: 900px) {
    .rainbow_two {
		position: relative;
		z-index: 0;
		width: 150px;
		height: 150px;
		border-radius: 50%;
		overflow: hidden;
	}
}

.rainbow::before, .rainbow_two::before {
	content: '';
	position: absolute;
	z-index: -2;
	left: -50%;
	top: -50%;
	width: 200%;
	height: 200%;
	/* background-color: #e6bcaa; */
	background-color: #FEC601;
	/* background-color: #0000FF; */
	background-repeat: no-repeat;
	background-size: 50% 50%, 50% 50%;
	background-position: 0 0, 100% 0, 100% 100%, 0 100%;
	/* background-image: linear-gradient(#0000FF, #0000FF,#0000FF,#0000FF, transparent), linear-gradient(#0000FF, #0000FF,#0000FF,#0000FF, transparent); */
	background-image: linear-gradient(#00ff00, #00ff00,#00ff00,#00ff00, transparent), linear-gradient(#00ff00, #00ff00,#00ff00,#00ff00, transparent);
	/* background-image: linear-gradient(#ff5100, #ff5100,#ff5100,#ff5100, transparent), linear-gradient(#ff5100, #ff5100,#ff5100,#ff5100, transparent); */
	animation: rotate 4s linear infinite;
}

.rainbow::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 4px;
	top: 4px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	background: white;
	border-radius: 50%;
	animation: opacityChange 3s infinite alternate;
}

.rainbow_two::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 2px;
	top: 2px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	background: white;
	border-radius: 50%;
	animation: opacityChange 3s infinite alternate;
}

@media not all and (min-width: 900px) {
    .rainbow_two::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 4px;
		top: 4px;
		width: calc(100% - 8px);
		height: calc(100% - 8px);
		background: white;
		border-radius: 50%;
		animation: opacityChange 3s infinite alternate;
	}
}

@keyframes opacityChange {
	50% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}