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

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

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

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

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

.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