.flag {
	position: relative;
	width: 100%;
	height: 100%;
}
.flag-wrapper {
	width: 100%;
	height: 50%;
}

/* Make flag a checkbox */
.flag-wrapper input[type=checkbox] {
	position: absolute;
	bottom: 5em;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	cursor: pointer;
	opacity: 0;
}
/* Panels are closed */
.flag-wrapper input[type=checkbox]:checked ~ div.top {transform: translateY(0);}
.flag-wrapper input[type=checkbox]:checked ~ div.bottom {transform: translateY(0);}

/* Hide/show other elements */
.flag-wrapper input[type=checkbox]:checked ~ div.ukraine {opacity: 1;}
.flag-wrapper input[type=checkbox]:checked ~ div.info {opacity: 0; z-index: -10;}
.flag-wrapper input[type=checkbox]:checked ~ div.close {display: none;}

/* Both flag panels */
.flag-panel {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	height: 100%;
	transition: all 1s ease-out;
	z-index: 2;
}
.ukraine {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	font-size: 10vmin;
	color: #fff;
	mix-blend-mode: difference;
	transition: opacity 1.0s ease-in-out;
}
/* Help button */
.help {
	position: absolute;
	bottom: 20%;
	left: 50%;
	transform: translateX(-50%);
	font-size: min(100%, 3vmin);
	text-align: center;
	color: rgba(0, 87, 183, 1);
	padding: 0.5em 2em;
	border: 2px solid rgba(0, 87, 183, 1);
	border-radius: 10px;
	z-index: 2;
}
/* Slide blue up */
.top {
	background-color: rgba(0, 87, 183, 1);
	transform: translateY(-150%);
}
/* Slide yellow down */
.bottom {
	background-color: rgba(255, 215, 0, 1);
	transform: translateY(150%);
}

/* Behind the flag */
.info {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	padding: 1em;
	background: rgba(255, 215, 0, 1);
	border: 2px solid rgba(0, 87, 183, 1);
	border-radius: 20px;
	color: #fff;
	text-align: center;
	opacity: 1;
	z-index: 110;
	transition: all 0.8s;
}
.info p {
	margin-bottom: 1.0rem;
	font-size: min(100%, 5vmin);
}
.info p a {
	font-size: min(100%, 5vmin);
	text-decoration:none;
}
.info p a:hover {
	font-size: min(100%, 7vmin);
	color: #fff;
	font-weight:500;
	text-shadow: 1px 1px #000;
}

.info h1 {
/*	margin-bottom: 1.0rem;
*/	font-size: min(120%, 7vmin);
	color: #8c113c;
}
.info h1 a {
	font-size: min(120%, 7vmin);
	color: #8c113c;
	text-decoration:none;
}
.info h1 a:hover {
	font-size: min(120%, 7vmin);
	color: #fff;
	font-weight:500;
	text-shadow: 1px 1px #000;
}







* {margin: 0; padding: 0;}

body {width: 100vw; height: 100vh; font-family: "Arial Black", sans-serif; overflow: hidden;}