html {
	padding: 0;
}

body {
	padding: 0;
	margin: 0;
}

#night {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50vw;
	background: #000;
	color: #fff;
}

#day {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50vw;
	background: #fff;
	color: #000;
}

#night > iframe,
#day > iframe {
	display: block;
	margin: 80px;
	width: calc(100% - 160px);
	height: calc(100% - 160px);
}

#divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 45vw;
	width: 10vw;
	background: linear-gradient(to top, #c44448, #f0e848, #30845c, #2874c4);
	z-index: 2;
}

#divider::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(10vw - 8px);
	background: linear-gradient(to bottom right, #000 50%, transparent 50%);
}

#divider::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: calc(10vw - 8px);
	background: linear-gradient(to top left, #fff 50%, transparent 50%);
}

@media (max-width: 800px) {
	#day, #night {
		position: static;
		width: 100%;
	}

	#day > iframe,
	#night > iframe {
		max-width: 640px;
		width: 100%;
		height: 960px;
		margin: 24px auto;
	}

	#divider {
		position: static;
		width: 100%;
		height: 8px;
		background: linear-gradient(to right, #c44448, #f0e848, #30845c, #2874c4);
	}

	#divider::before,
	#divider::after {
		display: none;
	}
}

@media (max-width: 600px) {
	#day > iframe,
	#night > iframe {
		margin: 0;
	}
}