@layer desktop {
	:root {
		--purple: #6917D0;
		--pink: #FF2AD4;
		--green: #00FF9C;
		--green-dark: #00D696;
		--mint: #E8FFF6;
		--beige: #FFF2EB;
		--pink-light: #FFDCDC;
		--glyphset: var(--pink);
	}

	body {
		margin-top: 0;
		background-attachment: fixed;
		background-color: white;
		color: var(--purple);
		--fg-color: var(--purple);
		--bg-color: white;
	}

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

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

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

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

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

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

	.fg-white {
		color: white;
	}

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

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

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

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

	.fg-black {
		color: black;
	}

	.f-astrolabe {
		font-family: Astrolabe;
	}

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

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

	.family {
		font-family: Astrolabe;
		font-size: min(3.35rem, 9vw);
		line-height: 1.25;
		margin-bottom: 2.65rem;
	}

	.astrolabe-container {
		position: sticky;
		top: 0;
		padding-top: 1%;
		margin-bottom: -100vh;
		width: calc(110vh);
		height: calc(110vh);
		z-index: -1;
	}

	.astrolabe-layer {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center center;
	}

	.image-block {
		background-color: #FFF2EB;
		border-radius: 1.5rem;
		padding: 1rem;
		aspect-ratio: 1;
	}

	*[data-parallax] {
		transform: translateY(var(--parallax-offset));
	}

	#animation-belier {
		position: relative;
		margin: auto;
		max-width: 58rem;
		margin-top: -15%;
	}

	#section-poisson-lion {
		z-index: 2;
	}

	#animation-poisson::after,
	#animation-lion::after {
		content: "";
		display: block;
		margin-bottom: -4%;
	}

	#section-cancer .section-content {
		border: .5vw solid var(--pink);
		border-radius: 5.625vw;
		display: grid;
	}

	#text-cancer, #animation-cancer {
		grid-column: 1;
		grid-row: 1;
	}

	#animation-cancer {
		position: relative;
		margin: auto;
		max-width: 62rem;
	}

	#animation-balance {
		position: sticky;
		margin: 2vh 0 5vh;
		top: 5vh;
		width: 90vh;
		height: 90vh;
		max-width: 100%;
		max-height: 100%;
	}

	#section-taureau {
		z-index: 2;
	}

	#animation-taureau {
		position: relative;
		margin: auto;
		max-width: 50rem;
	}

	#animation-taureau::before {
		content: "";
		display: block;
		margin-top: -6%;
	}

	#animation-taureau::after {
		content: "";
		display: block;
		margin-bottom: -2.9%;
	}

	.marquee-scroll {
		white-space: nowrap;
		overflow: hidden;
	}

	#section-sky {
		z-index: 2;
		position: relative;
	}

	#section-sky .section-content svg {
		margin: auto;
	}

	#section-sky .section-content::after {
		content: "";
		display: block;
		margin-bottom: -3%;
	}

	#animation-gemeaux {
		padding: 2rem;
	}

	#section-libra .section-content {
		border: .5vw solid var(--beige);
		border-radius: 5.625vw;
		padding-bottom: 30%;
		margin-bottom: 3.3%;
	}

	#section-libra-animations {
		margin-top: -55%;
		display: flex;
		aspect-ratio: 1.818;
		align-items: flex-end;
	}

	#section-libra-animations .animation {
		height: 100%;
		width: auto;
	}

	#section-verseau {
		position: relative;
		padding-bottom: 10vw;
	}

	#animation-verseau {
		width: auto;
		height: 47vw;
		position: absolute;
		bottom: -2%;
		right: 0;
	}

	.glyphset .glyph {
		background-color: var(--beige);
	}

	.glyphset .glyph:hover {
		background-color: var(--pink-light);
	}

	.glyphset .glyph-input:checked + .glyph svg {
		background-color: #FFC7DA;
	}

	.glyphset .glyphset-header::before {
		--glyphset: #FF5789;
	}

	.download-button {
		background-color: var(--purple);
		color: var(--green);
	}

	.section-download .section-content {
		margin-top: -6rem;
	}

	.section-download img {
		position: relative;
		display: block;
		max-width: 24rem;
		margin-bottom: 6rem;
		animation: 3s ease-in-out infinite sticker;
	}

	.section-download .download-button {
		position: relative;
		top: 8.5rem;
	}

	@keyframes sticker {
		0% {
			transform: rotate(-2deg);
		}
		50% {
			transform: rotate(2deg);
		}
		100% {
			transform: rotate(-2deg);
		}

	}

	.site-footer {
		margin-top: 0;
		background-color: var(--mint);
		color: var(--green-dark);
	}

	.site-footer .footer-logo {
		color: var(--green);
	}
}