$size-small: 500px

@import "font"

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

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

  --tile: 2rem

  color: var(--color-paragraph)
  background: var(--color-background)
  margin: 0 auto
  padding: 0 var(--tile)
  max-width: 800px

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

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)

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

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

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

h1, h2, h3
  text-align: center

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

h3
  border: var(--border-size) var(--border-style) var(--color-highlight)
  // display: inline-block
  margin: calc(var(--tile)*1.5) auto var(--tile)
  padding: var(--tile)

.footer
  font-size: 0.8rem

  @media screen and (max-width: $size-small)
    .cell, .cell.-right
      text-align: center
      flex: 0 0 100%

.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%

  // &::before
  //   content: ""
  //   position: absolute
  //   width: 100%
  //   height: 100%
  //   right: -1rem
  //   bottom: -1rem
  //   background-color: var(--color-highlight)
  //   mask: url(/icons/quote.svg) no-repeat 100px 100px
  //   mask-size: 80px
  //   opacity: .2
  //   transform: rotate(180deg)

// 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; }
.cell.\-center   { text-align: center ;}
.cell.\-6of12    { flex: 0 0 calc(100% * 6 / 12); }

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