:root {
  --mybeige: #e7e1da;
  --mymaroon: #8f2d56;
  --myblue: #4c606b;
  --myolive: #697a21;
  --mylightblue: #65afff;
  --mylightbeige: #efebe6;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--mybeige);
  color: var(--myblue);
  font-size: 1.25em;
}

.top_wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 1em;
  margin: 0 auto;
  padding: 5px;
  height: 100vh;
}

.post_info {
  background-color: var(--mylightbeige);
  border-radius: 5px;
  box-shadow: 1px 1px 2px gray;
  display: grid;
  grid-template-columns: auto;
  grid-gap: 1em;
  padding: 10px;
}

.katex {
  font-size: 1em;
  color: #0b496b;
}

@media screen and (min-width: 640px) {
  .top_wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-gap: 1em;
    margin: 0 auto;
    max-width: 45em;
    padding: 1em;
    height: 100vh;
  }
  .post_info {
    background-color: var(--mylightbeige);
    border-radius: 5px;
    box-shadow: 1px 1px 2px gray;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 1em;
    padding: 10px;
  }

  .katex {
    font-size: 1.1em;
  }
}

.resizable {
  display: block;
  height: auto;
  max-width: 100%;
}

header {
  display: grid;
  grid-template-columns: 1fr auto;
}

header h1 {
  align-self: center;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, #697a21ff, transparent) 1;
  color: var(--mymaroon);
  font-family: 'Zen Dots', cursive;
}

header img {
  border: 1px solid var(--mymaroon);
  border-radius: 50%;
  grid-column: 2/3;
  margin-top: 38px;
}

article {
  font-family: 'Ubuntu', sans-serif;
  text-shadow: 1px 1px #ececec;
}

article p {
  line-height: 1.5;
  margin: 1.5em 0;
}

footer {
  font-family: 'Tangerine', cursive;
  font-size: 0.95em;
  text-align: center;
}

footer p {
  margin: 0.5em auto;
}

main > ul,
details ul {
  list-style-type: none;
}

a:link {
  color: var(--mylightblue);
  text-decoration: none;
}

a:visited {
  color: var(--mylightblue);
}

.post_info a,
.credit_line a {
  color: inherit;
  text-decoration: none;
}

.credit_line {
  /*font-family: 'Ubuntu', sans-serif;*/
  font-family: 'Tangerine', cursive;
  font-size: 1em;
  text-align: center;
}

.credit_item {
  font-size: 1.5em;
  color: var(--mylightblue);
}

.post_info p {
  font-family: 'Comfortaa', cursive;
  font-weight: 300;
  line-height: 1.5;
}

.title {
  font-weight: 600;
}

ul.category_list li {
  margin: 1em 0;
}

summary::marker {
  color: var(--myolive);
}

summary {
  color: var(--mymaroon);
  font-family: 'Comfortaa', cursive;
  font-size: 1.5em;
  font-weight: 300;
}

div.img_div {
  text-align: center;
}