@font-face {
	font-display: swap;
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/lato-v24-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	src: url('fonts/lato-v24-latin-italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/lato-v24-latin-700.woff2') format('woff2');
}

body {
	font-family: 'Lato', sans-serif;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
}

h2 {
text-shadow: 0px 1px 1px #000000;
margin-top: 0;
}

/* Profile links: one row of four, two by two where there isn't room (never three and one left
   over). The resume is the main one, in the same coral as the games' play buttons. Their shadows
   are box-shadows and hovering lifts them by transform, so nothing gets redrawn as they move. */
.profile-links {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 22px auto 26px;
}

.profile-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	min-height: 52px;
	padding: 0 12px;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	white-space: nowrap;
	background-color: rgba(255, 255, 255, 0.06);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 12px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 3px rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.28);
	transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* (a deeper shadow that fades in under a lifted button) */
.profile-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 14px 26px rgba(0, 0, 0, 0.38);
	opacity: 0;
	transition: opacity 0.18s ease;
	pointer-events: none;
}

/* (a touch deeper than the games' coral, so its white writing is easy to read: 4.7 to 1) */
.profile-link--primary {
	background-color: #cc4159;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
	border-color: #ec8597;
}

.profile-link-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.profile-link-icon--line {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (hover: hover) {
	.profile-link:hover {
		transform: translateY(-2px);
		background-color: rgba(255, 255, 255, 0.13);
		border-color: rgba(255, 255, 255, 0.62);
	}

	.profile-link--primary:hover {
		background-color: #d9506a;
		border-color: #ffc6cf;
	}

	.profile-link:hover::after {
		opacity: 1;
	}
}

.profile-link:active {
	transform: translateY(0) scale(0.97);
}

.profile-link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* (two by two once four in a row would squeeze their names) */
@media (max-width: 720px) {
	.profile-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		max-width: 440px;
	}

	.profile-link {
		min-height: 50px;
		font-size: 16px;
	}
}

/* Support: one more of those buttons at the very end, for anyone who'd like to chip in (with room
   under it for the copyright, which tucks itself up close) */
.support {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 95%;
	margin: 36px auto 9%;
	color: #ffffff;
	font-size: 18px;
	line-height: 1.4;
	text-align: center;
	text-shadow: 0 3px 3px #000000;
}

.support-link {
	padding: 0 22px;
}

@media (max-width: 340px) {
	.profile-link {
		gap: 7px;
		padding: 0 8px;
		font-size: 15px;
	}

	.profile-link-icon {
		width: 18px;
		height: 18px;
	}
}


#main-container {
width: 100%;
display: flex;
justify-content: center;
}

main {
	width: 100%;
	max-width: 720px;
	background-color: rgba(0, 0, 0, 0.25); /* Adds a slight overlay for contrast */
	border-radius: 10px;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
	padding:40px 40px 0px 40px;
}

.art {
position: relative;
text-align: center;
max-width: 100%;
}

