$Color_main = #F04F78
$Color_secondary = #4A4A4A

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Nunito:wght@600&family=Raleway:ital,wght@0,300;0,400;1,500&display=swap')

html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
  font-family 'Raleway', sans-serif

html
  scroll-behavior: smooth

body
  background-color transparent


.debug
  outline 1px solid red


.pink
  color $Color_main


*::selection
  color white
  background-color $Color_main


a
  text-decoration none

  &:hover
    text-decoration underline


#navbar
  margin-bottom 65px

  > [_container]
    display flex
    justify-content space-between

  .nav-part
    margin: 0
    padding: 0


#brand
  font-family 'Nunito', sans-serif
  color $Color_main
  font-size 48px
  position relative
  top 30px
  left 95px
  text-decoration none

  img
    position absolute
    height 105px
    width 105px
    top -18px
    left -95px


#links
  display flex
  list-style none
  position relative
  top 56px

  > .active
    a
      font-weight bold


  > li
    margin-left 25px

    a
      font-size 22px
      color $Color_main
      text-decoration none


  .btn-started a
    position relative
    top 0.2em
    border 1px solid $Color_main
    padding 0.7em 1em
    border-radius 5000px
    transition all 0.2s ease-in-out
    text-transform uppercase
    font-size 18px

    &:hover
      background-color $Color_main
      color white


#home-container
  color $Color_secondary
  height calc(100vh - 150px)

  > div
    padding 0


  h1
    font-size clamp(32px, 5vw, 48px)
    margin-bottom 20px


  h2
    font-size clamp(24px, 4vw, 39px)
    margin-bottom 20px
    line-height 1.7em
    font-weight 500


  pre
    font-size 24px
    background-color $Color_secondary

pre
  font-family: 'Fira code', monospace !important

#home-links
  margin-top 25px

  a
    float right
    padding 0.5em 1.5em
    text-transform uppercase
    text-decoration none
    border-radius 5000px
    margin-left 15px
    border 1px solid $Color_secondary
    color $Color_secondary
    transition all 0.2s ease-in-out


  &-started
    background-color $Color_main
    border none !important
    color white !important
    font-size 24px !important


  &-download
    margin-top 0.5em


  &-star
    margin-top 0.5em
    height 2.6em !important

    svg
      height 1.2em
      position relative
      top 0.2em
      margin-right 0.5em


  &-download:hover, &-star:hover
    background-color $Color_secondary
    color white


#logo-bg
  position absolute
  width clamp(300px, 50vw, 600px)
  height clamp(300px, 50vw, 600px)
  background-image url('../../favicon.png')
  background-repeat: no-repeat
  background-size contain
  z-index -1
  opacity 0.3
  transform rotate(-17deg)
  top clamp(0, 20vh, -20%)
  left 40%


#home-why
  color $Color_secondary
  margin 200px 0

  h3
    font-size: clamp(32px, 4vw, 38px) !important


.why-card
  padding 0
  padding-top 4vh

  h4
    text-transform uppercase
    color $Color_main
    font-weight bold
    font-size: clamp(24px, 4vw, 32px)

  p
    font-size: clamp(1em, 3vw, 1.4em)
    font-weight 400

#bottom-links
  width 100%
  display flex
  text-transform uppercase
  font-weight bold
  list-style none

  li
    margin-right 1em


  a
    color $Color_main
    font-size 1em

#credits, #licence
  font-weight lighter

  a
    color $Color_main
    font-size 1em

footer
  margin-top 5em


#doc-nav
  margin-bottom 5em
  position relative
  
  &-inner
    position relative

    &:after
      position absolute
      content ''
      border-right 1px solid alpha($Color_secondary, .3)
      height 100%
      top 0
      right -1em

  .nav-part
    padding: 0
    margin: 0

  h5
    > a
      font-size clamp(.6em, 1.5vw, .9em)
      text-transform uppercase
      color $Color_main

      &:hover
        text-decoration: none

      &.expend:after, &.active:after
        content '<'
        position relative
        margin-left .3em
        top -.1em
  ul
    height auto
    max-height 0
    overflow hidden
    list-style-type none
    transition max-height .5s ease-in-out

    &.expend
      max-height 50vh

    li
      a
        font-size 0.9em
        color $Color_secondary

      a.active
        font-weight bold

code
  box-shadow none !important

#documentation-container, #changelog
  margin-bottom: 4em
  padding 0 1em
  color $Color_secondary
  font-size: clamp(.85em, 2vw, 1em)

  h2, h3, h4, h5, h6
    text-transform uppercase

  h2
    position: relative;
    margin-left: .3em
    color $Color_main
    font-weight: bold;
    font-size: clamp(38px, 4vw, 48px)

    &:before {
      position: relative;
      content '>'
      left: -.3em
      top: -.06em
    }


  h3
    margin-top: .5em
    font-size: clamp(1.5em, 3vw, 2em)

  h4
    margin-top: .5em
    font-size: clamp(1.25em, 3vw, 1.5em)

  h5
    margin-top: .5em
    font-size: clamp(1.1em, 2vw, 1.25em)

  h6
    font-size: clamp(1em, 2vw, 1.1em)

  ul
    margin-left 1em
    
    ::marker 
      color: $Color_secondary
      font-size: 1.2em;

  pre, code
    font-size: clamp(.85em, 2vw, 1em) !important
    margin-top: 1em
    box-shadow none
    opacity: .95

  pre
    position relative
    --lang: ''

    &:before
      content: var(--lang)
      position: absolute;
      top: .5em;
      right: .5em;
      text-transform: uppercase;
      opacity: .8;
      color: #5a659c
      transition opacity .2s ease-in-out

    &:hover:before
      opacity 1

  a
    color: $Color_main !important

  hr
    border-color $Color_secondary !important
    opacity: .5
    margin: 1em auto

    &.big
      margin: 2em auto
  
  table
    tr
      td, th
        border 1px solid alpha($Color_secondary, .5)
        padding.5em

[_alert]
  padding 1em

#contact-page
  color $Color_secondary
  letter-spacing: clamp(2px,.02vw,5px)

  #contact-title
    font-size 56px

  .contact-link
    position relative
    margin-top clamp(4em, 15vh,6em)
    svg
      z-index -1
      opacity .3
      pointer-events: none
      position absolute
      width clamp(100px, 10vw, 200px)
      left 50%
      top 50%
      transform translate(-50%, -50%)

  a
    font-weight 300
    font-size clamp(32px, 5vw, 48px)
    color $Color_main
    text-decoration none  

#contact
  min-height: 60vh

@require 'breakpoints/lg'
@require 'breakpoints/md'