/* attributable.css */

@import url("./normalize.css");
@import url("./fonts.css");

:root {
  --color-fg: rgb(255,255,255);
  --color-bg: rgb(20,20,20);
  --color-hi: rgb(228,9,59);
  --color-me: rgb(128,128,128);
  --color-lo: rgb(40,40,40);
  --margin: 1rem;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: unset;
  padding: unset;
}

*::selection {
  background-color: var(--color-me);
}

html {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: "Inter", sans-serif;
  font-size: calc(1em + 0.5vmin);
  font-style: normal;
  font-weight: normal;
  height: 100%;
  line-height: 1.2;
  scroll-behavior: smooth;
}

body {
  font-size: 1rem;
  min-height: 100%;
  padding-left: var(--margin);
  padding-right: var(--margin);

  /* grid */
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 0 calc(var(--margin) * 2.8);

  /* init */
  opacity: 0;
  animation: init 0.03s ease-in 0.5s 1 forwards;
}

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

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

a:hover {
  color: var(--color-fg);
  text-decoration: underline;
}

a:focus {
  color: var(--color-fg);
}

a:active {
  color: var(--color-fg);
}

code {
  background-color: var(--color-lo);
  border-color: var(--color-lo);
  border-radius: 4px;
  border-style: solid;
  border-width: calc(var(--margin) * 0.05) calc(var(--margin) * 0.2);
  font-family: "Roboto Mono", monospace;
  font-size: 0.85rem;
  font-weight: normal;
  margin: 0 calc(var(--margin) * 0.1);
  padding: 0 calc(var(--margin) * 0.1);
}

code, pre, kbd, samp,
code a, pre a, kbd a, samp a {
  font-family: "Roboto Mono", monospace;
  font-weight: normal;
}

em, i {
  font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: unset;
}

h1, h2, h3 {
  font-weight: bold;
}

hr {
  border-color: var(--color-fg);
  border-radius: unset;
  border-style: solid;
  border-width: calc(var(--margin) * 0.05);
  margin-top: calc(var(--margin) * 1.2);
  margin-bottom: calc(var(--margin) * 1.2);
}

strong, b {
  font-weight: bold;
}

ul {
  list-style-type: none;
}

a[rel~="external"] {
  white-space: nowrap;
}

a[rel~="external"]::after {
  content: "\2197";
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 900;
  vertical-align: super;
}

img {
  object-fit: cover;
  width: 100%
}

footer:not(blockquote > footer) {
  border-top-color: var(--color-fg);
  border-top-radius: unset;
  border-top-style: solid;
  border-top-width: calc(var(--margin) * 0.1);
  display: grid;
  grid-auto-flow: column;
  grid-row: 3;
  margin-top: calc(var(--margin) * 4);
  margin-bottom: calc(var(--margin) * 1.2);
  padding-top: calc(var(--margin) * 1.2);
}

header {
  background-color: var(--color-bg);
  border-bottom-color: var(--color-fg);
  border-bottom-radius: unset;
  border-bottom-style: solid;
  border-bottom-width: calc(var(--margin) * 0.1);
  grid-row: 1;
  padding-top: calc(var(--margin) * 1.2);
  padding-bottom: calc(var(--margin) * 1.2);
  position: sticky;
  top: 0;
  z-index: 1;
}

header h1 img[src*=".svg"] {
  height: var(--margin);
  width: var(--margin);
  vertical-align: super;
}

main {
  grid-row: 2;
  max-width: 52ch;
}

main > :first-child {
  margin-top: calc(var(--margin) * 1.2);
}

main * + blockquote {
  margin-top: calc(var(--margin) * 1.2);
  margin-bottom: calc(var(--margin) * 1.2);
}

main * + figure {
  font-size: 0;
  margin-top: calc(var(--margin) * 1.2);
  margin-bottom: calc(var(--margin) * 1.2);
}

main *:not(hr) + h3 {
  margin-top: calc(var(--margin) * 1.8);
}

main * + p {
  margin-top: calc(var(--margin) * 0.6);
}

main a:link {
  text-decoration: underline;
}

main blockquote {
  /*
  background-color: var(--color-lo);
  */
  border-left-color: var(--color-lo);
  border-left-style: solid;
  border-left-width: calc(var(--margin) * 0.2);
  font-style: italic;
  /*
  padding: calc(var(--margin) * 1.2) calc(var(--margin) * 1.8);
  */
  padding-left: calc(var(--margin) * 1.2);
  quotes: "»" "«" "›" "‹";
}

main blockquote > footer {
  font-size: 0.65rem;
  font-style: normal;
  margin-top: calc(var(--margin) * 0.65);
}

/*
main blockquote > cite::before,
*/
main blockquote > footer::before {
  content: '\2014';
}

main blockquote > q::before {
  content: open-quote;
}

main blockquote > q::after {
  content: close-quote;
}

main details > summary {
  cursor: pointer;
}

main details[open] + *:not(h3) {
  margin-top: calc(var(--margin) * 0.6);
}

main details[open] > p {
  margin-top: calc(var(--margin) * 0.3);
}

main h3 {
  margin-bottom: calc(var(--margin) * 0.6);
  margin-top: calc(var(--margin) * 1.2);
}

/*
main p {
  text-align: justify;
}
*/

.intro, .outro {
  font-style: italic;
}

@keyframes init {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}