* {
	margin:0;
	padding:0;
}
:root {
	--color1:#FA8073;
	--color2:#34CB32;
	--color3:#E0C27C;
	--color4:#36B6F7;
}
.container {
	display:flex;
	align-items:center;
	justify-content:center;
}
.case {
	width:80px;
	height:80px;
	display:flex;
	flex-wrap:wrap;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	animation:rotateC 1.8s linear 0s infinite reverse forwards;
}
@keyframes rotateC {
	0% {
	transform:rotateZ(0deg);
}
100% {
	transform:rotateZ(360deg);
}
}.dot {
	width:calc(100% / 10);
	height:calc(100% / 10);
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	background:white;
	border-radius:50%;
	z-index:1;
}
.one,.two,.three,.four {
	width:50%;
	height:50%;
}
.one {
	position:absolute;
	left:0;
	top:0;
}
.two {
	position:absolute;
	right:0;
	top:0;
}
.three {
	position:absolute;
	left:0;
	bottom:0;
}
.four {
	position:absolute;
	right:0;
	bottom:0;
}
/* 111111111111111 */
		.one .leaf {
	width:calc(50% - 2px);
	height:calc(100% - 2px);
	border:1px solid black;
	border-top-left-radius:120px;
	border-bottom-left-radius:120px;
	background:var(--color1);
	position:absolute;
	right:0;
	top:0;
	z-index:1;
}
.one .square {
	width:calc(50% - 2px);
	height:50%;
	border:1px solid black;
	border-bottom-color:transparent;
	background:var(--color1);
	position:absolute;
	right:0;
	bottom:0;
	z-index:0;
}
/* 2222222222222 */
		.two .leaf {
	width:calc(100% - 2px);
	height:calc(50% - 2px);
	border:1px solid black;
	border-top-left-radius:120px;
	border-top-right-radius:120px;
	background:var(--color2);
	position:absolute;
	left:0;
	bottom:0;
	z-index:1;
}
.two .square {
	width:50%;
	height:calc(50% - 2px);
	border:1px solid black;
	border-left-color:transparent;
	background:var(--color2);
	position:absolute;
	left:0;
	bottom:0;
	z-index:0;
}
/* 3333333333333 */
		.three .leaf {
	width:calc(100% - 2px);
	height:calc(50% - 2px);
	border:1px solid black;
	border-bottom-left-radius:120px;
	border-bottom-right-radius:120px;
	background:var(--color3);
	position:absolute;
	right:0;
	top:0;
	z-index:1;
}
.three .square {
	width:50%;
	height:calc(50% - 2px);
	border:1px solid black;
	border-right-color:transparent;
	background:var(--color3);
	position:absolute;
	right:0;
	top:0;
	z-index:0;
}
/* 4444444444444 */
		.four .leaf {
	width:calc(50% - 2px);
	height:calc(100% - 2px);
	border:1px solid black;
	border-top-right-radius:120px;
	border-bottom-right-radius:120px;
	background:var(--color4);
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}
.four .square {
	width:calc(50% - 2px);
	height:50%;
	border:1px solid black;
	border-top-color:transparent;
	background:var(--color4);
	position:absolute;
	left:0;
	top:0;
	z-index:0;
}