body {
	margin: 0;

	font-family: Arial, Helvetica, sans-serif;

	background-attachment: fixed;
	background-image:
		radial-gradient(ellipse 110% 50% at 50% -10%, #023e8a66 0%, #023e8a4d 42%, #0077b633 60%, #0096c71a 84%, transparent 100%),
		linear-gradient(175deg, #023e8a 0%, #0077b6 10%, #0096c7 25%, #00b4d8 40%, #48cae4 65%, #90e0ef 85%, #a0e4f2 95%, #caf0f8 100%)
	;
}

/*
.
.
.
*/
.container {
	position: sticky;
	top: 0;
}

.content {
	position: relative;
	z-index: 1;

	min-height: 100vh;

	overflow: hidden;

	background-color: white;
}

section:not(:first-child) header {
	position: relative;
	top: -100vh;
}

section:not(:first-child) .container {
	top: 100vh;
	height: 0;
}

section:not(:first-child) .content {
	margin-top: 100vh;
}

header {
	position: sticky;
	top: 0;

	height: 100vh;

	background-size: cover;
	background-position: center;
	background-color: #00b4d8;

	display: flex;
  	justify-content: center;
	align-items: stretch;
	flex-direction: column;

	text-align: center;
}


#minecraft header  {
	background-image: url(/images/minecraft.png);
}
#minecraft .content{
	background-color: green;
}

#cats header{
	background-image: url(/images/cats.jpg);
}
#cats .content  {
	background-color: purple;
}

#fish header{
	background-image: url(/images/fish.jpg);
}
#fish .content  {
	background-color: #0096c7;
}

/*
.
.
.
*/

.rainbow {
	color: red;
	animation: rainbow 7s linear infinite;
}

.rainbow::selection {
  animation: rainbow 7s linear infinite;
  background: #8888;
}

@keyframes rainbow {
	0% {color: red;}
	12.5% {color: orange;}
	25% {color: yellow;}
	37.5% {color: lime;}
	50% {color: turquoise;}
	62.5% {color: blue;}
	75% {color: purple;}
	87.5% {color: Fuchsia;}
	100% {color: red;}
}