* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;

	/* outline: 1px solid #f00 !important; */
}

@font-face {
  font-family: "Arial Rounded MT Bold";
  src:
    local("Arial Rounded MT Bold"),
    url("/assets/fonts/arial-rounded-mt-bold.woff") format("woff");
}

body::after{
	position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; 
	content: 
		url("/assets/images/links/linkhover.png")
		url("/assets/images/links/linkpressed.png")
		url("/assets/images/board/boardhover.png")
		url("/assets/images/board/boardpressed.png")
		url("/assets/images/buttons/bskyhover.png")
		url("/assets/images/buttons/bskypressed.png")
		url("/assets/images/buttons/thhover.png")
		url("/assets/images/buttons/thpressed.png")
		url("/assets/images/buttons/pctvhover.png")
		url("/assets/images/buttons/pctvpressed.png")
		url("/assets/images/buttons/nosoundhover.png")
		url("/assets/images/buttons/sound.png")
		url("/assets/images/buttons/soundhover.png")
		url("/assets/images/buttons/soundpressed.png")
		url("/assets/images/buttons/nomusichover.png")
		url("/assets/images/buttons/music.png")
		url("/assets/images/buttons/musichover.png")
		url("/assets/images/buttons/musicpressed.png")
		;
}

:root {
	--offs: -0px;
	--cBottom: #719511;
}

body {
	min-height: 100vh;
	width: 100vw;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	
	background-color: #EFF9FF; 
	background-image: url("/assets/images/webgrass.png"), linear-gradient(#57B5E7 , #EFF9FF);
	background-repeat: no-repeat, no-repeat;
	background-position: 50% 480px, 0px 0px;
	background-size: auto 640px, auto 1000px;
	
	font-family: 'Arial Rounded MT Bold';
	font-size: 18px;
	/* color: pink; */
	color: #800015;
}

#page {
	flex: 1;
	display: flex;
	flex-direction: column;
  	justify-content: center;
  	align-items: center;
	
}

header {
	height: 128px;
	width: 850px;

	nav {
		height: 92px;
		width: 100%;
		display: flex;
		flex-direction: row;
  		justify-content: center;
  		align-items: center;
	}

	img {
		position: relative;
		height: 64px;
	}

	margin-bottom: 64px;
}

main {
	width: 900px; height: 646px;
	padding-top: 64px; padding-bottom: 80px;
	margin-top: -64px; margin-bottom: -80px;
	background: url("/assets/images/sign.png") 50% 0px / auto 646px no-repeat border-box border-box scroll transparent;

	margin-left: var(--offs);
}

.sign-container {
	display: grid;
	
	width: 800px; height: 100%; margin: 0 auto;
	grid-template: 
		"n m" 172px
		"l m" 280px
		"b x" 50px / 260px 540px;
	.notes { grid-area: n; }
	.links { grid-area: l;
		.bl { 
			width: 75px; height: auto;
			margin: auto -2px; 
		}
	}
	.buttonmenu { grid-area: b;
		text-align: left;
	}
	.sitemap { grid-area: m;
		margin-bottom: -32px;
		align-content: center;
	}

	> div {
		text-align: center;
	}
	
	/* TEST BORDERS */
	/* > * {border: 2px dashed blue;} */
}

footer {
	flex: 0;
	width: fit-content;
	margin: 90px auto 0 auto;
	padding: 16px;
}

.clouds, .clouds2 {
	position: absolute; display: flex; width: 100vw; height: auto; overflow: hidden;
}
.clouds {
	z-index: -2; top: 140px;
	.cloud { animation: 120s linear -9s normal infinite forwards running marquee; }
}
.clouds2 {
	z-index: -1; top: 20px;
	.cloud { animation: 60s linear 0s normal infinite forwards running marquee; }
}

.map-img {
	width: 100%;
}

@keyframes marquee {
	0% { transform: translateX( 0% ); }
	100% { transform: translateX( -100% ); }
}

.poma {
	position: absolute;
	top: 540px;
	left: calc(50% + 240px + var(--offs)*0.5);
	height: 360px;
}

@media screen and (max-width:1200px) {} /* poma cutoff */

