CalendarPage {
  width: 100%

  display: grid
  justify-content: center
}


Calendar {
  font-family: 'input_mono_regular', monospace
  text-transform: capitalize

  padding: 0
  margin: 0

  section {
    top: 50%
    margin: 0 auto
    user-select: none
    -webkit-user-select: none
    -ms-user-select: none
    -webkit-transform: translateY(-50%)
    -ms-transform: translateY(-50%)
    transform: translateY(-50%)
    text-align: center
  }

  div.header { 
    margin: 40px 0
    text-align: left
    align-content: flex-start

    div.year { 
      font-size: 40px
      font-weight: bold

      a {
        text-align: center
        color: #000
        width: 30px
        display: inline-block
        margin-left: 10px

        :hover {
          color: #ffffff
          background: #000
          cursor: pointer
          text-decoration: none
        }
      }
    }

    p.percentage {
      font-size: 20px
      color: #8b8b8b
    }
  }

  div.months {
    display: flex

    div.CalendarMonth {
      margin-right: 20px
    }
  }

  /* @media only screen and (min-width: 1440px) */
  /* { section { width: 1440px; }} */

  /* @media only screen and (max-width: 1440px) */
  /* { section { width: 720px; }} */

  /* @media only screen and (max-width: 720px) */
  /* { section { width: 360px; }} */
}


CalendarMonth {
  --day-width: 12px
  --day-border-radius: 2px
  --day-gap: 2px

  width: calc(7 * var(--day-width) +  6 * var(--day-gap))
  /* max of 6 weeks + day labels, with gaps between each */

  div.month-name {
    font-size: 20px
    font-weight: bold
    text-align: left
    margin-bottom: 5px
  }

  div.days {
    grid-gap: var(--day-gap)
    justify-content: start
    align-content: start

    div.CalendarDay {}
  }
}

CalendarDay {
  width: var(--day-width)
  height: var(--day-width)

  border-radius: var(--day-border-radius)

  -past {
    background: hsl(0, 0%, 20%)
  }

  -future {
    background: hsl(0, 0%, 80%)
  }
}

CalendarDayName {
  color: hsl(0, 0%, 40%)
  font-family: arial
  font-size: calc(var(--day-width) - 3px)
  /* line-height: calc(var(--day-width) - 2px) */

  width: var(--day-width)
  height: var(--day-width)

  display: flex
  align-items: center
  justify-content: center
}