/**********************************************************
*	Global Variables
***********************************************************/
:root{
	/* Main Primary color */
	--color-primary-0: #192F8B;
	--color-primary-1: #4D60AD;
	--color-primary-2: #3046A1;
	--color-primary-3: #0D2172;
	--color-primary-4: #071656;

	/* Main Secondary color (1) */
	--color-secondary-1-0: #CCB20D;
	--color-secondary-1-1: #FEE85E;
	--color-secondary-1-2: #EDD230;
	--color-secondary-1-3: #A79000;
	--color-secondary-1-4: #7E6D00;
	
	/* Main Secondary color (2) */
	--color-secondary-2-0: #CC6E0D;
	--color-secondary-2-1: #FEAF5E;
	--color-secondary-2-2: #ED8F30;
	--color-secondary-2-3: #A75400;
	--color-secondary-2-4: #7E4000;
	/* Main Complement color */
	--color-complement-0: #CC930D;
	--color-complement-1: #FECE5E;
	--color-complement-2: #EDB430;
	--color-complement-3: #A77500;
	--color-complement-4: #7E5800;
	--bgcolor:	#FBFBFB;
	--text-color: #282828;

	--bg-pattern-color-1: #FBFBFB;
	--bg-pattern-color-2: #F1F1F1;

}

* {
	box-sizing: border-box;
}

html {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: var(--text-color);
	background-color: var(--bgcolor);
	height: 100%;

	background: 
      linear-gradient(135deg,#0000 20.5%,var(--bg-pattern-color-1) 0 29.5%,#0000 0) 0 8.5px,
      linear-gradient( 45deg,#0000 8%,var(--bg-pattern-color-1) 0 17%, #0000 0 58%) 17px 0,
      linear-gradient(135deg,#0000 8%,var(--bg-pattern-color-1) 0 17%, #0000 0 58%,var(--bg-pattern-color-1) 0 67%,#0000 0),        
      linear-gradient( 45deg,#0000 8%,var(--bg-pattern-color-1) 0 17%, #0000 0 58%,var(--bg-pattern-color-1) 0 67%,#0000 0 83%,var(--bg-pattern-color-1) 0 92%,#0000 0),
      var(--bg-pattern-color-2);
	background-size: 34px 34px;

}

body {
	display: flex;
  	flex-direction: column;
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	background-color: rgba(255,255,255, 0.7);
	padding: 2rem;
	min-height: 100%;
	text-align: justify;
}

a:link, a:active, a:visited {
	color: var(--color-primary-0);
	border: none;
	text-decoration: none;
}
a:hover {
	color: var(--color-secondary-2-0);
}



/**********************************************************
*	Header
***********************************************************/
header {
	position: relative;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-primary-1);
	margin-bottom: 2rem;
}
#header_logo{
	max-height:	120px;
	display: inline-block;
}
header h1 {
	display: inline-block;
	padding: 0;
	margin: 0 2rem;
	vertical-align: middle;
	height: 100%
}

/**********************************************************
*	Main
***********************************************************/

main {
	flex: 1;
}

.label {
	display: inline-block;
	width:   150px;
}

.value{
	display: inline-block;
}

/**********************************************************
*	Footer
***********************************************************/

footer {
 flex: 0;
 border-top: 1px solid var(--color-primary-1);
 padding-top: 1rem;
}

footer nav {
	display: inline-block;
}

footer nav ul {
	margin: 0;
	padding: 0;
	display: inline-block;
}

footer nav ul li {
	list-style-type: none;
	display: inline-block;
	padding-left: 20px;
}

@media only screen and (max-width: 999px) {
	header, header h1 {
		text-align: center;
		width: 100%;
		margin: 0;
	}
} 

@media only screen and (max-width: 360px) {
	header h1 {
		font-size: 1.4rem;
	}
}