/* ==========================================================================
   Expend Basic style settings
   ========================================================================== */

/*
 * Set up the html
 *
 * 1. Makes sue that some fonts are better rendered
 */

html
  -webkit-font-smoothing: antialiased /* 2 */
  -moz-osx-font-smoothing: grayscale
  text-rendering: optimizeLegibility

  +respond-to-width(700)
    font-size: 18px

/*
 * Set up the body
 *
 * 1. Set font to lining figures
 */

body
  position: relative
  margin: 0

  font-family: $fontFamily
  line-height: 1.6

  font-feature-settings: 'lnum' /* 1 */

/*
 * Set default settings for all elements
 *
 * 1. Default selection styling
 *
 */
*
  ::selection /* 2 */
    background: $lightGrey
    color: white


/*
 * Set default styling for input and textarea
 *
 * 1. Set font because else the agent will overrule them with an ugly font
 */
input, textarea
  font-family: $fontFamily /* 1 */

/*
 * Set default styling for a button
 *
 */
.button
  display: inline-block
  padding: 13px 20px
  background-color: transparent
  border: 1px solid $lightGrey
  border-radius: 3px
  text-decoration: none
  font-size: 0.9rem
  line-height: 1.2
  font-weight: medium()
  color: $lightGrey
  transition: border 0.3s, color 0.3s

  .arrow
    display: inline-block
    margin-left: 65px
    +sprite(470px 56px, 19px, 13px)
    transform: translate3d(0,0,0)
    transition: transform 0.3s

    +respond-to-width(500)
      margin-left: 30px

  &:hover
    color: white
    border-color: white
    .arrow
      transform: translate3d(5px, 0, 0)

.line-background
  position: fixed
  z-index: 1
  left: 0
  top: 0
  width: 100%
  height: 100vh
  pointer-events: none

  .grid-col
    height: 100vh
    border-right: 1px solid rgba($lightGrey, 0.2)

    &:first-child
      border-left: 1px solid rgba($lightGrey, 0.2)

  +respond-to-width(700)
    display: none