@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wdth,wght@0,87.5,100..900;1,87.5,100..900&display=swap");

:root {
  --background-primary-color: #050815;
  --background-secondary-color: #070b1f;

  --surface-primary-color: #0c1230;
  --surface-secondary-color: #111a3d;

  --text-primary-color: #eaf0ff;
  --text-secondary-color: #b7c3e6;
  --text-disabled-color: #7f90c2;

  --border-color: #1a2552;

  --accent-color: #6fb5c8;
  --active-color: #8fd3e3;

  --success-color: #7fb9a6;
  --warning-color: #c4b07a;
  --danger-color: #c4878f;
  --info-color: #7fa9c4;

  --width-limit: 920px;
  --multiplier: 4px;

  font-family: "Roboto", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--background-primary-color);
  color: var(--text-primary-color);
  position: relative;
  padding: 0;
  margin: 0;
}

main {
  display: grid;
  margin: 0 auto;
  gap: calc(var(--multiplier) * 2);
  width: min(100% - 2rem, var(--width-limit));
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

@media (max-width: 900px) {
  :root {
    font-size: 8px;
    overflow-x: hidden;
  }

  main {
    grid-template-columns: 1fr;
    padding-inline: 1rem;
    width: 100%;
  }

  .article__header img {
    width: 100%;
  }
}

.main__content > :first-child {
  margin-top: 0;
}

/*
The header takes the
entirity of the line.
*/

.author,
.article__card,
.article__header {
  grid-column: 1 / -1;
}

.author a {
  color: inherit;
  text-decoration: none;
}

.article__card {
  display: grid;
  cursor: pointer;
  gap: calc(var(--multiplier) * 2);
  align-items: flex-start;

  color: inherit;
  text-decoration: none;

  grid-template-areas: "image information";
  margin: calc(var(--multiplier) * 2) 0;
  padding: calc(var(--multiplier) * 2);
}

.article__card:hover {
  background-color: var(--background-secondary-color);
}

.article__card > img {
  width: 320px;
  height: 200px;
  grid-area: image;
  object-fit: cover;
}

.article__card > div {
  display: flex;
  flex-direction: column;
  grid-area: information;
}

.article__card > div > :nth-child(1) {
  font-size: large;
  max-height: fit-content;
}

.article__card > div > :nth-child(2) {
  overflow-y: hidden;
  text-overflow: ellipsis;
  color: var(--text-disabled-color);
}

.article__header {
  margin-bottom: calc(var(--multiplier) * 4);
}

.article__header img {
  display: block;
  width: 60%;
}

.article__header time {
  color: var(--text-secondary-color);
}

.article__navigation {
  top: 0;
  display: flex;
  position: sticky;
  align-self: start;
  flex-direction: column;
}

.article__link {
  position: relative;

  display: flex;
  color: inherit;
  cursor: pointer;
  user-select: none;
  flex-direction: row;
  text-decoration: none;
  margin: var(--multiplier) 0;
}

.article__link > span {
  display: flex;
  flex-direction: row;
  padding: calc(var(--multiplier) * 2) var(--multiplier);
}

.article__link > span::before {
  color: var(--text-disabled-color);
  content: "◦";
  margin-left: calc(var(--multiplier) * 3);
  margin-right: calc(var(--multiplier) * 2);
}

.article__link::before {
  --height: 80%;
  max-height: 0;
  height: var(--height);

  top: calc((100% - var(--height)) / 2);
  left: 0;
  content: "";
  position: absolute;
  width: calc(var(--multiplier) * 0.75);
  margin: 0 var(--multiplier);
  background-color: var(--accent-color);
}

.article__link:hover > span::before,
.article__link.active > span::before {
  color: inherit;
}

.article__link.active {
  background-color: var(--border-color);
}

.article__tags {
  display: flex;
  flex-direction: row;
  gap: var(--multiplier);
}

/*
  Header and
  navigation bar.
*/

header {
  background-color: var(--surface-primary-color);
}

.navbar {
  margin: 0 auto;

  display: flex;
  align-items: center;
  flex-direction: row;

  width: min(100% - 2rem, var(--width-limit));
  padding: 1em 0;
}

.navbar__title {
  user-select: none;
}

/*
  Table styles, valid
  across all pages in
  the blog.
*/

table {
  margin: 0 auto;
}

th,
td {
  padding: calc(var(--multiplier) * 2) var(--multiplier);
}

tr:nth-child(odd) {
  background-color: var(--surface-primary-color);
}

tr:nth-child(even) {
  background-color: var(--surface-secondary-color);
}

/*
  Different text
  modes in posts.
*/

.text__active {
  color: var(--active-color);
}

.text__disabled {
  color: var(--text-disabled-color);
}

/*
  External quotations
  and citations (from
  books, films, etc).
*/

.quote {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border-left: var(--multiplier) solid var(--border-color);
}

blockquote + cite {
  display: block;
  margin-right: 1em;
  margin-bottom: 1em;
  align-self: flex-end;
}

/*
  A command.
*/
mark {
  display: block;
  padding: var(--multiplier);
  margin: calc(var(--multiplier) * 2) 0;
  background-color: white;
}

/*
  Buttons.
*/

button {
  display: block;
}

.button {
  border: none;
  cursor: pointer;
  font-size: large;
  text-decoration: none;

  transition: all 250ms;
  color: var(--background-primary-color);
  background-color: var(--text-disabled-color);
}

.button:not(:disabled):hover {
  box-shadow: var(--multiplier) var(--multiplier) var(--accent-color);
}

.button:active {
  background-color: var(--active-color);
}

.button:disabled {
  cursor: not-allowed;
  color: var(--text-secondary-color);
  background-color: var(--background-secondary-color);
}

p {
  text-align: justify;
  margin-left: calc(1em * var(--margin-multiplier, 0));
}

img {
  max-width: 100%;
}

pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre code {
  display: block;
  width: auto;
}

/*
  Prevent scrolling
  when the dialog
  is open.
*/

body:has(x-dump[open]) {
  overflow: hidden;
}