:root {
	--theme: #009990;
	--bg: #000;
	--text: #fafafa;
}

html {
	font-size: 16px;
	line-height: 1.5;
	background: var(--bg);
	color: var(--text);
}

body {
	display: flex;
	min-height: 100vh;
	margin: 0;
}

.RevealButton {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	z-index: 1;
	font-size: 3rem;
}

form {
	position: fixed;
	bottom: 1rem;
	right: 0;
	max-width: 15em;
	z-index: 1;
}

a {
	color: var(--theme);
}

img {
	max-width: 100%;
}

figure {
	display: flex;
	position: relative;
	overflow: hidden;
	margin: 0;
}

figure img {
	width: 100vw;
	height: 100vh;
	margin: auto;
	object-fit: contain;
}

.Hexagons {
	display: flex;
	--s: 100px;
	/* size  */
	--m: 1px;
	/* margin */
	--f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*background: hsl(0deg 100% 50% / 57%);*/
}

.Hexagons-inner {
	font-size: 0;
	/*disable white space between inline block element */
}

.Hexagons-inner div {
	width: var(--s);
	margin: var(--m);
	height: calc(var(--s)*1.1547);
	display: inline-block;
	font-size: initial;
	clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
	background: #099990;
	margin-bottom: calc(var(--m) - var(--s)*0.2885);
	transition: opacity 1000ms;
}

.Hexagons-inner div:nth-child(odd) {
	background: #00b2c2;
}

.Hexagons-inner::before {
	content: "";
	width: calc(var(--s)/2 + var(--m));
	float: left;
	height: 120%;
	shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),
			#000 0 var(--f));
}

.Hexagons-inner div[hidden] {
	opacity: 0;
}