// linear-gradient(to right,#FF416C,#FF4B2B)
$darkest: #14161D
$dark-bg: #434756
$selection-color: #ffffff
$selection-bg-color: #6273D8
$transition: cubic-bezier(0.4, 0.0, 0.2, 1.0)

@font-face
    font-family: 'ffad-matro-regular'
    src: url('/ffad-matro/ffad_matro-webfont.eot')
    src: url('/ffad-matro/ffad_matro-webfont.eot?#iefix') format('embedded-opentype'), url('/ffad-matro/ffad_matro-webfont.woff2') format('woff2'), url('/ffad-matro/ffad_matro-webfont.woff') format('woff'), url('/ffad-matro/ffad_matro-webfont.ttf') format('truetype'), url('/ffad-matro/ffad_matro-webfont.svg#ffad_matroregular') format('svg')
    font-weight: normal
    font-style: normal

::selection
    color: $selection-color
    background-color: $selection-bg-color
body
  font-family: "Rubik", sans-serif
  margin: 0px
  width: 100%
  display: flex
  flex-direction: column
  align-items: center
a
  text-decoration: none
  color: $darkest
h1
  margin: 0px
.header
  width: 1000px
  margin: 40px
  max-width: calc(100% - 120px)
  align-items: center
  display: flex
  .kh-logo
    cursor: pointer
    width: 50px
    height: 50px
    display: block
    // margin: 30px
    margin-right: auto
  .nav-bar
    font-family: 'ffad-matro-regular'
    display: flex
    justify-content: flex-end
    position: relative
    user-select: none
    .nav-item
      cursor: pointer
      outline: none
      .text
        padding: 5px 10px
        white-space: nowrap
        background-image: linear-gradient(to right,#DA4453,#89216B)
        -webkit-background-clip: text
        -webkit-text-fill-color: transparent
        transition: 0.2s $transition all
        font-size: 16px
        filter: grayscale(100%)
        opacity: 0.6
        &:hover, &:focus
          opacity: 1
      .text:active, &.current > .text, .text.current
        filter: none
        opacity: 1
      .submenu
        opacity: 0
        pointer-events: none
        position: absolute
        display: flex
        transition: 0.2s $transition all
        // transform: translateY(-10px)
        .text
          transform: scale(0.7)
          font-size: 14px
      &:hover .submenu
        transform: none
        opacity: 1
        pointer-events: all
        .text
          transform: scale(1)

.social-media
  float: left
  a
    display: block
    cursor: pointer
    position: relative
    user-select: none
    float: left
    svg
      padding: 6px
      display: block
      pointer-events: none
      width: 18px
      height: 18px
      fill: #494949
      transition: 0.2s $transition all
      opacity: 0.6
    &:hover svg
      opacity: 1
.canvas-container
    position: fixed
    bottom: -130px
    left: 0px
    z-index: -1
    width: 100%
    // transform: rotate(180deg)
    transition: 1s $transition opacity
    &.hidden
      opacity: 0
    canvas
      display: block
.pages
  .page
    width: 100%
    left: 0px
    align-items: center
    flex-direction: column
    transition: 1s $transition all
    display: none
    opacity: 0
    &.visible
      display: flex
      opacity: 1
    .title
      font-size: 36px
      font-family: 'ffad-matro-regular'
      background-image: linear-gradient(to right,#55e5fd,#7155fe,#f31d9e)
      -webkit-background-clip: text
      -webkit-text-fill-color: transparent
