:focus-visible { outline: 2px var(--l-green) solid; box-shadow: 0 0 0 4px var(--d-green); }

.invisible { visibility: hidden; }

body {
	background: #009059;
	background-image: url('/graphix/bg/ac_spring_2x.png');
	margin: 0px;
	height: 100vh;
	font-family: 'Seconda Round', sans-serif;
	
	display: flex;
	flex-direction: column;
}

main {
	position: relative;
	flex-grow: 1;
	width: 100%;
	overflow: scroll;
	
	display: flex;
	
	@media screen and (width > 575px) {
		#left, #right {
			width: min(175px,15%);
			background-image: url('/graphix/bg/orange_wall.png');
			background-size: auto 45%;
		}
		#center {
			box-shadow: inset 0px 0px 10px #008052;
		}
	}
	#center {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center; align-items: center;
		padding-bottom: 3rem;
		
		> .container {
			width: fit-content;
			height: fit-content;
			
			> header {
				text-align: center;
			}
		}
	}
}

#amiibo {
	width: min(276px,80vw);
	height: auto;
	aspect-ratio: 7.11/10;
	position: relative;
	
  perspective: 1000px; /* 3D effect for flip */
	
	color: #970000;
	
	/* round all needed corners */
	> .container, .front, .front > img, .back { border-radius: 2%; }
	
	&:hover, &:focus-visible { > .container, .front, .back { box-shadow: 0px 0px 8px 6px #fff; } }
	
	img { pointer-events: none; } /* images not draggable */
	
	ul {
		margin-top: 0px;
		padding: 0px;
		flex-grow: 1;
		li { list-style-position: inside; }
	}
		
	/* inner container for flip card effect */
	> .container {
		position: relative;
		height: 100%; width: 100%;
		transition: transform 0.8s;
		transform-style: preserve-3d;
		/* no flip animation for accessibility */
		@media (prefers-reduced-motion: reduce) { transition: transform 0s; }
		
		/* version that is flipped to back side */
		&.flipBack { transform: rotateY(180deg); }
	}
	
	.front {
		> img { width: 100%; }
	}
	
	.back {
		width: 100%;
		height: 100%;
		background: #fabe00;
		border: 10px #ee7800 solid;
		box-sizing: border-box;
		transform: rotateY(180deg); /* compensate for animation flip */
		
		> section {
			width: 100%;
			padding: 5%; padding-top: 0px;
			> .top {
				display: flex;
				gap: 5%;
			}
		}
		
		div.portrait {
			width: 45%;
			img {
				width: 100%;
				height: auto;
			}
		}
		
		> header {
			background: #fff;
		}
		h2 {
			margin-top: 0px;
			padding: .25em;
			color: #ee7500;
			img {
				width: 1.2em;
				margin-bottom: -.2em;
			}
		}
	}
	
	.front, .back {
		position: absolute;
		width: 100%;
		height: 100%;
		/* hide whichever is in the back */
		-webkit-backface-visibility: hidden; backface-visibility: hidden;
	}
}

#leggy-run {
	position: absolute;
	right: 13%;
	bottom: 10px;
	max-width: 30%;
}

.wrapper:has(#ACNLclock) {
	position: fixed;
	left: min(50px,3vw);
	bottom: 0;
	background: #60af16;
	border: 10px #60af16 solid;
	border-radius: 42%;
}
#ACNLclock {
	--clock-width: min(200px,30vw) !important;
	position: relative;
	bottom: calc(.07 * var(--clock-width));
	> * { z-index: 2; }
	img { filter: drop-shadow(3px 3px 2px #028953); z-index: 1; }
}

nav {
	background: #60af16;
	padding: 15px;
	display: flex;
	justify-content: center;
	@media screen and (width < 675px) { padding-left: 36vw; }
	@media screen and (width < 350px) { padding-right: 0px; }
	gap: 15px;
	
	a, a:link, a:visited {
		background: #fabe00;
		color: #de3800;
		font-weight: bold;
		padding: .25em .5em;
		border-radius: .2em;
		font-size: 1.25rem;
	}
	a:hover, a:focus-visible {
		background: #de3800;
		color: #fff;
	}
}