whooshy/public/stylesheets/sass/style.sass

@import vars
@import classes
@import mixins

@media (min-device-width: 320px)
  html
    font-size: 4.5vw

@media (min-device-width: 481px)
  html
    font-size: 4vw

@media (min-device-width: 641px)
  html
    font-size: 2.5vw

@media (min-device-width: 961px)
  html
    font-size: 2.2vw

@media (min-device-width: 1025px)
  html
    font-size: 2vw

@media (min-device-width: 1281px)
  html
    font-size: 1.5vw

body
  background-color: $primary
  color: $primarySurface
  font-family: Arial, sans-serif

button
  @include default-element
  font-size: 1.2rem
  padding: 0.7rem
  transition-duration: 0.2s
  background-color: $secondary

button:hover
  background-color: darken($secondary, 2%)
  cursor: pointer

button:active
  background-color: lighten($secondary, 15%)

input
  @include default-element
  font-size: 1.2rem
  background-color: lighten($primary, 15%)
  padding: 0.7rem

textarea
  background-color: lighten($primary, 15%)

a
  color: $secondary

mark
  background-color: $secondary
  color: $primarySurface

::-webkit-scrollbar
  width: 12px
  height: 12px

::-webkit-scrollbar-thumb
  background: darken($secondary, 5)
  transition-duration: 0.2s

::-webkit-scrollbar-thumb:hover
  background: $secondary

::-webkit-scrollbar-track
  background: lighten($primary, 5)