index.html

<style>
	body {
		background-color: #171d28;
		margin: 0px;
		overflow: hidden;
	}

	.berd {
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0px;
		top: 0px;
		background-color: #171d28;
	}

	.berd[open] {
		background-color: #171d2800;
	}

	.berd > summary {
		width: calc(353px / 4 - 1px);
		height: calc(274px / 4 - 1px);
		display: block;
		position: fixed;
		left: calc(((543px - 353px) / 4 - 0px)/2);
		top: calc(((558px - 274px) / 4 - 0px)/2);
		background-size: contain;
		text-decoration: none;
		z-index: 1;
	}

	.berd[open] > summary {
		width: calc(543px / 4 - 1px);
		height: calc(558px / 4 - 1px);
		left: 0px;
		top: 0px;
		background-image: url("assets/cage.png");
	}

	.berd.ltr > summary {
		animation: flap 0.2s infinite, fly2 2.5s infinite;
	}

	.berd.ltr.d2 > summary {
		animation: flap 0.2s infinite, fly2 3s -1.5s infinite;
	}

	.berd.ltr[open] > summary {
		animation: fly2 2.5s infinite;
		animation-play-state: paused;
	}

	.berd.ltr.d2[open] > summary {
		animation: fly2 3s -1.5s infinite;
		animation-play-state: paused;
	}

	.berd.rtl > summary {
		animation: flap 0.2s infinite, fly 2.5s infinite;
	}

	.berd.rtl.d2 > summary {
		animation: flap 0.2s infinite, fly 3s -2s infinite;
	}

	.berd.rtl[open] > summary {
		animation: fly 2.5s infinite;
		animation-play-state: paused;
	}

	.berd.rtl.d2[open] > summary {
		animation: fly 3s -2s infinite;
		animation-play-state: paused;
	}

	:root {
		--fly-length: 200px;
	}

	@keyframes fly {
		0%, 100% {
			transform: translate(0px, var(--fly-length)) rotate(5deg);
		}
		50% {
			transform: translate(var(--fly-length), -5px);
		}
	}

	@keyframes fly2 {
		0%, 100% {
			transform: translate(var(--fly-length), var(--fly-length)) rotate(-5deg);
		}
		50% {
			transform: translate(0px, 0px) rotate(5deg);
		}
	}

	@keyframes flap {
		0% {
			background-image: url("assets/berd0.png");
		}
		100% {
			background-image: url("assets/berd1.png");
		}
	}

	.victory {
		width: 100vw;
		height: 100vh;
		position: absolute;
		color: white;
		font-size: 100px;
		text-align: center;
		font-family: Rosario;
		top: 200px;
		font-weight: bold;
	}

	.box {
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0px;
		top: 0px;
	}


</style>

<div class="victory">YOU WIN!!!</div>

<details class="berd ltr"><summary style="margin: 300px 100px"></summary></details>
<details class="berd ltr d2"><summary style="margin: 200px 500px"></summary></details>
<details class="berd rtl d2"><summary style="margin: 500px 800px"></summary></details>
<details class="berd rtl"><summary style="margin: 0px 1000px"></summary></details>
<details class="berd rtl d2"><summary style="margin: 0px 200px"></summary></details>
<details class="berd ltr"><summary style="margin: 600px 1200px"></summary></details>
<details class="berd rtl"><summary style="margin: 700px 100px"></summary></details>
<details class="berd ltr d2"><summary style="margin: 200px 1400px"></summary></details>