CalendarPage {
  width: 100%

  display: grid
  justify-content: center
  align-content: start
  justify-items: center

  overflow-y: scroll
}


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

  padding: 0
  margin: 0
  margin-bottom: 4rem

  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

    display: grid
    justify-content: space-between
    grid-auto-flow: column

    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
        }
      }

    }

    div.actions {
      display: grid
      justify-content: space-between
      grid-auto-flow: column
      grid-gap: 1rem
    }
  }

  div.months {
    display: flex

    div.month {
      margin-right: 20px

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

      div.Marama {
      }
    }
  }

  /* @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; }} */
}



CalendarEvents {
  width: 50rem
  margin-right: 6rem

  div {
    width: 50rem

    div.Message {
      width: 50rem
      section.bottom { display: none }
    }
  }
}