/* Nord Color Palette */
:root {
  --nord0: #2E3440;
  --nord1: #3B4252;
  --nord2: #434C5E;
  --nord3: #4C566A;
  --nord4: #D8DEE9;
  --nord5: #E5E9F0;
  --nord6: #ECEFF4;
  --nord7: #8FBCBB;
  --nord8: #88C0D0;
  --nord9: #81A1C1;
  --nord10: #5E81AC;
  --nord11: #BF616A;
  --nord12: #D08770;
  --nord13: #EBCB8B;
  --nord14: #A3BE8C;
  --nord15: #B48EAD;
}

/* Reset-ish */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Background */
body {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--nord4);
  background: url("px/pop.jpg") no-repeat center center fixed;
  background-size: cover;
  line-height: 1.6;
}

/* Main content wrapper */
.container {
  max-width: 80ch; /* limit to ~80 characters per line */
  margin: 2rem auto;
  padding: 2rem;

  background: rgba(46, 52, 64, 0.7); /* nord0 with 70% opacity */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--nord8);
  margin-bottom: 0.8em;
}

p {
  margin-bottom: 1em;
}

/* Links */
a {
  color: var(--nord9);
  text-decoration: none;
}

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

/* Code blocks */
code, pre {
  background: var(--nord1);
  color: var(--nord4);
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

pre {
  padding: 1em;
  overflow-x: auto;
}

/* Selection (because details matter) */
::selection {
  background: var(--nord10);
  color: var(--nord6);
}