html, body {
  font-family: "Vollkorn"; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Vollkorn"; }

#top {
  background-color: #444;
  color: #eee;
  background-image: url("/assets/banner.jpg");
  background-position: center;
  background-attachment: fixed;
  background-size: cover; }

#top h1 {
  color: #fff;
  text-shadow: 0 1px 5px #111, 0 0px #111; }

#top h1.big {
  font-size: 5rem; }

#top p {
  text-shadow: 0 1px 1px #000; }

#downloads {
  padding-top: 1.3rem; }

.button.download {
  background-color: transparent;
  background-color: rgba(0, 0, 0, 0.5);
  border-width: 2px;
  border-radius: 3px;
  border-color: #a03b3b; }

.button.download:hover {
  background-color: #c43030; }

p {
  font-size: 1.2rem; }

h2 {
  color: #333; }

#top, #about, #blog, #footer {
  padding: 20px 0; }

#about {
  background-color: #f0e7e7; }

#about p {
  color: #555;
  text-shadow: 0 1px rgba(0, 0, 0, 0.2); }

#blog {
  background-color: #fff; }

#posts {
  list-style: none;
  margin: 0;
  padding: 5px; }

#posts li h3 {
  border-bottom: 1px solid #ccc;
  font-size: 1.5em;
  font-family: "Vollkorn"; }

#posts li h3 a.post-link {
  color: #444; }

#posts li h4.subheader {
  color: #777;
  font-size: 1rem; }

#posts li p {
  margin-bottom: 1.5rem;
  padding: 0; }

#footer {
  background-color: #222;
  color: #777; }

#footer a {
  color: #777;
  text-decoration: underline; }

#footer a:hover {
  color: #999; }

#logodiv {
  width: 500px;
  height: 119px;
  background: url("https://freeablo.org/fa/images/logo.png") left center;
  -webkit-animation: play 0.4s steps(8) infinite;
  -moz-animation: play 0.4s steps(8) infinite;
  -ms-animation: play 0.4s steps(8) infinite;
  -o-animation: play 0.4s steps(8) infinite;
  animation: play 0.4s steps(8) infinite; }

@-webkit-keyframes play {
  100% {
    background-position: -4000px; } }
@-moz-keyframes play {
  100% {
    background-position: -4000px; } }
@-ms-keyframes play {
  100% {
    background-position: -4000px; } }
@-o-keyframes play {
  100% {
    background-position: -4000px; } }
@keyframes play {
  100% {
    background-position: -4000px; } }
.rssicon {
  height: 0.5em; }

a {
  word-wrap: break-word; }

#nav {
  position: sticky;
  top: 0;
  z-index: 50; }

/* header */
.header {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
  overflow: auto;
  width: 100%;
  z-index: 3;
  background-color: #333;
  color: #444b3e; }

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden; }

.header li a {
  display: block;
  margin: 20px 20px;
  padding: 0px 0px;
  border-right: none;
  text-decoration: none;
  color: #fff; }

.header li a:hover,
.header .menu-btn:hover {
  background-color: #555; }

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
  color: #fff;
  font-size: 1.0625rem; }

/* menu */
.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out; }

/* menu icon */
.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none; }

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px; }

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%; }

.header .menu-icon .navicon:before {
  top: 5px; }

.header .menu-icon .navicon:after {
  top: -5px; }

/* menu btn */
.header .menu-btn {
  display: none; }

.header .menu-btn:checked ~ .menu {
  max-height: 240px; }

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent; }

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg); }

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg); }

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0; }

/* 48em = 768px */
@media (min-width: 48em) {
  .header li {
    float: left; }

  .header li a {
    padding: 10px 10px;
    margin: 0px 0px;
    border-right: 1px solid #4e4e4e; }

  .header .menu {
    clear: none;
    float: right;
    max-height: none; }

  .header .menu-icon {
    display: none; } }
/* This element defines the size the iframe will take.
   In this example we want to have a ratio of 25:14 */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* The height of the item will now be 56.25% of the width. */ }

/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; }

pre {
  overflow: scroll; }