@use "sass:color"

//$primary-color: #3399ff
$primary-color: cornflowerblue
$primary-color-highlight: color.adjust($primary-color, $lightness: -10%)

body
  background: #eee

a
  color: $primary-color
  transition: color 225ms ease-in-out
  &:hover
    color: $primary-color-highlight

input[type=submit],
button
  background: $primary-color
  color: #eee
  border-radius: 8px
  transition: all 225ms ease-in-out
  &:hover
    background: $primary-color-highlight
    color: white

#wrapper
  background: white
  padding: 1rem 2rem
  border-radius: 8px

#main-nav
  margin-bottom: 15px
  background: $primary-color
  border-bottom: 1px solid #eee

  ul
    background: none

  a
    color: #eee
    font-weight: bold
    &:hover
      color: white

h1.invalid
  color: red