@use "colors.sass" as c

body
  background-color: c.$bg-dark
  color: c.$fg-main
  font-family: "Bariol", sans-serif
  font-size: 18px
  margin: 0
  padding: 0
  // for footer alignment
  min-height: 100vh
  display: flex
  flex-direction: column

a
  color: c.$link

pre, code
  font-size: 0.88em

code
  background: c.$bg-darker
  padding: 3px 5px
  border-radius: 4px

input, select, button
  font-family: inherit
  font-size: 16px
  min-width: 0px

button
  cursor: pointer

:focus
  outline: none

:-moz-focusring
  outline: none

::-moz-focus-inner
  border: 0

select:-moz-focusring
  color: transparent
  text-shadow: 0 0 0 c.$fg-bright

body.show-focus
  a, select, button, input, video, summary
    &:focus
      outline: 2px dotted #ddd

video
  background-color: black

details
  background-color: c.$bg-accent-x
  padding: 12px
  border-radius: 8px

  summary
    cursor: pointer
    line-height: 1
    margin-bottom: 0
    user-select: none
    color: c.$fg-main

  &[open] summary
    margin-bottom: 16px

table
  background-color: c.$bg-darker

table, td, th
  border: 1px solid c.$edge-grey
  border-collapse: collapse

td, th
  padding: 4px 8px

thead, tr:nth-child(even)
 background-color: c.$bg-darkest