* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--bg: #EEF1DA;
	--fg: #17181c;
	--c1: #ADB2D4;
	--c2: #C7D9DD;
	--c3: #D5E5D5;
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}

body {
	background: var(--bg);
	color: var(--fg);
	display: flex;
	flex-wrap: wrap;
	font: 1em/1.5 sans-serif;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 100vh;
}

.pl1 {
	justify-content: space-around;
}
.pl1__a, .pl1__b, .pl1__c {
	width: 1em;
	height: 1em;
	transform-origin: 50% 100%;
}

.pl1__a, .pl1__b, .pl1__c {
	animation: bounce1 1s linear infinite;
}

.pl1 {
	display: flex;
	margin: 1.5em;
	width: 6em;
	height: 6em;
}
.pl1__a {
	background: var(--c1);
}
.pl1__b {
	background: var(--c2);
	animation-delay: 0.1s;
}
.pl1__c {
	background: var(--c3);
	animation-delay: 0.2s;
}

/* Animations */
@keyframes bounce1 {
	from, to {
		transform: translateY(0) scale(1, 1);
		animation-timing-function: ease-in;
	}
	45% {
		transform: translateY(5em) scale(1, 1);
		animation-timing-function: linear;
	}
	50% {
		transform: translateY(5em) scale(1.5, 0.5);
		animation-timing-function: linear;
	}
	55% {
		transform: translateY(5em) scale(1, 1);
		animation-timing-function: ease-out;
	}
}