@media screen and (max-width:900px) { /* sign cutoff */
	body {
		/* min-height: unset; */
	}
	header {
		width: 100%;
		padding-top: 36px;

		.logo {
			position: fixed; top: 0px; left: 0px;
			margin: 3px;
		}
	}

	main { width: 100%; }

	.sign-container {
		display: grid;
		width: 95%; height: 500px;
		align-items: stretch;
		margin: 0 auto;
		grid-template: 
			"n l" 197px
			"m m" 1fr / auto 1fr;
		.notes { 
			min-width: 291px;
			height: 100%;
		}
		.links { 
			.bl { 
				display: block;
				width: min(100%, 65px); height: auto;
				margin: auto; 
			}
		}
		.buttonmenu { 
			position: fixed;
			top: 3px; right: 3px;
		}
		.sitemap { 
			margin-bottom: unset;
			height: 100%;
			max-height: 303px;
		}
	}
	.map-img {
		width: unset;
		max-width: 100%;
		max-height: 303px;
		
	}

	footer {
		width: 100%;
		text-align: center;
		margin: 96px 0 0 0;
		font-size: 16px;
	}

	.poma { 
		position: absolute;
		top: 690px;
		left: calc(50% - 108px);
		height: 80px;
		z-index: -1;
	}
}

@media screen and (min-width:540px) and (max-width:900px) { /* sign cutoff but thinner */
	.sign-container {
		.links {
			.bl {
				display: inline-block;
			}
		}
	}
}

#bl-links {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	margin-top: 16px;
	padding: 8px 0px;
	border-radius: 24px;
}

.bl, .bbl, #board { /* BUTTON LINK */
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	vertical-align: middle;
}

.bl {
	aspect-ratio: 1 / 1;
	background: url("/assets/images/buttons/button.png") center / contain no-repeat border-box border-box scroll transparent;
	>span {
		font-size: 16px;
		display: inline-block;
		margin: 2em auto;
	}
}

.bbl {
	aspect-ratio: 48 / 19;
	width: 180px; 
	background: url("/assets/images/links/link.png") center / contain no-repeat border-box border-box scroll transparent;
	&:hover { background-image: url("/assets/images/links/linkhover.png"); }
	&:active { background-image: url("/assets/images/links/linkpressed.png"); }
}

#board {
	height: 100%; width: 100%;
	/* background: url("/assets/images/board/board.png") center / contain no-repeat border-box border-box scroll transparent;
	&:hover { background-image: url("/assets/images/board/boardhover.png"); }
	&:active { background-image: url("/assets/images/board/boardpressed.png"); } */

	/* unimplemented */
	background: url("/assets/images/board/boardpressed.png") center / contain no-repeat border-box border-box scroll transparent;
	cursor: default;
}

#l-bsky {
	background-image: url("/assets/images/buttons/bsky.png");
	&:hover { background-image: url("/assets/images/buttons/bskyhover.png"); }
	&:active { background-image: url("/assets/images/buttons/bskypressed.png"); }
}

#l-toy {
	background-image: url("/assets/images/buttons/th.png");
	&:hover { background-image: url("/assets/images/buttons/thhover.png"); }
	&:active { background-image: url("/assets/images/buttons/thpressed.png"); }
}

#l-pctv {
	background-image: url("/assets/images/buttons/pctv.png");
	&:hover { background-image: url("/assets/images/buttons/pctvhover.png"); }
	&:active { background-image: url("/assets/images/buttons/pctvpressed.png"); }
}


.toggle-sound, .toggle-music {
	display: inline-block;
	position: relative;
	width: 50px;
	height: 50px;
	background-size: contain;
	input[type="checkbox"] {
		position:absolute;
		width: 100%; height: 100%;
		opacity: 0;
		cursor: pointer;
	}
}

.toggle-sound {
	background-image: url("/assets/images/buttons/nosound.png");
	&:has(input:hover) {background-image: url("/assets/images/buttons/nosoundhover.png");}
	&:has(input:checked) {background-image: url("/assets/images/buttons/sound.png");}
	&:has(input:hover:checked) {background-image: url("/assets/images/buttons/soundhover.png");}
	&:has(input:active, input:checked:active) {background-image: url("/assets/images/buttons/soundpressed.png");}
}
.toggle-music {
	background-image: url("/assets/images/buttons/nomusic.png");
	&:has(input:hover) {background-image: url("/assets/images/buttons/nomusichover.png");}
	&:has(input:checked) {background-image: url("/assets/images/buttons/music.png");}
	&:has(input:hover:checked) {background-image: url("/assets/images/buttons/musichover.png");}
	&:has(input:active, input:checked:active) {background-image: url("/assets/images/buttons/musicpressed.png");}
}