@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@1,900&display=swap');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Cutive Mono', monospace;
}
body{
	background-color: white;
	transition: background-color .2s linear;
}
.white{
	background-color: white;
}
.lightgrey{
	background-color: lightgrey;
}
.dimgrey{
	background-color: dimgrey;
}
.black{
	background-color: black;
}
.main-container{
	width: 100vw;
	min-height: 93vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	overflow: auto;
	margin-bottom: 48px;
}
nav{
	padding: 1.5em 3em;
}
nav > h1{
	text-align: center;
}
nav > h1 > span{
	font-size: .5em;
}
main{
	padding: 0;
	margin: 0;
	width: 100%;
	flex: 1;
	display: inherit;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.image-grid{
	max-width: 80%;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr));
	justify-items: center;
	gap: 30px;
	margin: auto;
}
.image-grid floating-img{
	width: 100%;
}
floating-img::before{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	padding: 50% 1em 0 1em;
	right: -100%;
	content: attr(data-caption);
	font-family: 'Work Sans', sans-serif;
	font-size: 4em;
	text-shadow: 0 0 10px #333;
	text-align: center;
	text-transform: lowercase;
	color: #fff;
	transition: all linear .1s;
	opacity: 0;
	backdrop-filter: blur(15px) brightness(.8);
	-webkit-backdrop-filter: blur(15px) brightness(.8);
	pointer-events: none;
}
floating-img:hover::before{
	right: 0;
	opacity: 1;
}
floating-img{
	opacity: 0;
	transition: opacity 1s linear;
	--aspect-ratio: 4/6;
}
floating-img[loaded]{
	opacity: 1;
}
footer{
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
footer *{
	box-sizing: border-box;
	color: black;
	display: flex;
	align-items: flex-end;
	margin: 0 .25em;
	text-decoration: none;
}

input[type=range]{
	display: none;
}
p.lg-only{
	text-align: center;
	font-style: italic;
	color: #c5c5c5;
	padding: 1em 0;
	animation: fade-out linear 8s;
	animation-iteration-count: 1;
	opacity: 0;
}

@keyframes fade-out{
	0% { opacity: 1 }
	85% { opacity: 1 }
	100% { opacity: 0 }
}
/* https://getbootstrap.com/docs/5.0/layout/breakpoints/ */
@media (max-width: 1115px){
	.image-grid{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.image-grid > floating-img{
		width: 75vw;
		margin: 3em 0;
	}
	floating-img[selected]::before{
		right: 0;
		opacity: 1;
		padding: 1em 0;
	}
	floating-img:not([selected])::before{
		right: -100vw;
		opacity: 0;
	}
	input[type=range]{
		display: block;
		position: fixed;
		top: 25vh;
		right: 0;
		width: 50vh;
		transform: rotate(-90deg);
		transform-origin: 95%;
		z-index: 1;
		opacity: .5;
		outline: none;
		-webkit-appearance: none;
		background: #e3e3e3;
		z-index: 999;
		transition: background-color linear .2s;
	}
	input[type=range][value=0]::-webkit-slider-thumb{
		--range-handle: #000;
	}
	input[type=range][value=1]::-webkit-slider-thumb{
		--range-handle: lightgrey;
	}
	input[type=range][value=2]::-webkit-slider-thumb{
		--range-handle: dimgrey;
	}
	input[type=range][value=3]::-webkit-slider-thumb{
		--range-handle: darkgrey;
	}
	input[type=range][value]::-webkit-slider-thumb{
		-webkit-appearance: none;
		appearance: none;
		width: 25px;
		height: 25px;
		background: var(--range-handle, rgba(0,0,0,.25));
		cursor: pointer;
	}
	input[type=range]::before{
		content: "\263C\00a0";
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.5em;
		display: flex;
		align-items: center;
	}
	.white input[type=range]::before,
	.white input[type=range]::after{
		background-color: white;
	}
	.lightgrey input[type=range]::before,
	.lightgrey input[type=range]::after{
		background-color: lightgrey;
	}
	.dimgrey input[type=range]::before,
	.dimgrey input[type=range]::after{
		background-color: dimgrey;
	}
	.black input[type=range]::before,
	.black input[type=range]::after{
		background-color: black;
		color: lightgrey;
	}
	.lg-only{
		display: none;
	}
	footer{
		margin: 1em;
	}
}