/* Font paths Hack 2.0 */
@font-face {
  font-family: 'Hack';
  src: url('fonts/eot/latin/hack-regular-latin-webfont.eot?v=2.013');
  src: url('fonts/eot/latin/hack-regular-latin-webfont.eot?#iefix&v=2.013') format('embedded-opentype'), url('fonts/woff2/latin/hack-regular-latin-webfont.woff2?v=2.013') format('woff2'), url('fonts/woff/latin/hack-regular-latin-webfont.woff?v=2.013') format('woff'), url('fonts/web-ttf/latin/hack-regular-latin-webfont.ttf?v=2.013') format('truetype'), url('fonts/svg/latin/hack-regular-latin-webfont.svg?v=2.013#hackregular') format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Hack';
  src: url('fonts/eot/latin/hack-bold-latin-webfont.eot?v=2.013');
  src: url('fonts/eot/latin/hack-bold-latin-webfont.eot?#iefix&v=2.013') format('embedded-opentype'), url('fonts/woff2/latin/hack-bold-latin-webfont.woff2?v=2.013') format('woff2'), url('fonts/woff/latin/hack-bold-latin-webfont.woff?v=2.013') format('woff'), url('fonts/web-ttf/latin/hack-bold-latin-webfont.ttf?v=2.013') format('truetype'), url('fonts/svg/latin/hack-bold-latin-webfont.svg?v=2.013#hackbold') format('svg');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Hack';
  src: url('fonts/eot/latin/hack-italic-latin-webfont.eot?v=2.013');
  src: url('fonts/eot/latin/hack-italic-latin-webfont.eot?#iefix&v=2.013') format('embedded-opentype'), url('fonts/woff2/latin/hack-italic-latin-webfont.woff2?v=2.013') format('woff2'), url('fonts/woff/latin/hack-italic-latin-webfont.woff?v=2.013') format('woff'), url('fonts/web-ttf/latin/hack-italic-latin-webfont.ttf?v=2.013') format('truetype'), url('fonts/svg/latin/hack-italic-latin-webfont.svg?v=2.013#hackitalic') format('svg');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Hack';
  src: url('fonts/eot/latin/hack-bolditalic-latin-webfont.eot?v=2.013');
  src: url('fonts/eot/latin/hack-bolditalic-latin-webfont.eot?#iefix&v=2.013') format('embedded-opentype'), url('fonts/woff2/latin/hack-bolditalic-latin-webfont.woff2?v=2.013') format('woff2'), url('fonts/woff/latin/hack-bolditalic-latin-webfont.woff?v=2.013') format('woff'), url('fonts/web-ttf/latin/hack-bolditalic-latin-webfont.ttf?v=2.013') format('truetype'), url('fonts/svg/latin/hack-bolditalic-latin-webfont.svg?v=2.013#hackbolditalic') format('svg');
  font-weight: 700;
  font-style: italic;
}

/* Used colors:
Page:
    foreground: ffffff
    background: 0f1a22
Menu:
    background: 4c9f24 = 
    foreground: 123717 = ( used in nav a:link)
    border:     aae372 = 
Content:
    background: 306983 = 
    foreground: d5e0e4 = 
    border:     68b4c6 = 
*/

html, body {
    margin: 0;
    padding: 0;
}

html {
    font-size: 12px;
    background-color: #0f1a22;
}

/* text-shadow only 7px instead 10px due to Windows Explorer */
html a:link   {color:#d5e0e4;text-decoration:underline;font-weight:normal;text-shadow: 0px 0px 7px #000000;}
html a:visited{color:#d5e0e4;text-decoration:underline;font-weight:normal;text-shadow: 0px 0px 7px #000000;;}
html a:hover  {color:#ffffff;text-decoration:underline;font-weight:normal;text-shadow: 0px 0px 7px #ffffff;;}
html a:active {color:#ffffff;text-decoration:underline;font-weight:normal;text-shadow: 0px 0px 7px #ffffff;;}

body {
    width: 62%;  /* Golden ratio with base 100% */
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
}

/* typography */

h1, h2, h3, h4 {
    font-family: 'Hack';
    color: #d5e0e4;
}

p, input, li {
    font-family: 'Hack';
    color: #d5e0e4;
}

h1 {
    font-size: 4rem;
    text-align: center;
    color: #ffffff;
    text-shadow: 0px 0px 5px #ffffff;
}

h2 {
    font-size: 3rem;
    text-align: center;
}

h3 {
    font-size: 2.2rem;
}

h4 {
    font-size: 1.6rem;
}

p, li {
    font-size: 1.6rem;
    line-height: 1.5;
}

/* header layout */

nav, aside, footer {
    padding: 1%;
}

nav {
    height: 60px;
    display: flex;
    margin-bottom: 37px;  /* Golden ratio with base 60px */
    border:3px solid #aae372;
    border-radius: 25px;
    background: #4c9f24;
    box-shadow: 0px 0px 17px 6px #4c9f24;  /* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
}

nav ul {
    padding: 0;
    list-style-type: none;
    flex: 2;
    display: flex;
}

nav li {
    display: inline;
    text-align: center;
    flex: 1;
}

nav a {
    display: inline-block;
    font-size: 2rem;
    /* text-transform: uppercase; */
    text-decoration: none;
    color: #d5e0e4;
}

/* text-shadow only 7px instead 10px due to Windows Explorer */
nav a:link   {color:#123717;text-decoration:underline;font-weight:normal;text-shadow: 0px 0px 7px #123717;}
nav a:visited{color:#123717;text-decoration:underline;font-weight:normal;text-shadow: 0px 0px 7px #123717;}
nav a:hover  {color:#aae372;text-decoration:underline;font-weight:normal;text-shadow: 0px 0px 7px #aae372;}
nav a:active {color:#aae372;text-decoration:underline;font-weight:normal;text-shadow: 0px 0px 7px #aae372;}

/* main layout */

main {
    display: flex;
}

article {
    flex: 4;
    border:3px solid #68b4c6;
    border-radius: 50px;
	color: #d5e0e4;
	background: #306983;
    padding: 5%;
    padding-bottom: 100px;
    box-shadow: 0px 0px 17px 8px #306983;  /* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
    text-shadow: 0px 0px 1px #d5e0e4;
}

footer {
    margin-top: 0px;
    text-align: center;
}

/* image */

img {
    width: 100%;
    height: auto;
}

/* video */

.video_wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
}

.video_wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

iframe {
    width: 100%;     /* important */
    height: auto;    /* important */
    display: block;  /* makes a full block element from left to right side */
    margin: 0 auto;  /* auto margin will center the video in the block*/
}

#centered {
    text-align: center;
}

#spaced {
    margin-bottom: 60px;
}