:root {
	--color-blue: #87d4ff;
	--color-salmon: #f9b8ab;
	--color-yellow: #f2de72;
	--color-green: #86b696;
}

* {
	box-sizing: border-box;
}

html,
body {
	background-color: #000;
	margin: 0;
	padding: 0;
}

.banner {
	background-color: var(--color-blue);
	border: 1px solid #000;
	height: var(--size-height);
	overflow: hidden;
	position: relative;
	width: var(--size-width);
}

.banner.anim-ready .layer {
	opacity: 1;
}

.layer {
	height: 100%;
	opacity: 0;
	transform-origin: center center;
	width: 100%;
}

.layer,
.layer img,
.layer div {
	left: 0;
	position: absolute;
	top: 0;
}

.star {
	transform-origin: center center;
}

.tree {
	transform-origin: center top;
}

body .layer[starts-below],
body .layer [starts-below] {
	transform: translateY(var(--size-height));
}

body .layer[starts-above],
body .layer [starts-above] {
	transform: translateY(calc(-1 * var(--size-height)));
}

body .layer[starts-left],
body .layer [starts-left] {
	transform: translate(calc(-0.5 * var(--size-width)), 0);
}

body .layer[starts-scaled-out],
body .layer [starts-scaled-out] {
	transform: scale(0);
}