.art-main {
width: 90%;
margin: 20px;
filter: drop-shadow(0px 0px 4px #ffffff);
}

/* The logo tilts to and fro over the art. The tilt is on a wrapper and the glow on the logo inside
   it, so the glow is drawn once and the tilt just turns it (with both on the logo, the glow was
   worked out again every frame) */
.art-logo {
position: absolute;
inset: 0;
pointer-events: none;
animation: tilt 7s infinite alternate ease-in-out;
will-change: transform;
}

.art-main2 {
position: absolute;
left: 0;
top: 0;
width: 90%; /* Match the width of .art-main if needed */
margin: 20px; /* Match the margin of .art-main for perfect overlay */
filter: drop-shadow(0px 0px 4px #ffffff);
}

.art-main:hover {
}

@keyframes tilt {
	from {
		transform: rotate(-2deg);
	}
	to {
		transform: rotate(2deg);
	}
}




.text {
width: 95%;
font-size: 22px;
line-height: 1.5;
color: #ffffff;
text-shadow: 0px 3px 3px #000000;
text-align: center;
margin: auto;
margin-top: 2%;
}

.text-2 {
width: 95%;
font-size: 15px;
line-height: 1.2;
color: #FFFFFF;
text-shadow: 0px 3px 3px #000000;
text-align: center;
margin: auto;
margin-top: -5%;
margin-bottom: 5%;
}

.project-link {
	color: #ffffff;
	font-weight: 700;
	text-underline-offset: 2px;
}

.project-link:hover {
	color: #ffd6df;
}

.text-3 {
	width: 95%;
	font-size: 15px;
	line-height: 1.2;
	color: #FFFFFF;
	text-align: center;
	margin: auto;
	margin-top: -5%;
	margin-bottom: 5%;
}

.apps-section {
	width: 100%;
	margin: 5% auto 0;
}

.apps-section .text {
	margin-top: 0;
}

.app-grid {
	display: grid;
	gap: 18px;
	margin: 0 auto 30px;
	width: 95%;
}

.app-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 155px;
	gap: 16px;
	align-items: stretch;
	box-sizing: border-box;
	min-height: 230px;
	overflow: hidden;
	padding: 16px;
	color: #ffffff;
	text-align: left;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 8px;
	box-shadow: 0px 3px 3px #000000, 0px 10px 22px rgba(0, 0, 0, 0.32);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
	pointer-events: none;
}

.app-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.58);
	box-shadow: 0px 3px 3px #000000, 0px 14px 26px rgba(0, 0, 0, 0.38);
}

.app-card-frog {
	background: linear-gradient(135deg, #16392f 0%, #20351d 54%, #382814 100%);
}

.app-card-muse {
	background: linear-gradient(135deg, #172034 0%, #292238 55%, #43201d 100%);
}

/* Muse Penguin: the featured one, with the gang playing right there on the card */
.app-card-penguin {
	background: linear-gradient(135deg, #132a46 0%, #1d2b52 55%, #2b2250 100%);
}

.app-card-feature {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 20px;
	align-items: center;
}

.app-card-feature:hover {
	transform: none;
	border-color: rgba(255, 255, 255, 0.24);
}

.app-card .app-highlight {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

.penguin-preview {
	position: relative;
	z-index: 1;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border: 3px solid rgba(255, 255, 255, 0.42);
	border-radius: 14px;
	background: #0b1626;
	box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.5);
}

.penguin-preview video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	image-rendering: pixelated;
}

.app-soon {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	align-self: flex-start;
	min-height: 42px;
	padding: 0 18px;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px dashed rgba(255, 255, 255, 0.55);
	border-radius: 8px;
}

.app-card-content,
.phone-preview {
	position: relative;
	z-index: 1;
}

.app-card-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.app-card-header {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
}

.app-icon {
	width: 58px;
	height: 58px;
	border-radius: 13px;
	box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.4);
}

.app-label {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.1;
	color: rgba(255, 255, 255, 0.72);
}

.app-card h2 {
	margin: 0;
	font-size: 24px;
	line-height: 1.05;
	overflow-wrap: break-word;
}

.app-card p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.9);
}

.app-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	margin-bottom: 14px;
}

.app-tags span {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 9px;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
}

.app-store-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	box-sizing: border-box;
	width: 176px;
	min-height: 50px;
	padding: 7px 15px 8px;
	color: #ffffff;
	background: #050505;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 8px;
	box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.18), 0px 5px 12px rgba(0, 0, 0, 0.3);
}

.app-store-icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-left: auto;
	fill: currentColor;
}

.app-store-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-width: 0;
}

.app-store-copy span {
	font-size: 10px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.78);
}

.app-store-copy strong {
	margin-top: 3px;
	font-size: 20px;
	line-height: 1;
}

.phone-preview {
	align-self: center;
	justify-self: end;
	width: 145px;
	height: 215px;
	overflow: hidden;
	border: 3px solid rgba(255, 255, 255, 0.42);
	border-radius: 18px;
	background: rgba(0, 0, 0, 0.45);
	box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.5);
}

.screenshot-track {
	display: flex;
	width: 500%;
	height: 100%;
	animation: screenshot-reel 45s infinite;
	will-change: transform;
}

