$line-height: 1.15
$size-small: 600px

html
  font-size: 1.25rem
  line-height: $line-height

p, li
  line-height: 1.4

body
  --color-background: #fff8eb
  --color-paragraph: #2d3824
  --color-highlight: #c14508

  --border-style: dashed
  --border-size: 4px
  --link-style: dotted

  --tile: 2rem

  font-size: 1.125rem
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
  color: var(--color-paragraph)
  background: var(--color-background)
  margin: 0 auto
  padding: 0 var(--tile)
  max-width: 800px
  overflow-y: scroll

  @media screen and (max-width: $size-small)
    --border-size: 2px
    --tile: 1rem
    font-size: .9rem

hr
  border: 0
  border-bottom: var(--border-size) var(--border-style) var(--color-highlight)
  margin: var(--tile) auto
  @media screen and (max-width: $size-small)
    margin: calc(var(--tile)*2) calc(var(--tile)*-1)

.center
  text-align: center

p + ol, p + ul
  margin: 0
  > li:first-child
    padding-top: 0

ol, ul
  padding-left: 1.2rem

li
  padding: .3rem 0


ul.no-style
  margin: 0
  padding: 0
  list-style-type: none

  li
    padding: 0
    line-height: $line-height

a, h1, h2, h3
  color: var(--color-highlight)

a
  text-decoration: underline var(--link-style)
  &:hover
    text-decoration: underline

.header .title
  font-size: 2.25rem
  font-weight: 700
  margin: 1.5rem 0

h2
  margin: calc(var(--tile)*1.5) auto

h3
  // display: inline-block
  margin: calc(var(--tile)*1.5) auto var(--tile)

.frame
  border: var(--border-size) var(--border-style) var(--color-highlight)
  padding: var(--tile)

.footer
  font-size: 0.8rem
  padding-bottom: calc(var(--tile)/2)

  @media screen and (max-width: $size-small)
    .cell, .cell.-right
      text-align: center
      flex: 0 0 100%
      padding-bottom: calc(var(--tile)/2)

.flex
  --margin-tile: calc(var(--tile)/2)
  margin: calc(var(--margin-tile) * -1)
  padding: 0
  list-style-type: none
  width: calc(100% + 2 * var(--margin-tile))
  display: flex
  flex-wrap: wrap
  li
    text-align: center
    padding: var(--margin-tile)
    flex: 0 0 50%
    box-sizing: border-box

  img
    max-width: 100%
    width: 40%

  @media screen and (max-width: $size-small)
    margin: 0
    width: 100%
    li
      flex: 0 0 100%

.quote
  border: var(--border-size) var(--border-style) var(--color-highlight)
  padding: var(--tile)
  margin: calc(1.5 * var(--tile)) 0
  position: relative
  text-align: center

  h2
    color: var(--color-paragraph)
    margin: 0

    strong
      color: var(--color-highlight)
      font-size: 130%

.blogDate
  font-style: italic
  font-size: 0.9rem
  display: block
  margin-top: 1.5rem

// Grid

.grid            { display: flex; flex-wrap: wrap; }
.grid.\-middle   { align-items: center; }
.grid.\-bottom   { align-items: end; }
.cell            { flex: 1; box-sizing: border-box; }
.cell.\-left   { text-align: left ;}
.cell.\-right   { text-align: right; }

@import "../../themes/hugo-theme-lowtech/assets/styles/obfuscates"