.aquarium {
  --width: calc(5% + 2px);
  width: 400px;
  height: 300px;
	position: absolute;
}

.aquarium .front, .aquarium .back, .aquarium .carousel .overlay, .aquarium .carousel .glow {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background-size: 100% 100%;
}
.aquarium .back { background-image: url('images/aquarium/back.png'); }
.aquarium .front { background-image: url('images/aquarium/front.png'); }

.aquarium .carousel {
	position: relative;
	left: 5%; top: 11%;
	width: 360px;
  height: 200px;
}
.aquarium .carousel .overlay {
	opacity: .7;
	background: linear-gradient(90deg, white 0%, rgba(0,0,0,0) 4%, rgba(0,0,0,0) 96%, white 100%),
							linear-gradient(0deg, #1b1c1d 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 90%, #1b1c1d 100%);
}
.aquarium .carousel .glow {
	opacity: .2;
	scale: .6;
	border-radius: 50%;
	background: aquamarine;
	filter: blur(60px);
	mix-blend-mode: plus-lighter;
}
.aquarium.off .carousel .glow { opacity: 0; }

.aquarium .layer {
  width: 100%;
	height: 100%;
  position: absolute;
	left: 0; top: 0;
}

.aquarium .section {
  position: absolute;
  width: var(--width); height: 100%;
  left: 0; top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aquarium 15s infinite linear;
	background-size: auto 100%;
}
.aquarium .layer:nth-of-type(1) { scale: .95 1; }
.aquarium .layer:nth-of-type(1) .section {
	animation-duration: 20s;
	background-image:url('images/aquarium/background.png');
}
.aquarium .layer:nth-of-type(2) .section {
	animation-duration: 15s;
	background-image:url('images/aquarium/fish.png');
	filter: drop-shadow(3px,3px,5px,black);
}

@keyframes aquarium {
  0% { left: calc(var(--width) / -2); scale: 0 1; }
	5% { left: 0%; scale: 1 1; }
	95% { left: calc(100% - var(--width)); scale: 1 1; }
  100% { left: calc(100% - (var(--width) / 2)); scale: 0 1; }
}

.aquarium.off .section {
  animation-play-state: paused;
}

.aquarium .switch {
	position: absolute;
	height: 9%;
	left: 75%;
	bottom: 8%;
}
.aquarium .switch img { position: relative; max-height: 100%; filter: none; }