.screenshot-track img {
	display: block;
	flex: 0 0 20%;
	width: 20%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.app-card-muse .screenshot-track img {
	object-position: top center;
}

@keyframes screenshot-reel {
	0%, 16% {
		transform: translateX(0);
	}
	20%, 36% {
		transform: translateX(-20%);
	}
	40%, 56% {
		transform: translateX(-40%);
	}
	60%, 76% {
		transform: translateX(-60%);
	}
	80%, 100% {
		transform: translateX(-80%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.art-logo,
	.screenshot-track {
		animation: none;
	}
}

.software-section,
.games-section {
	width: 100%;
	margin: 5% auto 0;
}

.software-card {
	width: 95%;
	margin: 0 auto 30px;
	color: #ffffff;
	text-align: left;
	background: linear-gradient(135deg, #20364e 0%, #192238 100%);
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 9px;
	box-shadow: 0 3px 3px #000000, 0 10px 22px rgba(0, 0, 0, 0.34);
}

.game-card-content > .software-highlight {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.82);
}

.game-grid {
	display: grid;
	gap: 18px;
	width: 95%;
	margin: 0 auto 30px;
}

.game-card {
	display: grid;
	grid-template-columns: minmax(210px, 42%) minmax(0, 1fr);
	min-height: 260px;
	overflow: hidden;
	color: #ffffff;
	text-align: left;
	background: linear-gradient(135deg, #283e63 0%, #17233d 100%);
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 9px;
	box-shadow: 0 3px 3px #000000, 0 10px 22px rgba(0, 0, 0, 0.34);
}

.game-card:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) minmax(210px, 42%);
}

.game-card:nth-child(even) .game-card-media {
	grid-column: 2;
	grid-row: 1;
}

.game-card:nth-child(even) .game-card-content {
	grid-column: 1;
	grid-row: 1;
}

.game-card-frog {
	background: linear-gradient(135deg, #163a43 0%, #211c3c 100%);
}

.game-card-pineapple {
	background: linear-gradient(135deg, #6a3e36 0%, #3f2739 100%);
}

.game-card-boombox {
	background: linear-gradient(135deg, #292b31 0%, #17181c 100%);
}

.game-card-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 10px;
	overflow: hidden;
	background: #11151f;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.game-card-media::before {
	content: "";
	position: absolute;
	inset: -24px;
	background-image: var(--game-art);
	background-position: center;
	background-size: cover;
	filter: blur(18px) brightness(0.62) saturate(1.15);
	transform: scale(1.12);
	opacity: 0.9;
}

.game-card-countdown {
	--game-art: url("images/game-countdown-island.webp");
}

.game-card-frog {
	--game-art: url("images/game-frog-quest.webp");
}

.game-card-pineapple {
	--game-art: url("images/game-pineapple-race.webp");
}

.game-card-boombox {
	--game-art: url("images/game-boombox-swarm.webp");
}

.game-card:nth-child(even) .game-card-media {
	border-right: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.game-card-image {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 240px;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.58);
	border-radius: 5px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(0, 0, 0, 0.75);
}

.game-card-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 18px;
}

.game-label {
	margin: 0 0 5px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.68);
}

.game-card h3 {
	margin: 0;
	font-size: 23px;
	line-height: 1.08;
	text-shadow: 0 1px 1px #000000;
}

.game-card-content > p:not(.game-label) {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.38;
	color: rgba(255, 255, 255, 0.9);
}

.game-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0;
}

.game-tags span {
	padding: 4px 8px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
}

.game-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.game-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	box-sizing: border-box;
	padding: 8px 12px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 6px;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.game-button-primary {
	background: #e4586e;
	border-color: #f08798;
}

.game-button:hover,
.game-button:focus-visible {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.72);
}

.game-button-primary:hover,
.game-button-primary:focus-visible {
	background: #ef6d82;
}

.button {
position: relative;
text-align: center;
max-width: 560px;
margin: auto;
margin-top: 5%;
display: block;
align-items: center;
justify-content: center;
gap: 0.4em;
}

