@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: 4vw

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

@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

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

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

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