/* latin */ @font-face

font-family: 'Nerko One'
font-style: normal
font-weight: 400
font-display: swap
src: url(https://fonts.gstatic.com/s/nerkoone/v1/m8JQjfZSc7OXlB3ZMOjDd5RA.woff2) format('woff2')
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

@font-face

font-family: 'Sansita Swashed'
font-style: normal
font-weight: 500
font-display: swap
src: url(https://fonts.gstatic.com/s/sansitaswashed/v1/BXR8vFfZifTZgFlDDLgNkBydPKTt3pVCeYWqJnZSW4ZpXT0few.woff2) format('woff2')
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

@font-face

font-family: 'Comfortaa'
font-style: normal
font-weight: 600
font-display: swap
src: url(https://fonts.gstatic.com/s/comfortaa/v29/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4bbLDrMfIA.woff2) format('woff2')
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

body

background: $brand_sec
color: $brand_main
margin: 11vh 0 0 0
padding: 0
display: flex
flex-direction: column
justify-content: space-between
min-height: calc( 100vh - 13vh )
font-family: sans-serif, Arial, Helvetica
@include relative-font-size(1.07)

main

flex-grow: 1

p

line-height: 1.5
// word-spacing: 1.1
// @include relative-font-size(1.05)

h1, h2, h3, h4, h5, h6

font-family: 'Sansita Swashed', sans-serif

h1

color: $brand_light
@include relative-font-size(2.7)

h2

@include relative-font-size(2.4)

h3

@include relative-font-size(2.1)

h4

@include relative-font-size(1.9)

h5

@include relative-font-size(1.7)

h6

@include relative-font-size(1.5)

@include media-query($on-phone)

h1
  @include relative-font-size(2.2)

h2
  @include relative-font-size(2.05)

h3
  @include relative-font-size(1.9)

h4
  @include relative-font-size(1.75)

h5
  @include relative-font-size(1.6)

h6
  @include relative-font-size(1.5)

a

text-decoration: none
color: $brand_main
transition: .3s ease all
&:hover
  color: $brand_light
  transition: .3s ease all

.svg-icon

width: 1.3rem
height: 1.3rem

blockquote

color: darken($brand_main, 10%)
font-style: italic
border-left: 5px solid
margin-left: 0
padding-left: 3rem

/**

* Images
*/

img

max-width: 100%
vertical-align: middle

/**

* Figures
*/

figure

margin: 0
& > img
  display: block

figcaption

@include relative-font-size(.5)

/**

* Lists
*/

ul, ol

margin-left: $spacing-unit

li

> ul,
> ol
  margin-bottom: 0

/**

* Code formatting
*/

pre, code

color: $brand_sec
// @include relative-font-size(0.9375)

*:not(pre) > code

padding: 1px 5px
border-radius: 3px
color: #ffc38b
background-color: lighten($brand_sec, 10%)
margin: 0 5px

.highlight

> pre
  width: 100%
  overflow: hidden
  border-radius: 7px
  position: relative
  background-color: $brand_light

  // code language badge
  &:before
    content: attr(data-lang)
    color: #fff
    background-color: #ff4e00
    padding: .2rem .5em
    border-radius: 0 7px
    text-transform: uppercase
    text-align: center
    min-width: 32px
    min-height: 15px
    display: inline-block
    position: absolute
    right: 0

  > code
    box-sizing: border-box
    width: 100%
    overflow: auto
    display: inline-block
    padding: 20px!important
    background-color: transparent
    border: 0

  table, pre
    margin-bottom: 0

    .gutter, .code
      padding: 6px
      border: none

/**

* Tables
*/

table

margin-bottom: $spacing-unit
width: 100%
text-align: $table-text-align
color: darken($brand_main, 10%)
border-collapse: collapse

tr
  &:nth-child(even)
    background-color: lighten($brand_sec, 6%)

th,
td
  padding: ($spacing-unit / 3) ($spacing-unit / 2)

th
  background-color: lighten($brand_sec, 3%)
  border: 1px solid darken($brand_main, 4%)
  border-bottom-color: darken($brand_main, 12%)

td
  border: 1px solid $brand_main

// mermaid img.mermaid

background: lighten($brand_sec, 15%)
overflow: hidden
border-radius: 7px
padding: 7px 0 7px 0