.button-link {
	width: 100%;
	filter: drop-shadow(0px 3px 3px #000000);
	transition: 0.2s;
	display: block;
	margin-bottom: 10%;
}

.button-link:hover {
	transform: scale(1.03);
	transition: 0.2s;
}

/* The website previews are looping videos: they keep their shape as they scale, like the images,
   and their shadow is a box shadow (a filter would be redrawn for every frame they play) */
.preview-video {
	max-width: 100%;
	height: auto;
	filter: none;
	box-shadow: 0px 3px 3px #000000, 0px 6px 14px rgba(0, 0, 0, 0.45);
}



.section-title {
	position: relative;
    width: 250px;          /* Set to 100% to fill the main content area */
    height: 100px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 24px;
    margin: auto;
	margin-bottom:20px;
    border-radius: 5px;    /* Optional: smooth the edges slightly */
    overflow: hidden;
	background-color: #171717;
	box-shadow: 0 3px 3px #000000;
	transform: translateZ(0);
	backface-visibility: hidden;
	isolation: isolate;
}

.section-title::before {
	content: "";
	position: absolute;
	inset: -2px;
	background-image: url("images/earthboundbattlesquiggle-soft.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.5;
	transform: scale(1.03);
	z-index: -1;
}

/* Responsive Design */
@media (max-width: 600px) {
	main {
		box-sizing: border-box;
		overflow-x: hidden;
		padding: 34px 14px 0px 14px;
	}

	.section-title {
		width: 250px;          /* Set to 100% to fill the main content area */
		height: 50px;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 24px;
		margin: auto;
		margin-top:40px;
		margin-bottom:20px;
		border-radius: 5px;    /* Optional: smooth the edges slightly */
		overflow: hidden;
	}


	main > .art {
	position: relative;
	text-align: center;
	max-width: 100%;
	margin-bottom:-20px;
	transform:scale(1.2)
	}

	.app-grid {
		width: 100%;
		gap: 14px;
	}

	.app-card {
		grid-template-columns: 1fr;
		gap: 12px;
		min-height: 0;
		padding: 14px;
	}

	.app-card-header {
		grid-template-columns: 54px minmax(0, 1fr);
		gap: 11px;
		margin-bottom: 10px;
	}

	.app-icon {
		width: 54px;
		height: 54px;
		border-radius: 12px;
	}

	.app-card h2 {
		font-size: 21px;
	}

	.app-card p {
		margin-bottom: 12px;
		font-size: 13px;
		line-height: 1.3;
	}

	.app-tags {
		gap: 7px;
		margin-bottom: 12px;
	}

	.app-tags span {
		min-height: 24px;
		padding: 0 9px;
		font-size: 11px;
	}

	.app-store-button {
		justify-content: space-between;
		width: 100%;
		min-height: 50px;
		padding: 7px 18px 8px;
	}

	.app-store-icon {
		width: 30px;
		height: 30px;
	}

	.app-store-copy strong {
		font-size: 18px;
	}

	.phone-preview {
		justify-self: center;
		width: 100%;
		height: 220px;
		max-height: none;
		border-width: 2px;
		border-radius: 10px;
	}

	.app-card-frog .screenshot-track img {
		object-position: center center;
	}

	.app-card-muse .phone-preview {
		height: 330px;
		background: rgba(0, 0, 0, 0.58);
	}

	.app-card-feature {
		grid-template-columns: 1fr;
	}

	.penguin-preview {
		order: -1;
		border-width: 2px;
		border-radius: 10px;
	}

	.app-soon {
		justify-content: center;
		width: 100%;
	}

	.game-grid {
		width: 100%;
		gap: 14px;
	}

	.software-card {
		width: 100%;
	}

	.game-card {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.game-card:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.game-card:nth-child(even) .game-card-media,
	.game-card:nth-child(even) .game-card-content {
		grid-column: auto;
		grid-row: auto;
	}

	.game-card-media,
	.game-card:nth-child(even) .game-card-media {
		padding: 10px;
		border-right: 0;
		border-left: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	}

	.game-card-image {
		height: auto;
		max-height: 230px;
	}

	.game-card-content {
		padding: 15px;
	}

	.game-card h3 {
		font-size: 21px;
	}

	.game-actions {
		flex-direction: column;
	}

	.game-button {
		width: 100%;
	}


}