@layer desktop {

	:root {
		--blue: #6BBCFF;
		--green: #19B846;
		--yellow: #FFFB73;
		--red: #FF1F3D;
		--dark-blue: #01283F;
		--glyphset: var(--green);
	}

	body {
		margin-top: 0;
		color: black;
		background-color: var(--blue);
	}

	/* Colors */

	.bg-color-white {
		background: #FFF;
		--bg-color: #FFF;
	}

	.bg-color-yellow {
		background: var(--yellow);
		--bg-color: var(--yellow);
	}

	.bg-color-blue {
		background-color: var(--blue);
		--bg-color: var(--blue);
	}

	.bg-color-red {
		background-color: var(--red);
		--bg-color: var(--red);
	}

	.bg-color-green {
		background-color: var(--green);
		--bg-color: var(--green);
	}

	.bg-color-black {
		background-color: #000;
		--bg-color: #000;
	}

	.color-dark-blue {
		color: var(--dark-blue);
		--fg-color: var(--dark-blue);
	}

	.color-blue {
		color: var(--blue);
		--fg-color: var(--blue);
	}

	.color-red {
		color: var(--red);
		--fg-color: var(--red);
	}

	.color-green {
		color: var(--green);
		--fg-color: var(--green);
	}

	.color-yellow {
		color: var(--yellow);
		--fg-color: var(--yellow);
	}

	.color-white {
		color: #FFF;
		--fg-color: #FFF;
	}

	.color-black {
		color: #000;
		--fg-color: #000;
	}

	.site-header {
		--bg-color: var(--green);
		color: var(--yellow);
	}


	/* Typography */

	.f-savate {
		font-family: Savate;
	}

	.text p + p {
		margin-top: 1em;
	}

	.inline-icon {
		margin-left: 0.45rem;
		vertical-align: sub;
	}

	.section-title {
		position: relative;
		z-index: 0;
	}

	.hero-title {
		font-family: Savate;
		font-weight: 700;
		font-size: min(12.75rem, 22.5vw);
		text-transform: uppercase;
		min-height: calc(100vh - 4rem);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Fist animation */
	.anim-left-fist {
		animation: punch-left 1.5s ease-in-out infinite;
		transform-origin: center;
	}

	.anim-right-fist {
		animation: punch-right 1.5s ease-in-out infinite;
		transform-origin: center;
	}

	@keyframes punch-left {
		0% { transform: translateX(0); }
		50% { transform: translateX(8px); }
		100% { transform: translateX(0); }
	}

	@keyframes punch-right {
		0% { transform: translateX(0); }
		50% { transform: translateX(-8px); }
		100% { transform: translateX(0); }
	}

	.animation canvas {
		display: block;
		width: 100%;
		height: auto;
	}

	.animation#boxer {
		position: sticky;
		top: 0;
		width: 100%;
		height: 100vh;
		margin-bottom: -100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.animation#boxer canvas {
		position: relative;
		top: 5%;
		max-height: 85vh;
		width: auto;
		max-width: 100%;
	}

	.animation#chien {
		position: sticky;
		margin: 2vh 0 5vh;
		top: 5vh;
		width: 90vh;
		height: 90vh;
		max-width: 100%;
		max-height: 56%;
		z-index: 1;
	}

	.video {
		max-width: 100%;
		height: auto;
	}

	.video#oiseaux {
		margin-bottom: -15%;
		z-index: 1;
		pointer-events: none;
	}

	.family {
		font-family: Savate;
		font-size: min(2.75rem, 7.5vw);
		line-height: 1.25;
		margin-bottom: 2.65rem;
	}

	.tester-size {
		color: var(--red);
	}

	.image-block {
		background: #F7F0F0;
		border-radius: 1.35rem;
		margin-bottom: auto;
		padding: 3rem;
	}

	.section-in-use {
		z-index: 2;
	}

	.download-button {
		background-color: var(--yellow);
		color: var(--red);
	}

	.section-download video {
		top: -47%;
		max-width: min(22rem, 60vw);
	}


	.site-footer {
		background-color: var(--blue);
		color: var(--yellow);
	}

}


@layer mobile {

	@media screen and (max-width: 768px) {
		.block-gants {
			order: 1;
		}

		.section-download .video {
			top: -26%;
		}
	}

}