@use 'fonts.css'
:root
  --bulma-radius: 0
  --bulma-radius-medium: 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 #000

.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
  font-weight: lighter !important
  text-wrap: balance
 
.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: .4rem
p
  hyphens: auto
.content
  padding: 3rem 3rem 1rem .75rem;
  ul
    list-style: square;
.container-documents
  margin-top: 2rem
  padding-bottom: 5rem
  border-bottom: 1px solid var(--bulma-border)
  .buttons
    justify-content: center
    gap: 2rem
.button
  border: 0
  border-bottom: 1px solid var(--bulma-body-color)
  box-shadow: none
  .icon
    display: inline-block
    stroke: var(--bulma-body-color)
    position: relative
    bottom: 2px
    &:last-child:not(:first-child)
      margin-inline-start: 10px
    &,
    svg
      width: 16px
      height: 16px
  &.is-medium
    span + span
      margin-left: 20px
    .icon
      bottom: 4px
      &,
      svg
        width: 18px
        height: 18px
footer a
  color: rgb(106, 110, 138);
