html 
{ 
  --background: url( "rainforest.jpg" ) no-repeat center center fixed; 
  --background: url( "incendio-compressed.jpg" ) no-repeat center center fixed; 
  --background: url( "initiating-new-life.png" ) no-repeat center center fixed; 
  background: url( "initiating-new-life-tinified.png" ) no-repeat center center fixed; 
   
  background-size: cover;
}

html
{
	--color-red: rgb(181,64,57); /* fire red #1d2f3d */ 
	--color-darkgreen: rgb(29,47,61); /* dark green #1d2f3d */ 
	--color-milgreen: rgb(78,91,49); /* Military Green #4E5B31 -- Complement Purple: #3F325C -- rgb(63, 50, 92) */ 
	--color-orange: rgb(255,144,49); /* orange #ff9031 */ 
	--color-blue: rgb(49,123,230); /* royal blue #317be6 */
	--color-olive: #808000;   
	--color-lite-green-badge: rgb( 81,132,88 ); 
	--color-dark-green-badge: rgb( 22,80,31 ); 
	 
}

body 
{
	margin:0;
	padding:0;
	
	font-family: 'Ubuntu', sans-serif;
	letter-spacing: 2px;
	 
}

header
{ 
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	
	display: block;
	padding: 3rem;
	
	
	background: transparent;
	--background: white;
  --opacity: 85%;	
	color: black;
	text-align: center;
	 
}

header logo
{
	display: block;
	position: absolute;
	left: 5%;
	top: 0;
	width: 250px;
	height: 250px;
	background: transparent;
	  
	/* 1024x1024 */
	
	background-image: url( "mil-logo-256px.png" );  
	background-size: cover; 
	background-position: center; 
	 
}
  

main
{ 
  position: absolute;
	top: 5rem;
  display: block;
	background: transparent;
	padding: 3rem;
	color: white;
	text-align: center;
	 
}

main h1
{ 
	font-size: 3rem;  
	text-shadow: black 0.1em 0.1em 0.2em;
	margin: 1rem auto 3rem auto;
}

main p
{ 
	font-size: 2rem;
	font-style: italic;
	text-shadow: black 0.1em 0.1em 0.2em;
	margin: 1rem auto 2rem auto;
	width: 60%;
}

main a.button 
{
	position: relative;
	opacity: 1;
	display: initial; /* or block */
	padding: 20px 30px;
	margin: 0 0 0 0; 
	
	--background: #307be6;  /* royal blue */
	
	background-color: var( --color-lite-green-badge );
	color: #fff;
	border: 0;
	border-radius: 3rem;
	cursor: pointer;
	
	 
	font-weight: bold;
	line-height: 1.125;
	
	text-align: center;
	font-size: 1.5rem;  
	text-decoration: none;
	--text-shadow: black 0.1em 0.1em 0.2em;
	box-shadow: black 0.1em 0.1em 0.2em;
	
	letter-spacing: 2px;
	transition: all .1s ease-in;
}
 
main a.button:hover,
main a.button:active,
main a.button:focus 
{
  --box-shadow: 0 0 2rem gold;
  --background: var( --color-red );
	box-shadow: 0 0 2rem var( --color-red );
  background-color: var( --color-dark-green-badge );
	letter-spacing: 3px; 
}

footer
{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	 
	--xbackground: lime;
	--xbackground: black;
  --xopacity: 35%;		
	background-color: rgba(0,0,0,0.65);
  color: white;
	text-align: center;
}


@media (orientation: portrait) 
{
	header logo
	{
	   width: 300px;
	   height: 375px;
	}
	
  main
	{
    top: 20rem; 
  }
	
	main h1
	{ 
		font-size: 5rem;  
		 
	}

	main p
	{ 
		font-size: 3rem;
		 
	}

  main a.button
	{
		display: block;
    font-size: 2.5rem; 
		padding: 40px 60px;
		margin: 1rem auto;
		width: 33%;
  }
	
	footer
	{
		font-size: 2rem; 
	}	
}