body {
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background:rgb(39,40,59);
	overflow:hidden;
}
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
.box {
	cursor:pointer;
	width:300px;
	height:300px;
	position:relative;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
}
.box .out {
	position:absolute;
	top:0;
	left:0;
	width:0;
	border:150px solid;
	border-radius:50%;
	border-color:transparent transparent #d72928 #db3e3d;
	transform:rotate(45deg);
	transform-origin:150px 150px;
	transition:all 0.5s;
}
.box .head {
	position:absolute;
	top:50%;
	right:25px;
	width:0;
	border:125px solid;
	border-radius:50%;
	border-color:rgb(255,255,255) rgb(248,210,69) transparent rgb(242,242,242);
	transform:translateY(-50%) rotate(-45deg);
	transform-origin:50% 50%;
	transition:all 0.5s;
}
.box .mouse {
	position:absolute;
	top:28%;
	right:85px;
	width:0;
	border:65px solid;
	border-radius:50%;
	border-color:transparent rgb(247,167,3) transparent transparent;
	transform:rotate(45deg);
	transform-origin:50% 50%;
	transition:all 0.5s;
}
.box .mouse .eye {
	position:absolute;
	top:-15px;
	left:-50px;
	width:25px;
	height:25px;
	border-radius:50%;
	transition:all 0.5s;
	background:#000;
}
.box:hover .out {
	transform:rotate(225deg);
	border-color:transparent transparent rgb(31,232,182) rgb(22,215,167);
}
.box:hover .head {
	border-color:rgb(242,242,242) transparent rgb(248,210,69) rgb(255,255,255);
	transform:translateY(-50%) rotate(-225deg);
}
.box:hover .mouse {
	transform:rotate(135deg);
}