@layer desktop {
	:root {
		--blue: #083AFF;
		--grey: #A5A5A5;
		--glyphset: var(--blue);
	}

	body {
		margin-top: 0;
		background-image: linear-gradient(to bottom, var(--blue) 49%, black 51%);
		background-attachment: fixed;
		color: white;
	}

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

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

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

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

	.fg-white {
		color: white;
	}

	.fg-black {
		color: black;
	}

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

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

	.f-baudricourt {
		font-family: Baudricourt;
	}

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

	.hero-title {
		font-family: Baudricourt;
		font-weight: 740;
		font-size: min(8.15rem, 14.4vw);
		min-height: calc(100vh - 4rem);
		display: flex;
		justify-content: center;
		align-items: center;
		letter-spacing: -0.01em;
	}

	.family {
		font-family: Baudricourt;
		font-size: min(2.25rem, 6vw);
		line-height: 1.25;
		margin-bottom: 2.65rem;
	}

	.concrete-texture {
		position: absolute;
		width: 100%;
		height: 100%;
		inset: 0;
		object-fit: cover;
		mix-blend-mode: multiply;
	}

	.image-block {
		background: #EBEBEB;
		border-radius: 0.75rem;
		margin-bottom: auto;
		padding: 3rem;
		aspect-ratio: 1;
	}

	.parallax-container {
		position: absolute;
		inset: 0;
		clip-path: inset(0);
		mix-blend-mode: multiply;
	}

	.parallax-background {
		position: fixed;
		width: 100%;
		height: 100vh;
		inset: 0;
		z-index: 0;
		object-fit: cover;
		pointer-events: none;
	}

	#bloc-a {
		opacity: 0.5;
		transform: scale(0.75);
	}

	#bloc-parpaing02 {
		transform: scale(0.85);
	}

	#bloc-parpaing03 {
		opacity: 0.5;
		transform: scale(0.85) translateY(5%);
	}

	.animation#bloc-x {
		position: sticky;
		margin: 2vh 0 5vh;
		top: 5vh;
		width: 90vh;
		height: 90vh;
		max-width: 100%;
		max-height: 56%;
		z-index: -1;
		mix-blend-mode: multiply;
	}

	.get-the-font {
		display: grid;
		right: 2rem;
		bottom: -1rem;
	}

	.get-the-font .download-button {
		grid-column: 1;
		grid-row: 1;
		justify-self: center;
	}

	.get-the-font img {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		height: auto;
		filter: drop-shadow(0 0.125em 0.125em rgba(0,0,0,0.25));
	}

	.download-button {
		background-image: linear-gradient(185.65deg, #FFFFFF00, #FFFFFFBB 34%, #FFFFFF00 67%);

	}

	.section-download img {
		margin-top: -11%;
		margin-bottom: -12%;
		max-width: min(32rem, 80vw);
	}

	.gradient-transition {
		position: relative;
		height: 200px;
		background: var(--blue);
	}

	.gradient-transition .gradient {
		position: absolute;
		width: 100%;
		height: 100%;
		inset: 0;
		mix-blend-mode: multiply;
		background-image: url('../images/gradient.png');
	}

	.site-footer {
		margin-top: 0;
		background-color: black;
	}

}