.design
  &,
  & *
    font-family: $font-design

.style
  &,
  & *
    font-family: $font-style
    font-size: 1.5em

code,
pre,
.code
  &,
  & *
    font-family: $font-code

.glow
  color: $text-l
  text-shadow: 0 0 4px rgba($color: $text-l, $alpha: 0.2)

.cursor
  height: 3vh
  width: 3vh
  min-height: 20px
  min-width: 20px
  max-height: 30px
  max-width: 30px
  background-color: $bg
  opacity: 0.5
  border: 0.5px solid $primary-l2
  border-radius: 50%
  box-shadow: 0 0 5px $primary-l2
  position: fixed
  transform: translate(-50%, -50%)
  z-index: 100
  pointer-events: none
  transition: opacity 0.2s ease

  div
    height: 100%
    width: 100%
    box-shadow: inset 0 0 5px $primary-l2
    border-radius: 50%

  &.expand
    animation: cursorexpand 0.4s ease forwards

.link,
.hover-link:hover
  &,
  & *
    color: $primary-l1 !important
    font-weight: 100
    text-shadow: 0 0 1px $primary-d2
    transition: color 0.2s ease

.shadow
  width: 25%
  height: 200%
  background-color: rgba($color: $text-l, $alpha: 0.2)
  position: absolute
  top: -50%
  transform: rotateZ(30deg)
  transform-origin: top
  z-index: 4

.wave
  &-top,
  &-bottom
    position: absolute
    left: 0
    width: 100%
    overflow: hidden
    line-height: 0

    svg
      position: relative
      display: block
      height: 100px

      .shape-fill
        fill: $text-d

      @include lg
        height: 60px

      @include sm
        height: 30px

  &-top
    top: 0

  &-bottom
    bottom: 0

.quote
  padding: 20px 10%
  min-height: 100vh
  display: flex
  align-items: center
  justify-content: center
  position: relative

  .cursor
    position: absolute
    top: 50px
    left: 50px
    height: 250px
    width: 250px
    max-height: 250px
    max-width: 250px
    z-index: -1

    &._
      top: auto
      left: auto
      right: -50px
      bottom: -75px
      height: 125px
      width: 125px

  .content
    min-width: map-get($breakpoints, 'md') - 10px
    display: flex
    align-items: center
    justify-content: center
    position: relative
    padding-bottom: 40px

    q
      color: $text-l
      font-size: 1.75rem
      text-shadow: 0 0 4px rgba($color: $text-l, $alpha: 0.2)

    small
      font-size: 0.95rem
      position: absolute
      right: 2px
      bottom: 2px
      white-space: pre-line

    @include md
      min-width: map-get($breakpoints, 'sm') - 10px

    @include sm
      min-width: 90vw

  .wave
    &-top svg
      width: calc(100% + 1.3px)

    &-bottom svg
      width: calc(150% + 1.3px)

.card
  background-color: $bg
  margin: 30px 0
  position: relative
  overflow: hidden
  border-radius: 36px
  box-shadow: 0 0 12px $text-d

  a,
  & > div
    display: block
    padding: 30px 30px 40px

  h3
    color: $text-l
    text-shadow: 0 0 8px rgba($color: $primary-l2, $alpha: 0.5)

  .author
    padding: 15px 20px
    position: absolute
    right: 0
    bottom: 0
    border-radius: 36px 0 36px 0

  .snippet
    margin: 10px 0

.float
  display: inline-block
  padding: 20px 40px
  background-color: $bg
  border-radius: 36px
  box-shadow: 0 0 8px $primary-l1

  &.design
    color: $text-l
    text-shadow: 0 0 6px rgba($color: $primary-l2, $alpha: 0.5)

.flex
  display: flex
  align-items: center
  justify-content: space-between

  .author
    margin: 30px 0 20px

    &.float
      padding: 15px 20px
      border-radius: 0 36px 36px 0

      @include md
        margin-top: 0
        align-self: flex-start

  .float
    border-radius: 36px 0 0 36px

    &.shrunk
      padding: 10px 15px

    @include md
      margin-top: 30px
      align-self: flex-end

  @include md
    flex-direction: column
    align-items: flex-start

.fadein
  animation: fadein 4s linear infinite alternate

.search
  margin: 30px 0 10px

  input
    padding: 10px 15px
    background-color: $bg
    border: 0
    border-radius: 36px
    box-shadow: 0 0 4px $bg
    transition: box-shadow 0.4s ease
    outline: none

    &:focus
      box-shadow: 0 0 8px $text-d

@import 'loading'
