:root {
	
	--soleil2: #fdff51;
	--soleil3: #d77f0d;
	--soleil4: #b93805;
}

body {

	background-color: #d45a00;
	background-image: 
		
		linear-gradient(#7d492d 0%, #7d492d 8rem, 
		               #c63300 8rem, #c63300 10rem, 
		               #d14907 10rem, hsl(25, 100%, 41.6%) calc(100% - 20rem), 
		               black calc(100% - 5rem), black 100%);
	
	color: #eee;
}

body main > h1, 
body main > h2 {
	
	text-shadow: 0 0 0.25em #333;
}

body > header {

	background-image: 
		radial-gradient(circle closest-side, 
		                #ffffff 0%, #ffffff 25%, 
		                #fdff51 25%, #d77a0d 32%, 
		                #b63908 50%, transparent 100%), 
		                
		radial-gradient(ellipse farthest-side, 
		                #c63300 0px, #c63300 50%, 
		                #c63300 50%, transparent 100%)
	;
	
}


body > header a, 
body > header a:visited {
	
	color: black;
}

@media screen and (max-width: 35.374rem) {

	body > header nav {
		
		text-align: left;
	}
	
	body > header nav ul li {
	
		margin-left: 1rem;
	}
	
	body > header nav a, 
	body > header nav a:visited {
		
		color: white;
	}
}

@media screen and (min-width: 35.375rem) {

	body > header nav {
		
		position: relative;
		z-index: 10000;
	}

	body > header nav a {
		
		background-color: hsl(25, 100%, 41.6%, 1);
		box-shadow: 0 0 2rem hsl(25, 100%, 41.6%);
		z-index: 10000;
		font-weight: bold;
		border-bottom: 0.5rem solid black;
		padding: 0.25rem 1rem;
		transition-duration: 0.666s;
		transition-property: color, background-color, border-bottom-color;
	}
	
	body > header nav a:hover {
		
		border-bottom-color: white;
		color: white;
		background-color: #c63300;
	}
}


body header:before,
body header:after, 
body header > :first-child:before {
	
	content: ".";
	color: transparent;
	position: absolute;
	display: block;
	overflow: visible;
}


body header:before {
	
	z-index: 48;
	
	left: 50vw;
	width: 12.5rem;
	margin-left: -6.25rem;
	
	top: 10rem;
	margin-top: -6.25rem;
	height: 12.5rem;
	
	background: var(--soleil3);
	box-shadow: 0 -25px 50px var(--soleil4);
}


body header:after {
	
	z-index: 49;
	
	left: 50vw;
	width: 9rem;
	margin-left: -4.5rem;
	
	top: 10rem;
	margin-top: -4.5rem;
	height: 9rem;
	
	background: var(--soleil2);
}


body header > :first-child:before {
	
	z-index: 50;
	
	left: 50vw;
	width: 6.25rem;
	margin-left: -3.125rem;
	
	top: 10rem;
	margin-top: -3.125rem;
	height: 6.25rem;
	
	background: white;
}

body header > :first-child * {
	
	position: relative;
	z-index: 100;
}

footer {

	color: white;
}

footer a, footer a:visited {
	
	border-bottom: 0.067rem dotted;
	text-decoration: none;
	color: inherit;
	font-weight: bold;
}