:root {
  --color-primary: #0f6292;
  --color-primary-light: #0d77b5;
  --default-container-padding: 10px;
  --sidebar-width: 350px;
  --gap: 20px;
  --scrollbar-width: 16px;
}

/* Chrome auto-hides scrollbar, which provides for horrible UX on large palettes. */
::-webkit-scrollbar {
  -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
  width: var(--scrollbar-width);
}

::-webkit-scrollbar:horizontal {
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid white;
  background-color: rgba(0, 0, 0, .5);
}

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

body {
  width: fit-content; /* Necessary for sticky left <header> */
  min-width: 100%;
  margin: 0;
  font-family: sans-serif;
  line-height: 1.4;
}

a:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Header styles. */
header {
  position: sticky;
  left: var(--default-container-padding);
  max-width: 100ch;
  padding: var(--default-container-padding);
}

header h1 a {
  color: inherit;
  text-decoration: none;
}

/* Main styles. */
main {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: 20px 0 40px;
  padding: var(--default-container-padding);
}

@media (min-width: 1000px) {
  main {
    flex-direction: row;
  }
}

main a {
  color: var(--color-primary);
}

.placeholder {
  height: 100%;
  padding: 20px;
  background: #f1f4f7;
  font-size: 18px;
}

/* Footer styles. */
footer {
  min-height: 50vh;
  padding: var(--default-container-padding);
  background: var(--color-primary);
  color: white;
}

@media (min-width: 1000px) {
  footer {
    padding: 40px var(--default-container-padding) 40px calc(var(--default-container-padding) + var(--sidebar-width) + var(--gap));
  }
}

footer a {
  color: white;
}

/* Utility styles. */
.show-large {
  display: none;
}

@media (min-width: 1000px) {
  .show-large {
    display: revert;
  }

  .show-small {
    display: none;
  }
}

code {
  font-size: 12px;
}


li p:first-child {
  margin-top: 0;
}