$color-bg: #fffff5
$color-text: #000
$color-text--light: lighten($color-text, 20%)
$color-selection: #a4aeb6
$gap-l: 2.5rem
$gap-m: 1rem

body
  margin: $gap-l auto
  max-width: 700px
  line-height: 1.6
  background: $color-bg
  color: $color-text
  padding-inline: $gap-m
  line-height: 28px
  font-family: "Lora"
  font-weight: 500
  box-sizing: border-box
  font-display: swap
  &::selection
    color: $color-bg
    background: $color-selection

.timestamp
  color: $color-text--light
  
/* ---------------------------------------------------
/* 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
  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