/* @import url(https://fonts.googleapis.com/css?family=Patrick+Hand+SC); */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Yanone+Kaffeesatz&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  line-height: 1;
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'UnifrakturMaguntia', cursive;
}
*:focus {
  outline: none;
}
a:active, a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}
body {
  color: #222;
}

header, footer {
  display: block;
  width: 100%;
}

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  background: #222;
  height: 60px;
  color: #eee;
  z-index: 9999;
  text-align: center;
}
h1 {
  left: 0;
}
h1, .open_nav {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0 20px;
  height: 100%;
  line-height: 60px;
  color: #eee;
}
.topbar_container {
  padding: 10px 0;
}

/* Push menu */
.open_nav {
  right: 0
}
.toggle_nav {
  font-size: 150%;
}
.close_nav {
  position: absolute;
  top: 20px;
  right: 20px;
}
.pushmenu {
  background: #444;
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  width: 300px;
  height: 100%;
  top: 0;
  z-index: 1000;
  position: fixed;
}
.pushmenu h3 {
  color: #eee;
  font-size: 1.3em;
  font-weight: 400;
  padding: 15px 25px;
  margin: 0;
  background: #222;
  height: 16px;
}
.right {
  list-style-type: none;
  padding: 0;
  margin: 60px 0 0 25%;
  width: 50%;
  font-size: 150%;
}
.right li { margin-top: 30px; }
.right li a {
  position: relative;
  display: block;
  color: #f1f1f1;
  font-size: 1.3em;
  font-weight: 400;
  text-decoration: none;
  padding: 14px;
}
.right li a:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 0;
  height: 3px;
  background-color: #f1f1f1;
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.right li a:hover:after { width: 100%; }
.right li a:active { color: #dbdbdb; }
.pushmenu-right { right: -300px; }
.pushmenu-right.pushmenu-open { right: 0; }
.pushmenu-push {
  overflow-x: hidden;
  position: relative;
  right: 0;
}
.pushmenu-push-toright { right: 300px; }
.pushmenu, .pushmenu-push {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.container {
  margin-top: 100px;
}

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

/* Colors */
.red { background-color: #d9534f !important; }
.green { background-color: #5cb85c !important; }
.orange { background-color: #f0ad4e !important; }
.lightblue { background-color: #5bc0de !important; }
.blue { background-color: #0275d8 !important; }
.grey { background-color: #636c72 !important; }
.font_red { color: #d9534f !important; }
.font_green { color: #5cb85c !important; }
.font_orange { color: #f0ad4e !important; }
.font_lightblue { color: #5bc0de !important; }
.font_blue { color: #0275d8 !important; }
.font_grey { color: #636c72 !important; }
.font_black { color: #222 !important; }