:root {
	// COLOR CSS VARIABLES
	--c01: #b29600; // Gold
	--c02: #2c2828; // Black
	--c03: #fffdf6; // White
	--c04: #d2b793; // Dark Sand
	--color_bg: #dfd3c3; // Sand
	--color_balloon: var(--c02);
	
	// SIZE CSS VARIABLES
	--balloon: 140px; // Resize balloons by only editing this variable
	--balloon_half: calc(var(--balloon) / 2);
	--knot: calc(var(--balloon) / 10);
	--border: 10px;

	// Let's resize balloons in other screens
	@media screen and (max-width: 50em) {
		--balloon: 80px;
	}
	
	@media screen and (min-width: 88em) {
		--balloon: 200px;
	}
}

// MIXINS
@mixin size($w, $h: $w) {
	width: $w;
	height: $h;
}

@mixin animation($name, $time) {
	animation: 
		fly_away $time forwards,
		$name 4s $time 400 ease-in-out alternate;
}

// PLACEHOLDERS
%transition {
	transition: all 0.2s ease-in-out;
}

// LAYOUT
body {
	background-color: var(--color_bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23d2b793' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	margin: 0;
}

.new-year-party {
	@include size(calc(100vw - 20px), calc(100vh - 20px));
	box-sizing: border-box;
	display: flex; // Grid Fallback
	display: grid;
	grid-auto-flow: column;
	justify-content: center;
	margin: var(--border);
	overflow: hidden;
	padding-top: calc(var(--border) * 2);
}

// ILLUSTRATION
.balloon {
	@include size(var(--balloon));
	@extend %transition;
	background-image: url('https://image.freepik.com/free-photo/glitter-background-for-new-year_23-2148002042.jpg');
	background-position: 60% 50%;
	background-blend-mode: screen;
	background-color: var(--color_balloon);
	border-radius: 0 var(--balloon_half) var(--balloon_half);
	border: 1px solid transparent; // Fixes jagged edges in Safari
	position: relative;
	transform: rotate(-135deg) translate(-100vh, -100vh);
	transform-style: preserve-3d; // Fixes Firefox Bug
	
	&:not(:last-child) {
		margin-right: calc(var(--balloon_half) / 4);
	}

	// Balloon's Knot
	&:before {
		@include size(0);
		@extend %transition;
		content: "";
		border-style: solid;
		border-width: calc(var(--knot) * 1.5) var(--knot) 0 var(--knot);
		border-color: var(--color_balloon) transparent transparent transparent;
		position: absolute;
		top: calc(var(--knot) / -1.4);
		left: calc(var(--knot) * -1);
		transform: rotate(-45deg);
	}

	// Balloon's String
	&:after {
		@include size(1px, calc(var(--balloon) * 2.5));
		@extend %transition;
		content: "";
		background-color: var(--c02);
		position: absolute;
		bottom: calc(var(--balloon) / 1.54);
		left: calc(var(--balloon) / -1.1);
		transform: rotate(135deg);
		z-index: -1;
	}

	// Balloon Colors
	&--happy {
		--color_balloon: var(--c01);
	}

	&--new {
		--color_balloon: var(--c03);
	}
	
	// Balloon's Number
	&__nr {
		display: inline-block;
		font-family: 'Alfa Slab One', cursive;
		font-size: calc(var(--balloon) * 0.19);
		transform: rotate(135deg) translateY(-100%);
		opacity: 0.75;
	}
	
	// #3
	&:nth-child(1) {
		@include animation(float_left_top, 3s);
	}
	
	// Balloon's Animation
	// #1
	&:nth-child(2) {
		@include animation(float_right_bottom, 1s);
	}
	
	// #5
	&:nth-child(3) {
		@include animation(float_left_top, 5s);
	}
	
	// #4
	&:nth-child(4) {
		@include animation(float_left_top, 4s);
	}
	
	// #2
	&:nth-child(5) {
		@include animation(float_right_bottom, 2s);
	}
}

// ANIMATIONS
@keyframes fly_away {
	100% {
		transform: rotate(-135deg) translate(0, 0);
	}
}

@keyframes float_right_bottom {
	0%, 100% {
		transform: rotate(-135deg) translate(0, 0);
	}
	50% {
		transform: rotate(-135deg) translate(calc(var(--knot) * -1), 0);
	}
}

@keyframes float_left_top {
	0%, 100% {
		transform: rotate(-135deg) translate(0, 0);
	}
	50% {
		transform: rotate(-135deg) translate(0, var(--knot));
	}
}

@keyframes float_left_bottom {
	0%, 100% {
		transform: rotate(-135deg) translate(0, 0);
	}
	50% {
		transform: rotate(-135deg) translate(0, calc(var(--knot) * -1));
	}
}