@use 'fonts.css'
:root
  --bulma-radius: 0
html
  scroll-behavior: smooth
body
  font-family: 'Source Sans 3', sans-serif
.hero
  background-image: url("../images/sandeep-s1nDVsVgDVQ-unsplash.jpg")
  background-size: cover
  background-position: center
.hero-text
  font-size: 200%
  background-color: rgba(31, 34, 41, 0.5)
  padding: 1.5rem
  margin: 0 -1.5rem
  p,
  h1
    color: #fff
  @media screen and (min-width:1024px)
    padding: 48px
    margin: 0 -48px
img
  &.image-screenshot
    border: 1px solid #999

.svg-icon.svg-arrow-down
  width: 80px
  display: block
  margin: 0 auto
  svg
    width: 80px
    stroke: #fff
body
  position: static
h1, h2
  font-family: 'Source Code Pro', monospace
.hero-body
  @media screen and (min-width:1024px)
    h1
      font-size: 200%
    .subtitle
      font-size: 120%
h2
  border-bottom: 1px solid var(--bulma-body-color)
  padding-bottom: .5714em
.button
  border: 0
  border-bottom: 1px solid var(--bulma-body-color)
  box-shadow: none
  span + span
    margin-left: 10px
  .icon
    display: inline-block
    stroke: var(--bulma-body-color)
    position: relative
    bottom: 2px
    &,
    svg
      width: 16px
      height: 16px
