:root {
  --color-background: #EFCB8D;
  --color-font: #7C5D3F;
  --color-dark: #3b280a;
  --darkreader-bg--color-background: #3b280a;
  --darkreader-text--color-font: #d0ae8d;
  --darkreader-border--color-font: #d0ae8d;
}

@font-face {
  font-style: all;
  font-family: 'Core Sans G Rounded';
  src: url('./fonts/coresanses55.otf') format('opentype');
}

@font-face {
  font-style: all;
  font-family: 'GGS TheRock Black';
  src: url('./fonts/GGS TheRock Black.otf') format('opentype');
}

html,body {
  font-size: 100%;
}
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
html .adjusted{
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Core Sans G Rounded';
  font-size: 18px;
  line-height: 1.6;
  background-color: var(--color-background);
  color: var(--color-font);
  margin: 0;
  display: flex;
}

.content-wrapper {
  max-width: none;
  margin: 0 auto;
  padding: 0 12px;
}

.post {
  max-width: 100%;
  width: none;
  margin: 12px auto 24px;
}

h1,h2,h3,h4,h5,h6 {
  font-size: 20px;
  line-height: 1;
  width: 100%;
  font-family: 'GGS TheRock Black';
  text-align: left;
}

a {
  color: #D44E09;
  font-weight: bold;
  text-decoration: none;
}

a:visited {
  color: #D44E09;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: #D44E09;
  font-weight: bold;
  text-decoration: none;
}

a:active {
  color: #D44E09;
  font-weight: bold;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2px;
}

hr { 
  display: block;
  margin-end: auto;
  margin-start: auto;
  border: 1px solid var(--color-dark);
  overflow: hidden;
  margin-before: 0.5rem;
  margin-after: 0.5rem;
}

/* @media screen and (max-width: 400px) {
  html {
    -ms-text-size-adjust: 200%;
    -webkit-text-size-adjust: 200%;
  }
  html .adjusted{
    -ms-text-size-adjust: 200%;
    -webkit-text-size-adjust: 200%;
  }
} */

@media (min-width: 769px) {
  .post {
    margin: 32px auto 64px;
  }
  body {
    font-size: 21px;
  } 
  h1,h2,h3,h4,h5,h6 {
    font-size: 23px;
  }
}

@media (min-width: 1280px) {
  .post {
    margin: 32px auto 64px;
  }
  body {
    font-size: 21px;
  } 
  h1,h2,h3,h4,h5,h6 {
    font-size: 23px;
  }
  .content-wrapper {
    max-width: 980px;
  }
  .post {
    width: 620px;
  }
}