body {
	width: 100vw;
	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: linear-gradient(skyblue, lightskyblue);
}

section {
	height: 100vh;
	position: relative;
}

soleil {
	width: 8vw;
	height: 8vw;
	position: absolute;
	top: 2vw;
	right: 4vw;
	background: radial-gradient(yellow, lightyellow);
	border-radius: 100%;
	box-shadow: 0 0 16vw 8vw lightyellow;
	overflow: visible;
}

soleil img {
	position: absolute;
	top: 4vh;
	right: -8vh;
}
nuage {
	z-index: 2;
	position: absolute;
	top: 24vh;
	left: 12vw;
	height: 16vw;
}
nuage img {
	z-index: 8;
	position: relative;
	background: radial-gradient(white, transparent 60%);
	border-radius: 100%;
}
bourgeonnement {
	filter: opacity(80%);
	z-index: 4;
	position: absolute;
	border-radius: 100%;
	background: radial-gradient(transparent, white);
	min-width: 1vw;
	min-height: 2vw;
	box-shadow: inset 0 0 2vh 6vh white, 0 0 2vh 2vh white;
}

#reflet {
	z-index: 16;
	position: absolute;
	top: 24vh;
	left: 48vw;
	filter: drop-shadow(2vh 2vh 2px whitesmoke);
}

#porte {
	position: absolute;
	right: 4vw;
	bottom: 4vw;
	width: 16vh;
	height: 32vh;
	margin: 0;
	background: yellow;
}
#porte a {
	z-index: 2;
	position: absolute;
	width: 100%;
	height: 100%;
	border: solid 1px black;
	background: white;
}
#porte div {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: yellow;
}
#porte:hover > a {
	transform: skew(0, 18deg) scale(88%, 100%);
	transform-origin: top left;
	background: linear-gradient(to right, silver, white 48%);
}
#porte:hover {
	box-shadow: inset 0 0 8vh lightyellow, 1vh 1vh 8vh lightyellow;
}