/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: 'DotGothic16';
  src: url('fonts/DotGothic16.ttf') format('truetype');
}
@font-face {
  font-family: 'PixelOperator';
  src: url('fonts/PixelOperator.ttf') format('truetype');
}
@font-face {
  font-family: 'Yrsa';
  src: url('fonts/Yrsa.ttf') format('truetype');
}

@font-face {
  font-family: 'DT';
  src: url('fonts/determination.ttf') format('truetype');
}

@font-face {
  font-family: 'Mozilla';
  src: url('fonts/MozillaText-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto';
  src: url('fonts/NotoSans-VariableFont_wdth\,wght.ttf') format('truetype');
}


* {
   box-sizing: border-box;
   
}


body {
  background-color: #cc6a6a;
  /* background-image: url("/assets/tiles/noise.png");
  background-repeat: no-repeat; */
  background-size: 32px 32px;
  background-attachment: fixed;
  color: black;

  font-family: Noto, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 395;

  max-width: 640px;
  overflow-wrap: break-word; /* or word-wrap: break-word; */
  word-break: normal;
  width: 640px;
  margin: 0 auto;
}


.main {
  display: flex;
  position: relative;
  padding: 15px 0px;
  flex-direction: column;
  row-gap: 15px;
  
}

.topthing {
  grid-area: topthing;
  background-color: transparent;
  padding:0px;
}

.header {
    padding: 0px;
    grid-area: header;
    background-color: #f4edea;
}

.header h1 {
    font-size: 40px;
    position: absolute;
    left: 31px;
    top: 112px;
}

.header img {
  display: block;
}

.content {
    padding: 15px 20px 20px;
    grid-area: content;
    background-color: #f4edea;
    box-sizing: border-box;
}

.content img {
  max-width: 100%;
}

.heading {
  max-width: 400px;
}
.heading h1 {
  line-height: 1.17;
  font-style: bold;
}
.heading p {
  font-style: italic;
}


.menu {
    position: absolute;
    right: 20px;
    top: 208px;
    
}
.menu a {
  text-decoration: none;
  font-style: italic;
  color: #6d6969;
  padding: 0 2px;
}


.footer{
    padding: 5px 0px;
    margin: 0 0 0 0;
    grid-area: footer;
    background-color: #f4edea;
    text-align: center;
}


h1 {
   margin: 0px;
}

p {
  margin: 0px 0px 12px 0px;
}

h1,h2 {
  font-weight: 900;
}




.white_outline {
  --outline-color: rgb(228, 219, 196);
  --outline-size: 1.67px;
  --outline-size-neg: -1.67px;
  text-shadow: var(--outline-size-neg) var(--outline-size-neg) 0 var(--outline-color), var(--outline-size) var(--outline-size-neg) 0 var(--outline-color), var(--outline-size-neg) var(--outline-size) 0 var(--outline-color), var(--outline-size) var(--outline-size) 0 var(--outline-color);
}

.posts {
    gap: 15px;
    grid-area: content;
    background-color: rgba(0,0,0,0);
    display: flex;
    flex-direction: column;
}

.post {
  padding: 15px 20px 20px;
  background-color: #f4edea;
  box-sizing: border-box;
  border: 2px solid #adafb8;

  display: flex; /* just stuff to make it work */
  flex-direction: column;
  align-items: flex-start;
}



.post img {
  display: block;
  max-width: 100%;
  margin: 15px auto;
}

.postimg {
  height: 300px;
  border: 2px solid #adafb8;
}

.post video {
  display: block;
  margin: 15px auto;
  max-width: 100%;
}

a {
  color: #3ca3b5;
}

blockquote {
  margin: 1.5em 0;
  width: 100%;
  padding: 0.5em 1em;
  margin: 0;
  border-left: 4px solid #6b6b6b;
  background-color: #e9e2e0;
  color: #555555;
  font-style: italic;
}

blockquote > ul:last-child {
  list-style: none;
  padding: 0;
  margin: 5px 0;
  text-align: right;
  font-style: normal;
  color: black;
}

blockquote br::before {
  content: "* ";
}

blockquote p {
  margin: 8px 0px;
}

ul {
  margin-top: 0;
  margin-bottom: 15;
}

li p{
  margin: 10px 0;
}