:root {
  --laika-background: #202124;
  --laika-background-lighter: #303134;
  --laika-background-darker: #00000040;
  --laika-background-darkest: #000000DD;
  --laika-text: #EEE;
  --laika-text-darker: #ABABAB;
  --laika-positive-color: #55FF5525;
  --laika-negative-color: #FF555525;
  --laika-font-weight-normal: 200;
  --laika-font-weight-headline: 600;
  --laika-font-size-normal: 1.2em;
  --laika-space-0: 1px;
  --laika-space-1: 2px;
  --laika-space-2: 3px;
  --laika-space-3: 5px;
  --laika-space-4: 8px;
  --laika-space-5: 13px;
  --laika-space-6: 21px;
  --laika-space-7: 34px;
  --laika-space-8: 55px;
  --laika-space-9: 89px;
  --laika-space-post: 500px;
}

body {
  font-family: sans-serif;
  color: var(--laika-text);
  background: var(--laika-background);
  margin: 0 5%;
  font-weight: var(--laika-font-weight-normal);
  font-size: var(--laika-font-size-normal);
  line-height: calc(1.4 * var(--laika-font-size-normal));
  text-transform: lowercase;
}

#banner {
  position: absolute;
  width: 150px;
  left: -42px;
  top: -42px;
}

h1 {
  text-align: center;
  font-weight: var(--laika-font-weight-headline);
  font-size: 2em;
  margin: var(--laika-space-7) 0;
  line-height: initial;
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  color: inherit;
  overflow-wrap: anywhere;
  text-decoration: none;
  margin: 0;
}

img,
svg {
  max-width: 100%;
  margin: auto;
  display: block;
  padding-bottom: var(--laika-space-3);
}

article h2 {
  font-weight: var(--laika-font-weight-normal);
  font-size: 1em;
  color: var(--laika-text-darker);
}

h3 {
  color: var(--laika-text);
}

h2,
h3 {
  font-style: italic;
  font-weight: var(--laika-font-weight-headline);
}

header {
  text-align: center;
  margin-bottom: var(--laika-space-7);
}

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--laika-space-post));
  justify-items: center;
  align-content: center;
  justify-content: center;
  align-items: start;
  gap: var(--laika-space-6);
}
.posts article {
  display: block;
  width: min(var(--laika-space-post), 100vw);
  margin: max(1%, 10px) 0;
  padding-bottom: 0;
  background: var(--laika-background-lighter);
  box-shadow: var(--laika-space-3) var(--laika-space-3) 0 var(--laika-background-darkest);
  text-align: justify;
  text-decoration: none;
}
.posts article :has(img),
.posts article :has(svg) {
  margin: auto;
}
.posts article img,
.posts article svg {
  margin: 0 calc(var(--laika-space-7) * -1);
  padding: 0;
  width: calc(100% + 2 * var(--laika-space-7));
  max-width: calc(100% + 2 * var(--laika-space-7));
}
.posts article.nsfw {
  cursor: pointer;
  user-select: none;
}
.posts article.nsfw .nsfw-hint {
  display: none;
  width: 100%;
  height: var(--laika-space-6);
  font-size: var(--laika-space-5);
  line-height: var(--laika-space-6);
  text-align: center;
  padding: 0;
  background-color: var(--laika-background-darkest);
}
.posts article.nsfw.hide-nsfw {
  overflow: hidden;
  padding-bottom: 0;
}
.posts article.nsfw.hide-nsfw .post-content {
  filter: blur(50px);
  padding-bottom: 0;
}
.posts article.nsfw.hide-nsfw .nsfw-hint-show {
  display: block;
}
.posts article.nsfw:not(.hide-nsfw) .nsfw-hint-hide {
  display: block;
}
.posts article > * {
  padding: 0 var(--laika-space-7);
}

nav {
  margin: var(--laika-space-7) 0 0 0;
}
nav span {
  text-align: center;
  display: block;
  font-style: italic;
  font-weight: var(--laika-font-weight-normal);
  font-size: var(--laika-space-6);
}
nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--laika-space-7);
  padding: 0;
  list-style-type: none;
  flex-wrap: wrap;
}
nav ul div {
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--laika-space-7);
  padding: 0;
  list-style-type: none;
  flex-wrap: wrap;
}
nav ul div li {
  width: var(--laika-space-8);
  height: var(--laika-space-8);
  line-height: var(--laika-space-8);
}
nav ul div li a {
  width: 100%;
  display: inline-block;
  text-align: center;
  background: var(--laika-background-lighter);
  text-decoration: none;
  box-shadow: var(--laika-space-3) var(--laika-space-3) 0 var(--laika-background-darkest);
}
nav ul div li a[href="#"] {
  color: var(--laika-text-darker);
  cursor: default;
}
nav ul div li a:hover {
  box-shadow: none;
  translate: calc(var(--laika-space-3) / 2) calc(var(--laika-space-3) / 2);
  border: var(--laika-space-0) solid var(--laika-background-darkest);
}

.text-message {
  position: relative;
  margin: 15px;
  padding: calc(12px - 0.1rem) 12px;
  color: rgba(from black r g b/0.85);
  background-color: #e1e1e1;
  border-radius: 10px;
  text-align: left;
  font-family: "Times New Roman";
  line-height: 1.4rem;
  font-size: 1.2rem;
  font-weight: 500;
  --sender-symbol-width: 16px;
}
.text-message::before {
  content: "";
  position: absolute;
  bottom: 10px;
  left: calc(var(--sender-symbol-width) * -1);
  height: var(--sender-symbol-width);
  border-bottom: var(--sender-symbol-width) solid #e1e1e1;
  border-left: var(--sender-symbol-width) solid var(--laika-background-lighter);
}
.text-message::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: calc(var(--sender-symbol-width) * -2);
  height: var(--sender-symbol-width);
  width: var(--sender-symbol-width);
  border-bottom: var(--sender-symbol-width) solid var(--laika-background-lighter);
  border-left: var(--sender-symbol-width) solid var(--laika-background-lighter);
  border-radius: var(--sender-symbol-width);
  background-color: var(--laika-background-lighter);
  z-index: 1;
}
.text-message p {
  margin: 0;
}
.text-message .time {
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-size: 0.7rem;
  line-height: 0.7rem;
  font-family: sans-serif;
  opacity: 0.7;
}

@media only screen and (max-width: 500px) {
  body {
    margin: 0;
  }
  header {
    margin: var(--laika-space-6);
  }
  main {
    gap: var(--laika-space-6);
  }
  main .posts {
    width: 100%;
    border: 0;
  }
  main .posts article {
    box-shadow: 0 var(--laika-space-3) 0 var(--laika-background-darkest);
  }
}