@font-face {
  font-family: "FontEredesLight";
  font-style: light;
  src: url("../fonts/Montserrat-Light.ttf") format("truetype"),
    url("../fonts/Montserrat-Light.woff2") format("woff2"),
    url("../fonts/Montserrat-Light.woff") format("woff");
}
@font-face {
  font-family: "FontEredesBold";
  font-style: bold;
  src: url("../fonts/Montserrat-Bold.ttf") format("truetype"),
    url("../fonts/Montserrat-Bold.woff2") format("woff2"),
    url("../fonts/Montserrat-Bold.woff") format("woff");
}

* { box-sizing: border-box; }

body { width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; background-color: white; display: flex; flex-wrap: wrap; flex-direction: column;}

header { width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; height: 72px; }
header a { min-height: 100%; display: flex; align-items: center; color: #989797; cursor: pointer; text-decoration: none; }
header a:hover { text-decoration: underline; }
header .menu-logo {  background-color: #ffdc00; width: 128px; justify-content: center; }
header .menu-logo img { height: 24px; }
header .link-external { padding: 0 30px; font-family: 'FontEredesBold'; font-size: 14px; line-height: 20px; }
header .link-external img { color: #989797; width: 16px; margin-left: 8px; }

main { display: flex; flex: auto; flex-direction: column; justify-content: center; background-image: url('../images/background.png'); background-size: cover; background-position: bottom center; background-repeat: no-repeat; }
main div { max-width: 500px; width: 100%; display: block; margin: auto; padding: 0 16px; }
main div > * { word-break: break-word; }
main div h1 { font-family: 'FontEredesLight'; font-size: 32px; line-height: 38px; text-align: center; margin: 0 0 16px; }
main div h1 strong { font-family: 'FontEredesBold'; display: block; }
main div h3 { font-family: 'FontEredesLight'; font-size: 20px; line-height: 26px; text-align: center; }