@font-face {
    font-family: 'Lexend';
    src: url('/resources/Lexend.woff2') format('woff2'),
         url('/resources/Lexend.ttf') format('truetype');
    font-style: normal;
}

:root {
    /* Brand */
    --apple: #5CBB37;
    --forest: #157437;
    --lemon: #EECA1E;
    --poppy: #CC2727;
    --tiber: #003B1F;

    /* Fixed */
    --seasalt: #F5F1EA;
    --chalk: #F0EDE5;
    --linen: #E8E3DC;
    --stone: #BDB8B0;
    --dim: #716B63;
    --mocha: #7A7470;
    --espresso: #272320;
    --night: #1A1713;
}

* {
    padding: 0;
    margin: 0;
    font-synthesis: none;
    font-family: 'Lexend';
    font-weight: 400;
}

body {
    background-color: var(--seasalt);
    color: var(--night);
    overflow-x: hidden;
}

h1 {
    font-size: 3rem;
    font-weight: 600;
    color: var(--footer);
}

p {
    color: var(--mocha);
    font-size: 1.25rem;
}

.button {
    background-color: var(--night);
    color: var(--seasalt);
    font-size: 1rem;
    font-weight: 400;
    padding: 16px 32px;
    border-radius: 32px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    width: fit-content;
}

header {
	min-height: 600px;
}

main {
	display: flex;
	flex-direction: column;
	gap: 64px;
	align-items: center;
}

main section {
	display: flex;
	flex-direction: column;
	padding: 32px;
	gap: 32px;
}

main section.block {
	margin: var(--space-large);
	padding: var(--space-large);
	border-radius: var(--radius-medium);
	transition: all 400ms;
	box-shadow: var(--shadow-outer);
}

main section.block.expanded {
	margin: 0;
	padding: calc(2 * var(--space-large));
	border-radius: 0;
}

main section .heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-small);
	padding: 0 32px;
}

main section .heading h2 {
	font-size: 2rem;
	font-weight: 900;
}

main section .heading h2 .hilight {
	color: var(--apple);
}

.grid {
	display: grid;
	gap: 32px;
}

.box {
	border-radius: 32px;
	overflow: hidden;
	position: relative;
}

#marquee {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 64px 0 24px;
	overflow: hidden;
}

#marquee .marquee-row {
	width: 100%;
	overflow: hidden;
	padding: 0.15em 0;
	box-sizing: border-box;
}

#marquee .marquee-track {
	display: flex;
	width: max-content;
	gap: 64px;
	will-change: transform;
}

#marquee .marquee-track span {
	font-size: 7rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--night);
	white-space: nowrap;
}

@media screen and (max-width: 900px) {
	#marquee {
		gap: 8px;
		padding: 40px 0 16px;
	}

	#marquee .marquee-track {
		gap: 32px;
	}

	#marquee .marquee-track span {
		font-size: 3rem;
	}
}

footer {
	display: flex;
	flex-direction: column;
	padding: 50px 100px 100px;
	gap: 100px;
}

footer .links {
	display: flex;
	justify-content: space-between;
	gap: 10dvw;
}

footer .links .menu {
	display: flex;
	gap: 100px;
}

footer .links .menu .column {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 50px;
}

footer .links .menu .column .name {
	color: var(--stone);
}

footer .links .menu .column a {
	color: var(--night);
	text-decoration: none;
	transition: color 150ms;
}

footer .links .menu .column a:hover {
	color: var(--apple);
}

footer .links .sites {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	height: max-content;
	gap: 9px;
}

footer .links .sites .site {
	aspect-ratio: 1 / 1;
	padding: 5px;
	border-radius: 5px;
	background-color: var(--linen);
	color: var(--night);
	display: flex;
	transition: color 300ms;
}

footer .links .sites .site:hover {
	color: var(--apple);
}

footer .links .sites .site svg {
	height: 2rem;
}

footer .sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--stone);
	gap: 50px;
}

footer .sub .legal {
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: 50%;
}

footer .sub .logo {
	display: flex;
	justify-content: center;
	align-items: center;
}

footer .sub .logo img {
	height: 50px;
}

@media screen and (max-width: 1200px) {
	footer .links {
		flex-direction: column;
	}

	footer .links .menu {
		width: 100%;
		justify-content: space-between;
	}

	footer .links .sites {
		display: flex;
	}
}

@media screen and (max-width: 1024px) {
	footer {
		padding: 50px;
		gap: 50px;
	}

	footer .links .menu {
		gap: 36px;
	}
}

@media screen and (max-width: 848px) {
	footer .sub .legal {
		width: 100%;
	}
}

@media screen and (max-width: 672px) {
	footer .links .menu {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	footer .sub {
		flex-direction: column;
	}
}

@media screen and (max-width: 496px) {
	footer {
		padding: 50px 36px;
	}

	footer .links .menu {
		grid-template-columns: 1fr;
	}
}