@charset "utf-8"

@font-face
  font-family: 'Roboto'
  font-style: normal
  font-weight: 400
  src: local('Roboto')
  src: local('Roboto-Regular')
  src: url(/theme/fonts/Roboto/Roboto-Regular.woff2) format('woff2')
  font-display: fallback

@font-face
  font-family: 'Roboto'
  font-style: italic
  font-weight: 400
  src: local('Roboto Italic')
  src: local('Roboto-Italic')
  src: url(/theme/fonts/Roboto/Roboto-Italic.woff2) format('woff2')
  font-display: fallback

@font-face
  font-family: 'Roboto'
  font-style: normal
  font-weight: 700
  src: local('Roboto Bold')
  src: local('Roboto-Bold')
  src: url(/theme/fonts/Roboto/Roboto-Bold.woff2) format('woff2')
  font-display: fallback

@font-face
  font-family: 'Quicksand'
  font-style: normal
  font-weight: 500
  src: local('Quicksand Medium')
  src: local('Quicksand-Medium')
  src: url(/theme/fonts/Quicksand/Quicksand-Medium.woff2) format('woff2')
  font-display: fallback

@font-face
  font-family: 'Quicksand'
  font-style: normal
  font-weight: 300
  src: local('Quicksand Light')
  src: local('Quicksand-Light')
  src: url(/theme/fonts/Quicksand/Quicksand-Light.woff2) format('woff2')
  font-display: fallback

@font-face
  font-family: 'Ubuntu Mono'
  font-style: normal
  font-weight: 400
  src: local('Ubuntu Mono')
  src: local('UbuntuMono-Regular')
  src: url(/theme/fonts/Ubuntu_Mono/UbuntuMono-Regular.woff2) format('woff2')
  font-display: fallback

@font-face
  font-family: 'Ubuntu Mono'
  font-style: normal
  font-weight: 700
  src: local('Ubuntu Mono Bold')
  src: local('UbuntuMono-Bold')
  src: url(/theme/fonts/Ubuntu_Mono/UbuntuMono-Bold.woff2) format('woff2')
  font-display: fallback

$family-sans-serif: 'Roboto', Arial, Helvetica, sans-serif
$family-serif: 'Quicksand', Times, serif
$family-monospace: 'ubuntu mono', hack
$family-primary: $family-sans-serif
$family-secondary: $family-serif

$primary-background: #222225
$primary-color: #FFFFEE
$secondary-background: #333336
$secondary-color: #FFFFEE
$primary: $primary-background
$primary-invert: $primary-color

$nav-background: $secondary-background
$nav-primary: $secondary-color

$navbar-dropdown-background-color: $nav-background
$navbar-dropdown-arrow: $nav-primary
$navbar-background-color: $nav-background
$navbar-item-color: $nav-primary
$navbar-item-hover-color: $primary-color
$navbar-item-hover-background-color: $primary-background
$navbar-dropdown-item-active-color: $primary-color
$navbar-dropdown-item-active-background-color: $primary-background
$navbar-dropdown-item-hover-color: $primary-color
$navbar-dropdown-item-hover-background-color: $primary-background

$title-family: $family-serif
$subtitle-family: $family-serif

$footer-background-color: $nav-background
$footer-color: $nav-primary

$code: #AAEEAA
$code-background: #333333AA
$pre: #AAEEAA
$pre-background: #333333AA

/*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */
@import "sass/utilities/_all"
@import "sass/base/_all"
@import "sass/elements/_all"
@import "sass/form/_all"
@import "sass/components/_all"
@import "sass/grid/_all"
@import "sass/layout/_all"


html, body
  scrollbar-width: thin
  scrollbar-color: #000000 #222222
  background: $primary-background
  color: $primary-color

pre, .code
  font-family: $family-monospace

.avatar
  margin: inherit

.column.is-three-fifths
  margin: auto

a.article-title
  color: $secondary-color
  &:hover
    color: $primary-color
    text-decoration: underline

article.content
  padding: 1rem
  border: 1px solid $primary-background
  border-radius: 1rem
  &:hover
    border: 1px solid $secondary-background
    background: $secondary-background
    box-shadow: inset 0 0 3rem 2rem $primary-background

.title, h1, h2, h1 a, h2 a
  font-weight: 300

.title strong
  font-weight: 500

.subtitle, h1 small, h2 small
  color: $secondary-color
  font-weight: 500

.tag:not(body).is-primary
  border: 1px solid
  background: transparent

.tag:not(body)
  color: $primary-background
  background: $primary-color

.tag:not(body).is-primary
  color: $primary-color
  border: 1px solid
  background: transparent

.input
  color: $primary-color
  border: 1px solid
  background: transparent
  &:hover
    color: $primary-color
    border: 1px solid
    background: $secondary-background
  &:focus
    color: $primary-color
    border: 1px solid
    background: transparent
  &:active
    color: $primary-color
    border: 1px solid
    background: $secondary-background
  @include placeholder
    color: $primary-color

.button.is-primary
  color: $primary-color
  border: 1px solid
  background: transparent
  &:hover
    color: $primary-color
    border: 1px solid
    background: $secondary-background
  &:focus
    color: $primary-color
    border: 1px solid
    background: transparent

#subscription
  max-width: max-content
  border: 2px solid
  border-radius: 1rem
  margin: 2rem auto 0px auto
  padding: 1rem

.button.article-image
  float: right

.blog-content
  font-size: 1.2rem
  p
    img
      width: 100%

.navbar-item
  img
    max-height: 3rem
    width: auto

.bar-top
  height: 2px
  width: 100vw
  background-image: linear-gradient(to right, #ed5017 , #f68f1d)

.bar-bottom
  height: 2px
  width: 100vw
  background-image: linear-gradient(to right, #18bfdc , #023d6b)

.footer
  padding-bottom: 3rem

.table
  background: transparent

.table th
  color: $primary-color

.content table thead th
  color: $primary-color

strong
  color: $primary-color

a
  color: $primary-color
  &:hover
    color: $primary-color
    text-decoration: underline

.content a, table a
  text-decoration: underline dotted
  &:hover
    text-decoration: underline

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6
  color: $primary-color
  font-family: $title-family

.content blockquote
  border-left: 0.25rem wavy $primary-color
  background: #2228
  background-opacity: 0.4
  padding: 1rem

blockquote p
  padding: 0

hr
  background: $primary-color

.pagination-previous, .pagination-next, .pagination-link
  color: $primary-color
  font-family: $title-family
  border-color: $primary-color
  &:hover
    color: $primary-color
    text-decoration: underline
  &:focus
    border-color: $primary-color

p.readtime
  opacity: 0.8
  font-family: $title-family

.share
  text-align: right

#feedback
  font-family: $title-family
  a
    text-decoration: underline dotted
    &:hover
      text-decoration: underline
  span, i
    display: none

.button.is-text
  color: $primary-color

// Scrollbar Width
::-webkit-scrollbar
  width: 6px

// Scrollbar Track
::-webkit-scrollbar-track
  background: #222

// Scrollbar Handle
::-webkit-scrollbar-thumb
  background: #000