body {
	background: #232425;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1em;
	color: white;
}

#divSection {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1em;
	color: white;
}

button {
	z-index: 1;
}

#parent {
	width: 1300px;
	height: 800px;
	display: flex;
	border: solid 1px white;
	justify-content: flex-end;
	position: relative;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-delay: 1s;
}

#parent * {
	flex-basis: 38.1966%;
	display: flex;
	justify-content: flex-end;
}

:root {
	--angle1: 0deg;
	--angle2: -90deg;
	--angle3: -180deg;
	--angle4: -270deg;

	--t: rotate(0deg) scale(1);
	--t2: rotate(var(--angle2)) scale(1.5);
	--t3: rotate(var(--angle3)) scale(2.5);
	--t4: rotate(var(--angle4)) scale(3.5);

	--top1: 0;
	--top2: 600px;
	--top3: 700px;
	--top4: -700px;

	--left1: 0px;
	--left2: 1000px;
	--left3: 1000px;
}


@keyframes rotation {
	from {
		transform: var(--t);
		top: var(--top1);
	}
	to { 
		transform: var(--t2);
		top: var(--top2);
		left: var(--left1);
	}
}

@keyframes rotation2 {
	from { 
		transform: var(--t2);
		top: var(--top2);
		left: var(--left1);
	}
	to { 
		transform: var(--t3);
		top: var(--top3);
		left: var(--left2);
	}
}

@keyframes rotation3 {
	from { 
		transform: var(--t3);
		top: var(--top3);
		left: var(--left2);
	}
	to { 
		transform: var(--t4);
		top: var(--top4);
		left: var(--left3);
	}
}

@keyframes rotation4 {
	from { 
		transform: var(--t4);
		top: var(--top4);
		left: var(--left3);
	}
	to { 
		transform: rotate(-360deg) scale(1);
		top: var(--top1);
		left: var(--left1);
	}
}