$light-fonts: "Fira Sans Light", sans-serif;
$normal-fonts: "Fira Sans", sans-serif;
$page-width: 800px;
$primary-color: #333;
$bg-color: #eee;
$page-color: #ddd;
$header-bg: #1d3c67;
$header-fg: #ffffff;
$link-color: #33f;
$link-hover: #00d;
$menu-bg: #231d67;
$menu-fg: #e8e9f3;
$menu_btn-selected: #1d6167;
$menu_btn-size: 10px;

html {
  background-color: $page-color;
}
@media only screen and (min-width: $page-width){
    html {
        padding:10px;
    }
}
@font-face {
    font-family: "Fira Sans Light";
    font-style: normal;
    font-weight: 300;
    src: local("Fira Sans Light"), local("FiraSans-Light"), url("fonts/Fira Sans Light.woff2") format("woff2");
}
@font-face {
    font-family: "Fira Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Fira Sans"), local("FiraSans-Regular"), url("fonts/Fira Sans.woff2") format("woff2");
}
body {
    max-width: $page-width;
    margin: auto;
    font-family: $light-fonts;
    background-color: $bg-color;
}
header {
  height: 150px;
  background-color: $header-bg;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  align-items: center;
  padding: 0px;
  .date, h1 {
    color: $header-fg;
    text-shadow: black 0px 0px 0.1em;
  }
}
#header-logo {
  background: url('img/logo.png') top;
  width: 150px;
  height: 150px;
}
#header-logo:hover {
  background-position: bottom;
}
h1 {
  font-size: 28pt;
}
h2 {
  font-size: 22pt;
}
h3 {
  font-size: 18pt;
}
p, h1, h2, h3, pre {
  padding: 0px 10px 3px 10px;
}
p, ul {
  font-size: 14pt;
  color: $primary-color;
}
p {
  text-align: justify;
}
footer {
  font-size: 8pt;
  text-align: center;
  color: #555;
  padding: 10px;
}
footer a,
footer a:visited {
  color: #66f;
}
a,
a:visited {
  font-family: $light-fonts;
  text-decoration: none;
  color: $link-color;
}
a:hover{
  text-decoration: underline;
  color: $link-hover;
}
li {
  list-style-type: circle;
  margin-bottom: 4pt;
}
nav {
  display: flex;
  background-color: $menu-bg;
  menu {
    padding: 0px;
    display:block;
    margin: 0px;
    width: 100%;
  }
  li {
    a {
      padding: $menu_btn-size;
      text-shadow: black 0px 0px 0.1em;
      font-family: $normal-fonts;
      font-weight: 900;
    }
    a, a:hover {
      color: $menu-fg;
    }
    a:hover {
      background-color: $menu_btn-selected;
      text-decoration: none;
    }
    a.nav_current {
      background-color: $menu_btn-selected;
    }
    font-size: 14pt;
    margin: 0px;
    padding: $menu_btn-size 0px $menu_btn-size 0px;
    list-style-type: none;
    float: left;
  }
}