body {
    font-family : serif;
    margin : 0px;
    padding : 0px;
    display : table;
    position : absolute;
    height : 100%;
    width : 100%;
    overflow : hidden;
}

@media (prefers-color-scheme: dark) {
    body .clouds-bg .cloud {
        filter: hue-rotate(145deg) saturate(7);
    }
}

@keyframes clouds-move {
	0% 		{ background-position : 0px 0px; }
	100%		{ background-position : -990px 0px; }
}

@keyframes rainbow {
	0%, 100% {
		color: #ff0000;
		color: hsl(0, 100%, 50%);
	}

	8.333% {
		color: #ff8000;
		color: hsl(30, 100%, 50%);
	}

	16.667% {
		color: #ffff00;
		color: hsl(60, 100%, 50%);
	}

	25% {
		color: #80ff00;
		color: hsl(90, 100%, 50%);
	}

	33.333% {
		color: #00ff00;
		color: hsl(120, 100%, 50%);
	}

	41.667% {
		color: #00ff80;
		color: hsl(150, 100%, 50%);
	}

	50% {
		color: #00ffff;
		color: hsl(180, 100%, 50%);
	}

	58.333% {
		color: #0080ff;
		color: hsl(210, 100%, 50%);
	}

	66.667% {
		color: #0000ff;
		color: hsl(240, 100%, 50%);
	}

	75% {
		color: #8000ff;
		color: hsl(270, 100%, 50%);
	}

	83.333% {
		color: #ff00ff;
		color: hsl(300, 100%, 50%);
	}

	91.667% {
		color: #ff0080;
		color: hsl(330, 100%, 50%);
	}
}

.clouds-bg, .clouds-bg > .cloud {
	position : absolute;
	height : 100%;
	width : 100%;
	z-index : -1;
}

.clouds-bg .cloud:nth-child(1) {
	background : linear-gradient(180deg, #89B1F0, #8AB1F0 200px, #fff 500px, #fff);
	background-repeat : repeat-x;
	z-index : -4;
}

.clouds-bg .cloud:nth-child(2) {
	background : url("/img/clouds2.png");
	background-repeat : repeat-x;
	animation : clouds-move 30s linear infinite;
	z-index : -3;
}

.clouds-bg .cloud:nth-child(3) {
	background : url("/img/clouds3.png");
	background-repeat : repeat-x;
	animation : clouds-move 20s linear infinite;
	z-index : -2;
}

.clouds-bg .cloud:nth-child(4) {
	background : url("/img/clouds4.png");
	background-repeat : repeat-x;
	animation : clouds-move 10s linear infinite;
	z-index : -1;
}