@font-face {
  font-family: "Sawarabi Mincho";
  src:
    local("Sawarabi Mincho"),
    url("SawarabiMincho-Regular.ttf") format("truetype");
}

:root {
  --main-bg-color: rgb(73, 46, 69);
  --main-fg-color: rgb(227, 227, 227);
  --main-link-color: rgb(242, 184, 226);
  --hover-link-color: rgb(200, 150, 186);
}

body {
  background-color: var(--main-bg-color);

  max-width: 480px;
  margin: 1rem auto;

  padding: 0.4rem 1rem;

  font-family: "Sawarabi Mincho";
  font-size: 110%;

  border-left: 1px solid var(--main-fg-color);
  border-right: 1px solid var(--main-fg-color);
  min-height: calc(100svh - 2rem - 0.8rem);
}

@media screen and (max-width: 600px) {
  /*
  :root {
    --main-bg-color: rgb(51, 35, 49);
    --main-fg-color: rgb(196, 196, 196);
  }
  */

  body {
    border: none;
  }
}

body, .header a, .header a:hover {
  color: var(--main-fg-color);
}

.header a {
  text-decoration: none;
  font-size: 1.1rem;
}

.header {
  margin-top: 0;
  margin-bottom: 1.3rem;
  text-align: center;
}

a {
  color: var(--main-link-color);
}

a:hover {
  color: var(--hover-link-color);
}

h1.title {
  font-size: 1.3rem;
  margin-bottom: 0rem;
}

.published-date {
  font-size: 0.95rem;
}

.date-container {
  margin-bottom: 1.2rem;
}

.list-published-date {
  margin-right: 1rem;
}

.posts {
  margin-top: 1rem;
}

.footer {
  margin-top: 2rem;
  display: flex;
  justify-content: space-evenly;
}