body {
	margin: 0px;
	overflow: hidden;
}

html {
	overflow: hidden;
}

@media screen and (orientation: portrait) {
	body {
		transform: rotate(-90deg);
	    transform-origin: top left;
	    width: 100vh;
	    height: 100vw;
	    position: absolute;
	    top: 100%;
	    left: 0px;
	}
}

.fond {
	height: 100%;
	position: fixed;
	min-width: 100%;
}

.layer.stars {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.stars .star.s {
	width: 20px;
	height: 40px;
}
.stars .star.l {
	width: 30px;
	height: 60px;
}
.stars .star.xl {
	width: 45px;
	height: 90px;
}

.stars .star:nth-child(3n){
	margin-left: 4rem;
}
.stars .star:nth-child(3n + 2){
	margin-left: 6rem;
	margin-top: 8rem;
}

.stars .star:nth-child(3n + 1){
	margin-left: 2rem;
	margin-top: 3rem;
}

.stars .star {
	animation: 5s spark ease infinite;
	transform: scale(0);
}

.stars .star:nth-child(5n + 1){
	animation-delay: 1s;
}

.stars .star:nth-child(5n + 2){
	animation-delay: 2s;
}

.stars .star:nth-child(5n + 3){
	animation-delay: 3s;
}

.stars .star:nth-child(5n + 4){
	animation-delay: 4s;
}

@keyframes spark {
	0% {transform: scale(0);}
	50% {transform: scale(1);}
	100% {transform: scale(0);}
}



.content {
	display: none;
}
.content.start {
	display: inherit;
}

.play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 75px;
	margin-left: -37.5px;
	margin-top: -37.5px;
}

.coquelicot {
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 600px;
	max-width: 20%;
	max-height: 25vw;
	z-index: 9999;
}

.coquelicot .petal {
	position: absolute;
	bottom: 0px;
	transform-origin: bottom center;
	z-index: 2;
	filter: drop-shadow(0px 10px 20px rgba(0,0,0,.3));
}

.coquelicot .petal:nth-child(n+1){
	transform: rotate(-30deg);
}
.coquelicot .petal:nth-child(n+2){
	transform: rotate(30deg);
}
.coquelicot .petal:nth-child(n+3){
	transform: rotate(-60deg);
}
.coquelicot .petal:nth-child(n+4){
	transform: rotate(60deg);
}
.coquelicot .petal:nth-child(n+5){
	transform: rotate(-90deg);
}
.coquelicot .petal:nth-child(n+6){
	transform: rotate(90deg);
}
.coquelicot .petal:nth-child(n+7){
	transform: rotate(180deg) scaleY(70%);
}

.tige {
	height: 300%;
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.emil {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -35%);
	transform-origin: bottom;
	z-index: 2;
	width: 175%;
	aspect-ratio: 1/1;
	filter: drop-shadow(0px 10px 20px rgba(0,0,0,.3));
}

.left-hand-box {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50%;
	z-index: 2;
	height: 100%;
}

.left-hand-box > * {
	position: absolute;
}

.leafs.front {
	left: -25%;
	top: -15%;
	height: 125%;
}

.leafs.back {
	left: 0%;
	top: -5%;
	height: 125%;
}

.left-hand {
	position: absolute;
	top: 50%;
	transform: translate(20%, -60%) rotate(-5deg);
	height: 65%;
}

.right-hand-box {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 50%;
	z-index: 2;
	height: 100%;
}

.right-hand {
	height: 70%;
	position: absolute;
	top: 15%;
	right: 0px;
	margin-right: -15%;
}

.hairs {
	position: absolute;
	right: -10%;
	top: -5%;
	width: 100%;
	height: 105%;
	transform: rotate(10deg);
}

.hairs .hair {
	height: 100%;
	position: absolute;
	top: -5%;
	filter: drop-shadow(0px 10px 10px rgba(0,0,0,.75));
}

.hair:nth-child(n+1){
	right: 45%;
	margin-top: 0%;
	transform: rotate(5deg);
	animation-delay: .2s;
}

