html {
  cursor: url('https://assets.larger.software/images/cursor-default.svg'), auto;
}

a {
  cursor: url('https://assets.larger.software/images/cursor-pointer.svg') 8 0, pointer;
}

/* Nunito Font */
@font-face {
	font-family: 'Nunito';
	src: url('https://assets.larger.software/webfonts/nunito.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

/* App Colors */
:root {
	--color-alearni: 			#44a8ff;
	--color-audcast: 			#4468ff;
	--color-papergirl: 			#4488ff;
	--color-plainsheet:			#14a8cf;
	--color-plotsandplayers: 	#f4484f;
	--color-vibier: 			#6468ff;
	--color-zevelup: 			#04b8af;
}

.alearni 			{ background-color: var(--color-alearni); }
.audcast 			{ background-color: var(--color-audcast); }
.papergirl	 		{ background-color: var(--color-papergirl); }
.plainsheet	 		{ background-color: var(--color-plainsheet); }
.plotsandplayers	{ background-color: var(--color-plotsandplayers); }
.vibier 			{ background-color: var(--color-vibier); }
.zevelup 			{ background-color: var(--color-zevelup); }

/* Global Reset & Base */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

.app-card-container:has(a:hover) {
	opacity: 0.8;
}

body {
	font-family: 'Nunito', sans-serif;
	background-color: #f4f8ff;
	 
	color: #333;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.scenery-sky-show {
	background-color: #4488ff;
	background-image: url('images/scenery.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-attachment: fixed;
	background-size: 100% auto;
	height: 500px;
	width: 100%;
}

/* when the viewport is narrower than 1200px, “lock” the scenery height */
@media (max-width: 1200px) {
	.scenery-sky-show {
		background-size: auto 400px;  /* 100% width, 300px tall */
	}
}

/* Header & Logo */
header {
	background: #f4f8ff;
	padding: 2rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
header .logo img {
	max-width: 200px;
	height: auto;
}
.information-subheader {
	margin-top: 1rem;
	font-size: 1.25rem;
	color: #555;
	text-align: center;
}

/* Apps Container & Spacing */
.apps-container {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1;
	margin-bottom: 3rem;
}

/* Cloud Backgrounds — full‑width, seamless */
.cloud-container {
	display: block;
}
.clouds-1 { background-color: #d1e2ff; }
.clouds-2 { background-color: #c0d7ff;  }
.clouds-3 { background-color: #aecbff;  }

.cloud-edge {
	position: relative;
	width: 100%;
	height: 80px;
	background: url('images/cloud-edge.png') repeat-x bottom center;
	background-size: auto 80px;
	margin-bottom: -80px;
}

.cloud-edge.clouds-1 { background-image: url('images/cloud-edge-1.png'); }
.cloud-edge.clouds-2 { background-image: url('images/cloud-edge-2.png'); }
.cloud-edge.clouds-3 { background-image: url('images/cloud-edge-3.png'); margin-bottom: -130px; }

.app-card-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: flex-end;
	padding: 160px 2rem 2rem;
	background-image: url('images/cloud-card.svg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 500px auto;
	max-width: 500px;
	height: 400px;
	margin: auto;
	opacity: 1;
}

.app-card {
	padding: 0;
	background: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.app-card .app-logo {
	grid-area: logo;
	height: 56px;
	max-width: 250px;
	object-fit: contain;
	margin-bottom: 1.5rem;
}
.app-card .app-desc {
	grid-area: desc;
	font-size: 1rem;
	margin: 0;
	font-size: 18px;
	color: #34383f;
}

.learn-more-button {
	margin-top: 12px;
	border-radius: 99px;
	color: #f4f8ff;
	padding: 8px 16px;
}
.learn-more-button:hover {
	opacity: 0.8;
}

footer {
	text-align: center;
	background-color: #aecbff;
	position: relative;
	z-index: 1;
	padding-top: 64px;
	padding-bottom: 32px;
	color: #34383f;
	line-height: 2;
}

footer a {
	color: #34383f;
}

footer a:hover {
	color: #4488ff;
}