@import "breakpoint-helpers"
@import "colors"
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap')

.header
  overflow: hidden
  background-color: $colorblind-fg
  padding: 15px 10px
  font-family: "Fira Code", monospace
  border-radius: 3px

.header a
  float: left
  color: black
  text-align: center
  padding: 7px 12px
  text-decoration: none
  font-size: 18px
  line-height: 25px
  border-radius: 4px

.header a.name
  font-size: 25px
  font-weight: 600

.header a:hover
  background-color: $colorblind-button-hover
  color: black

.header a:active
  background-color: $colorblind-button-active
  color: white

.header-right
  float: right

@include respond-below(xs)
  .header a
    float: none
    display: block
    text-align: left

  .header-right
    float: none


.page
  background-color: $colorblind-fg
  height: fit-content
  padding: 10px
  margin-top: 10px
  margin-bottom: 10px
  font-family: 'Montserrat', sans-serif
  border-radius: 3px


@include respond-above(md)
  .page
    width: 80%
    margin: 10px auto 10px