/* Variables */
:root {
  --measure: 75ch;
  --color: #FFFFFF;
  --background: #1D1A31;
  --codeBg: #393552;
  --accentColor: #FC5F15;

  --blockBg: #191724;

  color: var(--color);
  font-family: Greycliff, Helvetica, Arial, sans-serif;
}

/* max-width is 75 characters */
* {
  max-width: var(--measure);
  line-height: 1.5;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* Only these elements are excluded from max-width rule */
html,
body,
div,
nav {
  max-width: none;
}

/* Default background */
body {
  background-color: var(--background);
  margin: 2.25rem 1.5rem;
}

:target {
  background-color: rgba(255, 255, 255, 0.1);
}

/* --------------------- */
/* GAME DEV DIARY HEADER */
body > header {
  /* Prepare the header to let the nav bar act as a sidebar to the logo */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
body > header ul {
  /* Remove default list styling */
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;

  /* Make the nav bar space its items evenly */
  display: flex;
  justify-content: space-evenly;
}
body > header ul li {
  /* Minimum space between two nav items is 1.5rem */
  margin: auto 0.75rem;
}
body > header > a {
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 600;

  /*
    Make the nav act as a sidebar that moves below logo if not enough space
    is available
  */
  flex-basis: 0;
  flex-grow: 999;
  min-width: 60%;
}
body > header > nav {
  flex-grow: 1;
}
/* Positioning for Game Dev Diary logo */
body > header > a > svg {
  height: 1.5em;
  vertical-align: bottom;
}

/* SVG Icons by default should be displayed inline on the baseline */
svg {
  display: inline;
  height: 0.75em;
  vertical-align: baseline;
}

h1 {
  font-size: 2rem;
}

/* Make the line height of headings not too huge */
h1, h1 *,
h2, h2 *,
h3, h3 *,
h4, h4 *,
h5, h5 *,
h6, h6 * {
  line-height: 1.2;
}

/* Separate each article from the others */
article {
  margin-bottom: 3rem;
}
/* Remove article headers lower margin and have the paragraph below them small */
article > header > h1,
article > header > h2,
article > header > h3 {
  margin-bottom: 0;
}
article > header > p {
  margin-top: 0;
  font-size: 0.8rem;
}

/* Images and videos are by default blocks. */
/* And they shouldn't bypass width limitations dictated by their parents */
img, video {
  max-width: 100%;
  display: block;
}

/* Centering */
/* Center block elements */
main,
header,
footer,
img, video {
  margin: 0 auto;
}
/* Center text */
figure > figcaption, footer {
  text-align: center;
}

/* Format */
pre {
  font-family: Menlo, Monaco, Consolas, source-code-pro, "Courier New", monospace;
}

a, a:visited {
  color: var(--accentColor);
}

/* Make figure fit the width of the container */
figure {
  margin-left: 0;
  margin-right: 0;
}

/* Add quote-like sidebar to quotes */
blockquote {
  margin: 0;
  border-left: 0.75ch solid;
  padding-left: 1em;
}

/* Make inline codes standout */
:not(pre) > code {
  border-radius: .3em;
  background: var(--codeBg);
  padding: .15em .2em .05em;
  white-space: normal;
}

.paging-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 3rem 0;
}

.paging-links > * {
  flex: 1 1 20rem;
}

.paging-links a {
  text-decoration: none;
  color: var(--color);
}

.paging-links article {
  padding: 1rem;
  border: 1px solid var(--color);
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.3);
  margin-bottom: 0;
  margin-right: 0;
  height: 100%;
}

.paging-links article > p:first-child {
  margin: 0;
}

.paging-links h3 {
  color: var(--accentColor);
}

/* Callout */
aside {
  border-radius: 0.75rem;
  background: var(--blockBg);
  display: flex;
  padding: 1rem;
}
aside > div > span[role=img] {
  padding-right: 1rem;
}
aside p {
  margin: 0 auto;
}

/* Code blocks */
pre {
  border-radius: 0.75rem;
  background: var(--blockBg);
  overflow: auto;
  margin-right: -1.5rem;
  margin-left: -1.5rem;
  padding: 1.5rem;
  min-width: 100%;
  box-sizing: content-box;
}

/* Rose Pine color scheme */
/* https://rosepinetheme.com/palette.html#rose-pine */
pre > code, code .punctuation {
  /* text */
  color: #e0def4;
}
code .comment {
  /* inactive */
  color: #555169;
}
code .keyword, code .namespace {
  /* pine */
  color: #3e8fb0;
}
/* in Rust "constructors" are just patterns (usually in match statements) */
code .type, code .constructor {
  /* foam */
  color: #9ccfd8;
}
/* functions and operators that are not part of a lifetime */
code .function, code :not(.label) .operator {
  /* rose */
  color: #ebbcba;
}
code .string, code .constant {
  /* gold */
  color: #f6c177;
}
/* lifetimes and numeric literals */
code .label, code .constant.numeric {
  /* iris */
  color: #c4a7e7;
}
/* function-like macros and attribute macros */
code .function.macro, code .attribute {
  /* love */
  color: #eb6f92;
}
/* special turbofish highlighting because I love it */
code .turbofish {
  color: var(--accentColor);
  text-shadow: 0 0 0.3em var(--accentColor);
}