/* global colours */
:root {
  --light-text: #DADADA;
  --medium-text: #888888;

  --darkest-gray: #111111;
  --dark-gray: #232323;
  --medium-gray: #777777;
  --light-gray: #BBBBBB;

  --darkest-brand: #00041A;
  --dark-brand: #001133;
  --medium-brand: #fdd302; /*#49b5Fb;*/
  --light-brand: #0199d8; /*#6ec5ff;*/
}

/* ** Reset from https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after { box-sizing: border-box; }
/* 2. Remove default margin */
*:not(dialog) { margin: 0; }
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }
/* 4. Add accessible line-height */
body { line-height: 1.5; }
/* 5. Improve text rendering (only for high dpi...?) */
body { -webkit-font-smoothing: antialiased; }
/* 6. Improve media defaults */
img, picture, video, canvas, svg { display: block; max-width: 100%; }
/* 7. Inherit fonts for form controls */
input, button, textarea, select { font: inherit; }
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
/* 9. Improve line wrapping */
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
/* 10. Create a root stacking context */
#root, #__next { isolation: isolate; }

/* my own stuff */
html { overscroll-behavior-y: none; }
p, ul { margin-bottom: 1.5rem; &:last-child { margin-bottom: 0; } }
iframe { border: none; display: block; }

/* https://chrisnager.github.io/ungrid is convenient */
@media (min-width: 30em) {
  .row { width: 100%; display: table; table-layout: fixed; border-spacing: 10px 0; }
  .col { display: table-cell; }
}

body {
  background: var(--darkest-brand);
  color: var(--light-text);
  font-size: 1.2rem;
  font-family: Palatino, Georgia, serif;
  padding: 2rem 0 0 0;
}

body {
  > h1, > h2, > h3, > h4, > h5, > h6,
  > ul, > ol,
  > p, > blockquote,
  > .container,
  > nav {
    max-width: 810px;
    padding: 0 10px;
    margin-left: auto;
    margin-right: auto;
  }

  > ol, > ul {
    padding-left: 50px;
  }
}

.container {
  max-width: 860px;
  margin: 0 auto;
  &.wide {
    max-width: 1060px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: Verdana, sans-serif;
  margin-bottom: 1.25rem;
  text-shadow: 3px 5px 0px var(--darkest-brand);
}

nav {
  font-family: Andale Mono, monospace;
  font-weight: bold;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  cursor: default;

  .site-title {
    color: white;
    font-weight: bold;
    text-shadow: 1px 2px 0px var(--darkest-brand);
    margin-right: 2rem;
    letter-spacing: -1px;
    background: var(--dark-brand);
    padding: 2px 16px;
    border-radius: 4px;
	border: 2px solid var(--medium-brand);
  }

  a {
    border-bottom: 0 !important;
    font-size: 1.1rem;
    margin: 0 0.75rem;
  }
}

a {
  color: var(--medium-brand);
  text-decoration: none;
  border-bottom: 2px solid var(--medium-brand);
  &:visited {
    color: var(--medium-brand);
    text-decoration: none;
    border-bottom: 2px solid var(--dark-brand);
  }
  &:hover, &:active {
    color: var(--light-brand);
    border-bottom: 3px solid var(--light-brand);
  }
}