.hair:nth-child(n+2){
	right: 35%;
	margin-top: -20%;
	transform: rotate(8deg);
	animation-delay: 1.4s;
}

.hair:nth-child(n+3){
	right: 35%;
	margin-top: -2%;
	transform: rotate(8deg);
	animation-delay: 1s;
}

.hair:nth-child(n+4){
	right: 28%;
	transform: rotate(12deg);
	animation-delay: .6s;
}

.hair:nth-child(n+5){
	right: 20%;
	margin-top: -2%;
	transform: rotate(8deg);
	animation-delay: 1.2s;
}

.hair:nth-child(n+6){
	right: 12%;
	margin-top: -2%;
	transform: rotate(8deg);
	animation-delay: .4s;
}

.hair:nth-child(n+7){
	right: 2%;
	margin-top: -12%;
	transform: rotate(5deg);
	animation-delay: .8s;
}


@keyframes coquelicot {
	from {top: 150%; transform: translate(-50%, -50%) scale(.3) rotate(5deg);}
	to {top: 30%; transform: translate(-50%, -50%) scale(1) rotate(-5deg);}
}
@keyframes coquelicotVibrate {
	from { transform: translate(-50%, -50%) rotate(5deg); }
	to { transform: translate(-50%, -50%) rotate(-5deg); }
}
.coquelicot {
	animation-name: coquelicot, coquelicotVibrate;
	animation-duration: 2.5s, 3s;
	animation-iteration-count: 1, infinite;
	animation-timing-function: ease-in-out;
	animation-direction: normal, alternate-reverse;
	animation-delay: 0s, 2.5s;
	transform-origin: bottom;
}

@keyframes emil {
	from {transform: translate(-50%, -55%) scale(0.2) rotate(25deg);}
	to {transform: translate(-50%, -35%) scale(1) rotate(-5deg);}
}
@keyframes emilVibrate {
	from {transform: translate(-50%, -35%) rotate(5deg);}
	to {transform: translate(-50%, -35%) rotate(-5deg);}
}

.emil {
	animation-name: emil, emilVibrate;
	animation-duration: 3s;
	animation-iteration-count: 1, infinite;
	animation-timing-function: ease-out, ease-in-out;
	animation-direction: normal, alternate-reverse;
	animation-fill-mode: backwards, forwards;
	animation-delay: 0s, 3s;
}

@keyframes lefthandbox {
	from { left: -100%; }
	to { left: 0%; }
}
@keyframes lefthand {
	from { transform: translate(20%, -60%) rotate(-5deg); }
	to { transform: translate(20%, -60%) rotate(5deg); }
}

.left-hand-box {
	animation: lefthandbox 3s ease;
	animation-delay: 1s;
	animation-fill-mode: backwards;
}
.left-hand {
	animation-name: lefthandbox, lefthand;
	animation-duration: 3s;
	animation-iteration-count: 1, infinite;
	animation-timing-function: ease, ease-in-out;
	animation-direction: normal, alternate-reverse;
	animation-fill-mode: backwards, forwards;
	animation-delay: 1.5s;
}

@keyframes leafs {
	from { margin-left: 0%; }
	to { margin-left: -5%; }
}

.leafs {
	animation: leafs 3s ease-in-out infinite alternate-reverse;
}

@keyframes righthandbox {
	from { right: -100%; }
	to { right: 0%; }
}
@keyframes righthand {
	from { transform: rotate(-5deg); }
	to { transform: rotate(5deg); }
}

.right-hand-box {
	animation: righthandbox 3s ease;
	animation-delay: 1s;
	animation-fill-mode: backwards;
}
.right-hand {
	animation-name: righthandbox, righthand;
	animation-duration: 3s;
	animation-iteration-count: 1, infinite;
	animation-timing-function: ease, ease-in-out;
	animation-direction: normal, alternate-reverse;
	animation-fill-mode: backwards, forwards;
	animation-delay: .5s;
}

.hair {
	animation: righthand 3s ease-in-out infinite alternate-reverse;
}