\:root
  --color-bg:#fffff5
  --color-text:#000
  --gap-l:2.5rem

body
  margin: var(--gap-l) auto
  max-width: 610px
  line-height: 1.6
  background: var(--color-bg)
  color: var(--color-text)
  padding: 0 10px
  line-height: 28px
  font-family: "Lora"
  font-weight: 500
  box-sizing: border-box

  /* Smooth the font a little bit, it's a
   *bit too bold on retina screens
  -webkit-font-smoothing: antialiased

/* ---------------------------------------------------
/* Make a nice input form with rounded corners and hover
 *animations
/* ---------------------------------------------------

input
  padding: 10px 16px
  margin: 2px 0
  box-sizing: border-box
  border: 2px solid #dabebe
  border-radius: 6px
  background: #fffff4
  color: #3a1616
  font-size: 16px
  -webkit-transition: 0.5s
  transition: 0.5s
  outline: none

  &:focus
    border: 2px solid #3a1616

/* ---------------------------------------
/* The button is very similar to the input
/* ---------------------------------------

.button
  background-color: #fffff4
  border: none
  color: black
  padding: 6px 14px
  text-align: center
  text-decoration: none
  display: inline-block
  font-size: 16px
  margin: 4px 2px
  transition-duration: 0.4s
  cursor: pointer
  border: 2px solid #3a1616
  border-radius: 6px

  &:hover
    background-color: #3a1616
    color: white

/* -----------------------------------------------
/* Various classes for messages of different kinds
/* -----------------------------------------------

.isa_info, .isa_success, .isa_warning, .isa_error
  width: 90%
  margin: 10px 0px
  padding: 12px

.isa_info
  color: #00529b
  background-color: #bde5f8

.isa_success
  color: #4f8a10
  background-color: #dff2bf

.isa_warning
  color: #9f6000
  background-color: #feefb3

.isa_error
  color: #d8000c
  background-color: #ffd2d2

h1, h2, h3
  line-height: 1.2
  font-family: "Lora"

img
  width: 500px
  max-width: 100%
  border-radius: 10px
  text-align: center

/* ---------------------------------------------
/* Bold hover animations on links and clickables
/* ---------------------------------------------

a
  cursor: pointer
  color: #217ab7
  line-height: inherit
  transition: .14s

  &:hover
    color: white
    background-color: #3297d3

  &:visited
    color: #43458b
    border-color: #43458b

    &:hover
      color: white
      background-color: #9251ac

pre
  font-family: "Inconsolata", monospace

\::selection
  color: white
  background: #ff4081