html{
	--black:rgb(0,0,100);
	--neutral:rgb(137,105,91);
	--whitehalf:rgba(253,237,211,0.5);
	--white:rgb(253,237,211);
	--smoke:rgba(100,255,255,0.1);
	--one:1em;
	--two:2em;
	--four:8em;
}

html{
	color:var(--black);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	box-sizing: border-box;
	background-image: linear-gradient(90deg, var(--whitehalf), var(--white)),	linear-gradient(0deg,var(--whitehalf), var(--white));
	background-size: 20px 20px, 20px 20px;

	padding: var(--one);
}

::selection{
	background:var(--black);
	color:var(--white)
}

a{
	font-weight: bold;
	color:var(--black);
}
a:visited{
	color:var(--black);
	text-decoration-color: var(--white);
}
a:hover,
a:focus{
	background-color: var(--white);
	outline:none 
}

section{
	background-color: var(--smoke);
	padding: var(--one);
	margin: var(--one);
}

section:nth-of-type(2){
	filter: hue-rotate(-72deg)
}
section:nth-of-type(3){
	filter: hue-rotate(-144deg)
}
section:nth-of-type(4){
	filter: hue-rotate(-216deg)
}
section:nth-of-type(5){
	filter: hue-rotate(-288deg)
}

nav a{
	padding:var(--one)
}

copyright {
	font-size: 50%;
	position: absolute;
	margin-top: var(--two)
}