$orange: #e75012

html
  margin: 0
  padding: 0

body
  margin: 0
  padding: 0
  width: 100%
  height: 100vh
  background: black
  font-family: avenir, sans-serif
  font-size: 18px

a
  color: white
  text-decoration: none
  transition: all ease 0.3s
  &:hover
    color: $orange

#container
  background: url('../images/background.jpg') no-repeat
  background-size: contain
  background-position: right top
  width: 100%
  height: 97vh

.logo
  width: 15%
  position: absolute
  top: 150px
  left: 100px

.main
  display: flex
  flex-direction: column
  color: white
  position: absolute
  right: 700px
  top: 400px
  .button
    outline: 0
    align-self: flex-end
    padding: 8px 20px
    border: 2px solid $orange
    color: $orange
    background: transparentize(black, 1)
    font-size: 15pt
    transition: all ease 0.4s
    &:hover
      border: 2px solid white
      color: white
      cursor: pointer

.footer
  width: 100%
  color: white
  position: absolute
  bottom: 15px
  display: flex
  justify-content: center
  .straffer
    color: white
    position: fixed
    margin: 0
    right: 20px
    bottom: 20px
    padding: 0
    a
      color: white
      span
        background-image: url("/images/straffer.svg")
        background-size: contain
        background-position: left center
        background-repeat: no-repeat
        display: block
        height: 30px
        margin-top: 2px
@import "responsive"