*
  font-family: sans-serif

h1, h2
  text-align: center

main
  display: grid
  grid-template-columns: repeat(2, 1fr)
  grid-gap: 2em
  padding: 0 2em

.comtodon
  .status
    position: relative
  .status-content, .reply-main
    margin-bottom: .5em
  .status-content
    border-left: 2px solid #777
    &.sensitive
      content: 'Sensitive'
  .replies
    margin-left: 1em
  p
    margin: .1em
  a
    text-decoration: none
    color: #777
  .emoji
    height: 1em
  .author
    display: grid
    grid-template-columns: 3.3em auto
    grid-template-rows: repeat(3, 1em)
    grid-gap: .1em
    .avatar
      border-radius: 20%
      grid-area: 1 / 1 / 4 / 1
      height: 100%
    .name
      color: black
      font-weight: bold
    .acct:before
      content: '@'
  .date
    float: right
  .reply-main
    display: inline-block
    color: white
    background-color: #777
    border-radius: .5em
    padding: .1em .3em
    &:after
      content: '✉'
      margin-left: .5em
  .reply
    visibility: hidden
    position: absolute
    right: .1em
    top: 2em
    &:after
      content: '✉'
      visibility: visible
      display: block
      position: absolute
      right: 0
      bottom: 0
      color: white
      background-color: #777
      border-radius: .5em
      font-size: .8em
      padding: .1em .3em