/************** */
/* MEYER RESET */
/************** */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-size: 22px;
  font-family: "Markazi Text";
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.wrapper {
  width: 88%;
  max-width: 960px;
  margin: 0 auto;
}

.hide {
  display: inline-block;
  height: 0;
  overflow: hidden;
  position: absolute;
  text-indent: -9999px;
  width: 0;
}

.big_link {
  border: 0;
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  top: 0;
}
.big_link:hover, .big_link:focus {
  border-bottom: 0;
}

@media screen and (min-width: 480px) {
  .wrapper {
    width: 88%;
  }
}
@media screen and (min-width: 600px) {
  .wrapper {
    width: 80%;
  }
}
@media screen and (min-width: 740px) {
  .wrapper {
    width: 84%;
  }
}
#content {
  flex: 1 0 auto;
}

h1, h2, h3, h4 {
  font-family: "Bree Serif";
}

h1, h2, h3 {
  line-height: 1.22222;
  margin-bottom: 0.5em;
}

h1, h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

p, li {
  font-size: 22px;
  line-height: 1.1;
}

p, ul {
  margin-bottom: 1.1em;
}

@media screen and (min-width: 480px) {
  h1, h2 {
    font-size: 42px;
  }
}
@media screen and (min-width: 600px) {
  h1, h2 {
    font-size: 48px;
  }

  p, li {
    font-size: 26px;
  }
}
a {
  color: #333;
  transition: 200ms all;
  font-size: 22px;
}
a:hover, a:focus {
  color: #b29000;
  text-decoration-color: transparent;
}

@media screen and (min-width: 600px) {
  a {
    font-size: 26px;
  }
}
.button {
  background-color: #333;
  min-height: 54px;
  display: inline-flex;
  padding: 0 1em;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  transition: 200ms all;
}
.button:hover, .button:focus {
  background-color: #555;
}

li {
  list-style: none;
  position: relative;
  padding-left: 1em;
}
li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #333;
  display: block;
  position: absolute;
  top: 9px;
  left: 0;
}

@media screen and (min-width: 600px) {
  li::before {
    top: 11px;
  }
}
header {
  padding: 2em 0;
}
header #logo {
  border: 0;
  color: #b29000;
  display: inline-block;
  font-family: "Leckerli One";
  font-size: 80px;
  text-decoration: none;
}
header #logo:hover, header #logo:focus {
  color: #000;
}

@media screen and (min-width: 480px) {
  header #logo {
    font-size: 100px;
  }
}
@media screen and (min-width: 740px) {
  header #logo {
    font-size: 120px;
  }
}
footer {
  padding: 2em 0;
}

.footer_container {
  display: flex;
}

.social_links {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}

.post {
  margin-bottom: 1.5em;
  position: relative;
}
.posts .post:hover a, .posts .post:focus a {
  color: #b29000;
  text-decoration-color: transparent;
}
.post.detail {
  border-bottom: 0;
  padding-bottom: 0;
}
.post.detail img {
  border-radius: 4px;
  object-fit: cover;
}
.post:last-child {
  border-bottom: 0;
}
.post h1, .post h2 {
  margin-bottom: 0;
}
.post h2 a {
  font-size: 28px;
  line-height: 1.22222;
}
.post .meta {
  margin-bottom: 0.75em;
}
.post .meta_text {
  color: #ccc;
  margin-bottom: 0;
}
.post .post_image {
  height: 220px;
  object-fit: cover;
  margin-bottom: 1em;
  border-radius: 4px;
}
.post img {
  display: block;
  width: 100%;
}
.post img.left {
  float: left;
  margin: 0 1em 1em 0;
  max-width: 50%;
}
.post img.right {
  float: right;
  margin: 0 0 1em 1em;
  max-width: 50%;
}
.post blockquote {
  border-left: 5px solid #b29000;
  color: #888;
  padding-left: 20px;
}

@media screen and (min-width: 480px) {
  .post h1 a, .post h2 a {
    font-size: 42px;
  }
  .post .post_image {
    height: 300px;
  }
}
@media screen and (min-width: 600px) {
  .post {
    margin-bottom: 3em;
  }
  .post h1 a, .post h2 a {
    font-size: 48px;
  }
  .post .post_image {
    height: 400px;
  }
  .post img {
    max-width: 840px;
  }
}
.twitter, .instagram {
  background-repeat: no-repeat;
  display: inline-block;
}

.twitter {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox=' 0 0 30 24.4'%3e%3cpath fill='%23000' d='M30 2.9c-1.1.5-2.3.8-3.5 1 1.3-.8 2.2-2 2.7-3.4-1.2.7-2.5 1.2-3.9 1.5-1.2-1.3-2.8-2-4.5-2-3.4 0-6.2 2.8-6.2 6.2 0 .5.1 1 .2 1.4-5.1-.3-9.7-2.7-12.7-6.5-.5.9-.8 2-.8 3.1 0 2.1 1.1 4 2.7 5.1-1 0-2-.3-2.8-.7v.1c0 3 2.1 5.5 4.9 6-.5.1-1.1.2-1.6.2-.4 0-.8 0-1.2-.1.8 2.4 3.1 4.2 5.7 4.3-2.1 1.7-4.8 2.6-7.6 2.6-.5 0-1 0-1.5-.1 2.7 1.7 6 2.8 9.4 2.8 11.3 0 17.5-9.4 17.5-17.5v-.8c1.3-.9 2.4-2 3.2-3.2z'/%3e%3c/svg%3e");
  width: 30px;
  height: 25px;
  margin-right: 20px;
}

.instagram {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3e%3cg fill='%23000'%3e%3cpath d='M20 9.6c-5.7 0-10.3 4.6-10.3 10.3S14.3 30.2 20 30.2s10.3-4.6 10.3-10.3S25.7 9.6 20 9.6zm0 16.9c-3.6 0-6.6-3-6.6-6.6s3-6.6 6.6-6.6 6.6 3 6.6 6.6-3 6.6-6.6 6.6z'/%3e%3cellipse transform='rotate(-71.947 30.677 9.345)' cx='30.7' cy='9.3' rx='2.3' ry='2.3'/%3e%3cpath d='M36.8 3.3C34.6 1.1 31.7 0 28.3 0H11.7C4.7 0 0 4.7 0 11.7v16.5c0 3.5 1.2 6.5 3.4 8.6 2.1 2.1 5 3.2 8.4 3.2h16.4c3.4 0 6.4-1.1 8.5-3.2 2.2-2.1 3.3-5.1 3.3-8.5V11.7c0-3.4-1.1-6.3-3.2-8.4zm-.5 25c0 2.5-.8 4.5-2.2 5.9-1.4 1.4-3.5 2.1-5.9 2.1H11.8c-2.4 0-4.4-.7-5.9-2.1-1.5-1.4-2.2-3.5-2.2-6V11.7c0-2.4.7-4.5 2.2-5.9 1.4-1.4 3.4-2.1 5.9-2.1h16.6c2.4 0 4.4.8 5.9 2.2 1.4 1.4 2.2 3.4 2.2 5.8v16.6z'/%3e%3c/g%3e%3c/svg%3e");
  width: 25px;
  height: 25px;
}
