main {
	--main-height : 400px;
	--main-width :  400px;
	position : relative;
	width : var(--main-width);
	height : var(--main-height);;
	background-color : yellow;
	border-radius : 10px;
	border: 4px solid red;
	margin:auto;
}

section {
	position : absolute ;
	top : calc(var(--main-height) / 4 );
	right:calc(var(--main-width) / 5);
	width : calc(var(--main-height) / 4);
	height : calc(var(--main-height) / 4);
	height : calc(var(--main-height) / 4);
	border-radius : calc(var(--main-height) / 4); 
	background-color : red;

}

header {
	position : absolute ;
	top : calc(var(--main-height) / 4 );
	left:calc(var(--main-width) / 5);
	width : calc(var(--main-height) / 4);
	height : calc(var(--main-height) / 4);
	height : calc(var(--main-height) / 4);
	border-radius : calc(var(--main-height) / 4); 

	background-color : red;
}
footer {
	position : absolute;
	bottom : calc(var(--main-height) / 8 );
	--tmp-left : calc(var(--main-width) / 5);
	left : var(--tmp-left);		
	height : calc(var(--main-height) / 6);
	width : calc(var(--tmp-left) * 3 ); 
	background-color : red;
	border-radius : calc(var(--main-height) / 6) calc(var(--main-height) / 6)  0px 0px;
}

