.menu {
	--menusize: 256px;
	background-color:#ccc;
	width: var(--menusize);
	height: var(--menusize);
	transition: all 0.5s ease;
	padding: calc(var(--menusize) * 0.15);
	border-radius: calc(var(--menusize) * 0.15);
	z-index: 2;
}
.menu > div {
	width: 100%;
	position: relative;
	height: 20%;
	background-color:#ff0000;
	transition: all 0.5s ease;
	border-radius: calc(var(--menusize) * 0.1);
	left: 0%;
	top: 0%;
}
.menu > div:nth-child(1) {
	margin-bottom: 15%;
	margin-top: 5%;
}
.menu > div:nth-child(3) {
	margin-top: 15%;
}
.menu.close {
	transform: rotate(180deg); 
}
.menu.close > div:nth-child(1){
	transform: rotate(45deg); 
	top: 35%;
}
.menu.close > div:nth-child(2) {
	left: 50%;
	width: 0;
}
.menu.close > div:nth-child(3) {
	transform: rotate(-45deg); 
	top: -35%;
}