:root {
	padding: 0;
	margin: 0;

	font-size: 20px;

	--ilfrean-green-d2: #a1c124;
	--ilfrean-green-d1: #b8d933;
	--ilfrean-green: #c9e265;
	--ilfrean-green-2: #deebaa;
	--ilfrean-green-3: #edf4d4;

}

body {
	padding: 0;
	margin: 0;

	font-family: Open Sans, sans-serif;

	color: #333;
	background: white;
}

.logo {
	position: relative;
	display: block;

	margin-top: 0.1em;
	width: 1.6em;
}

.triangle {
	position: absolute;
	display: inline-block;
	color: var(--b, var(--ilfrean-green-3));
	transform: rotate(var(--r, 45deg));

	transition: transform 1s ease-out var(--d, 0.2s);

	height: 1.6em;
	width: 1.6em;
}

.triangle + .triangle {
	--b: var(--ilfrean-green-2);
	--r: 58deg;
	--d: 0.15s
}

.triangle + .triangle + .triangle {
	--b: var(--ilfrean-green);
	--r: 71deg;
	--d: 0.1s
}

.logo--loading .triangle {
	transform: rotate(45deg);
}

.page.page--home {
	display: grid;
	height: 100vh;

	grid-template: 1fr 1fr / 1fr;
}

.page.page--home h1 {
	display: flex;
	gap: 0.1em;
	justify-content: center;
	font-family: Antonio, sans-serif;
	font-weight: 700;
	font-size: 15vmin;
	color: #111;
	text-transform: uppercase;
}

.page.page--home h1 .h1--ltd {
	font-weight: 300;
	color: #777;
}

.page.page--home main {
	display: grid;
	place-content: center;
}

.button {
	display: flex;
	gap: 0.5em;
	justify-content: center;

	border: 0;
	border-radius: 0.3em;
	margin: 1em;
	padding: 1em 2em;

	color: black;
	background: var(--ilfrean-green);

	cursor: pointer;

	font-size: inherit;

	transition: background-color 0.1s linear;
}

.button__icon {
	display: inline-block;
	width: 1em;
	object-position: bottom center;
}

.button:hover,
.button:focus {
	background: var(--ilfrean-green-d1);
}

.button:focus-visible {
	outline: black 2px solid;
}

.button:active {
	background: var(--ilfrean-green-d2);
}