$primary-color: #ff3300
$primary-color-dark: darken($primary-color, 10%)

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap')
html,
body
  width: 100%
  height: 100%
  margin: 0
  padding: 0

body
  height: auto
  min-height: 100%
  box-sizing: border-box
  padding-top: 80px
  padding-bottom: 100px
  background: #eee
  font-family: "Roboto", sans-serif
  font-optical-sizing: auto

a
  color: $primary-color
  transition: color 180ms ease-in-out
  &:hover
    color: $primary-color-dark

button.button-primary,
input[type=button].button-primary,
input[type=submit].button-primary
  background: $primary-color
  transition: background 180ms ease-in-out
  &:hover
    background: $primary-color-dark

textarea
  max-width: 100%
  min-width: 100%
  height: 100px


form select[multiple]
  min-height: 100px

table
  border: 1px solid #ddd
  border-radius: 8px
  border-spacing: 0
  overflow: hidden

table th,
table td,
table th:first-child,
table td:first-child
  border: none
  padding: 7px 12px

table thead tr
  border-radius: 8px 8px 0 0
  &:last-child
    border-radius: 0 0 8px 8px

table thead tr,
table tr:nth-child(even)
  background: #eee

table tbody tr
  transition: background 180ms ease-in-out
  &:hover
    background: #d8d8d8

.container
  max-width: 1200px

#main-nav
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 64px
  background: $primary-color
  color: white
  z-index: 20

  ul
    list-style: none
    display: inline-block

    li
      display: inline-block
      margin-left: 15px

  h4
    display: inline-block
    margin-left: 25px
    line-height: 64px

  a
    color: white
    text-decoration: none
    font-size: 2.25rem
    line-height: 64px
    transition: all 200ms ease-in-out
    &:hover
      color: #eee

#main-content
  padding: 15px 25px
  background: white
  border-radius: 8px
  z-index: 10

#main-footer
  position: fixed
  bottom: 0
  left: 0
  width: 100%
  height: 64px

  p
    margin-bottom: 5px
    text-align: center