:root {
	--bg1: #606c88;
	--bg2: #3f4c6b;
	--blue: #2ea3f2;
	--grey: #e9eef1;
	--marge: 50px;
}

body {
	margin: 0;
	padding: 0;
	width: 100dvw;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: radial-gradient(circle at 1.98% 52.00%, var(--bg1), transparent 100%), radial-gradient(circle at 98.02% 48.97%, var(--bg2), transparent 100%), radial-gradient(circle at 50% 50%, #000000, #000000 100%);
	position: relative;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

main {
	width: calc(100% - var(--marge));
	height: calc(100% - var(--marge));
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	overflow: hidden;
}

.instructions {
	--padding: 10px;
	position: absolute;
	bottom: 10px;
	left: 0px;
	color: var(--grey);
	display: flex;
	align-items: center;
	text-align: center;
	width: calc(100% - 2*var(--padding));
	padding: 0 var(--padding);
	height: 30px;
	display: none;
}

.download_link {
	position: absolute;
	top: 10px;
	right: 10px;
	color: var(--grey);
	display: flex;
	align-items: center;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding: 2px 5px;
	background-color: var(--blue);
	border-radius: 6px;
}

.download_link:hover {
	border-bottom: 1px solid var(--grey);
}

.download_link span {
	margin: 5px;
}

.download_link svg {
	width: 30px;
	height: 30px;
}

#img-zoomer-box {
	position: relative;
	background-color: var(--grey);
	border-radius: 8px;
	border: 8px solid transparent;
}

#img-1 {
	max-width: calc(100vw - var(--marge) - 16px);
	max-height: calc(100vh - var(--marge) - 16px);
	width: auto;
	height: auto;
	display: block;
}

#img-zoomer-box:hover,
#img-zoomer-box:active {
	display: block;
}

#img-zoomer-box:hover #img-2,
#img-zoomer-box:active #img-2 {
	opacity: 1;
}

#img-2 {
	width: 340px;
	height: 340px;
	background-repeat: no-repeat;
	background-color: var(--grey);
	background-size: 200%;
	box-shadow: 0 0px 10px -2px rgba(0, 0, 0, 0.3);
	pointer-events: none;
	position: absolute;
	opacity: 0;
	border: 4px solid var(--grey);
	z-index: 99;
	border-radius: 100%;
	display: block;
	transition: opacity .2s;
}

@media only screen and (min-width: 940px) {
	:root {
		--marge: 100px;
	}

	.instructions{
		display: block;
	}
}