html,
body {
	height: 100%;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background-color: #0f0f12;
	color: #e6e6ea;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

h1 {
	font-size: 2.25rem;
	margin-bottom: 0.5rem;
}

p {
	margin: 0;
	color: #b8b8c2;
}

.page-image {
	min-height: 100vh;
    width: 100%;
    background-image: url('../img/concept_03_environment.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
	background-attachment: fixed;
}

.centered-image {
    display: block;
    max-width: min(100%, 1040px);
    max-height: clamp(140px, 28vh, 320px);
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.download-button {
	display: inline-block;
	padding: 0.9rem 1.5rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: #0f0f12;
	background-color: #FFDD00;
	text-decoration: none;
	border-radius: 4px;
	margin: 1rem;
}

.download-button:hover {
	background-color: #f0d070;
}

.socials {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

.socials-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #FFDD00;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 9vw;
	min-width: 3em;
	max-width: 4em;
	transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.social-link:hover {
	opacity: 1;
	transform: translateY(-3px);
	filter: brightness(0) saturate(100%)
            invert(79%) sepia(96%)
            saturate(749%) hue-rotate(2deg)
            brightness(103%) contrast(101%);
}

.social-link img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	filter: invert(1);
}

.mobile-warning {
	margin: 0;
	padding: 0.65rem 0.9rem;
	border: 1px solid rgba(230, 193, 90, 0.6);
	border-radius: 6px;
	color: #f3de9a;
	background-color: rgba(15, 15, 18, 0.55);
	font-size: 0.95rem;
	max-width: 420px;
}

.mobile-warning.is-visible {
	animation: fade-in 240ms ease-out;
}

.box {
	border: 1px solid rgba(230, 193, 90, 0.45);
	border-radius: 10px;
	padding: clamp(14px, 3vh, 24px) clamp(16px, 4vw, 32px);
	background-color: rgba(15, 15, 18, 0.35);
}

/* Layout sections */
main {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vh, 48px) 16px;
}

.content {
	width: 100%;
	max-width: 720px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(10px, 2.5vh, 22px);
}

footer {
	text-align: center;
	font-size: 12px;
	opacity: 0.8;
	padding: 8px 0 12px;
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}