%box
  padding: 2mm
  &::before
    font-family: IcoFont
    margin-right: 2mm

%external-link
  &::after
    font-family: IcoFont

@font-face
  font-family: Merriweather
  src: url(/styles/fonts/Merriweather-Regular.woff)
  font-display: swap

@font-face
  font-family: IcoFont
  src: url(/styles/fonts/icofont.woff2), url(/styles/fonts/icofont.woff)

a
  color: #0e0
  text-decoration: none

a[href^="http://"], a[href^="https://"]
  @extend %external-link
  &::after
    content: " \ef1f"

a[href^="https://en.wikipedia.org/"]
  @extend %external-link
  &::after
    content: " \e958"

a[href^="mailto:"]
  @extend %external-link
  &::after
    content: " \ef12"

body
  width: min(800px, calc(100% - 8px))
  margin: auto
  overflow-x: auto
  background-color: #000
  color: #fff
  font-family: Merriweather, "Times New Roman", serif
  font-size: 12pt
  text-align: justify
  line-height: 1.4

pre
  overflow-x: auto
  padding: 2mm

pre, code
  background-color: #002

h1, h2, h3, h4, h5, h6
  color: #f80

header
  display: flex
  flex-direction: row
  align-items: center
  justify-content: center
  margin-top: 1cm
  margin-bottom: 1cm
  font-size: 36pt

.comparison
  display: flex
  flex-direction: row
  flex-wrap: wrap
  align-items: flex-start
  .compared
    border: 2px solid #777
    padding: 2mm
    h6
      margin: 0
      color: #ff0
      font-size: 12pt

.disclaimer
  @extend %box
  &::before
    content: "\f025"
  background-color: #700

.notice
  @extend %box
  &::before
    content: "\ef4e"
  background-color: #007

.qa
  li:nth-child(odd)
    color: #f0f
    font-weight: bold
  li:nth-child(2n+3)
    padding-top: 3mm

.quote
  figcaption
    text-align: right

.warning
  @extend %box
  &::before
    content: "\f026"
  background-color: #440

.wip
  &::after
    content: " [WIP]"
  color: #777
  a
    color: #090

.xigoi
  font-style: normal
  color: #f80

#xigoi-logo
  width: 2cm
  height: 2cm