:root{
  --mastodon-comment-indent: 40px;
  --mastodon-comment-border-radius: 3px;
  
  --mastodon-comment-bg-color: rgba(0, 0, 0, 0.2);
  --mastodon-comment-border-color: rgba(0, 0, 0, 0.4);
  --mastodon-comment-user-color: #939393;
  
  --mastodon-comment-status--inactive: #5d686f;
  --mastodon-comment-status-replies--active: #448aff;
  --mastodon-comment-status-favourite--active: #ff9100;
  --mastodon-comment-status-reblog--active: #00c853;
}

@media only screen and (max-width: 1024px){
  :root{
    --mastodon-comment-indent: 20px;
  }
}

@media only screen and (max-width: 640px){
  :root{
    --mastodon-comment-indent: 0px;
  }
}

.mastodon-comment{
  background-color: var(--mastodon-comment-bg-color);
  border-radius: var(--mastodon-comment-border-radius);
  border: 1px var(--mastodon-comment-border-color) solid;
  padding: 20px;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
}

.mastodon-comment p{
  margin-bottom: 0px;
}

.mastodon-comment .content{
  margin: 15px 20px;
}

.mastodon-comment .content p:first-child{
  margin-top: 0;
  margin-bottom: 0;
}

.mastodon-comment .attachments{
  max-width: 0px 10px;
}

.mastodon-comment .attachments > *{
  max-width: 0px 10px;
}

.mastodon-comment .author{
  padding-top: 0;
  display: flex;
}

.mastodon-comment .author a{
  text-decoration: none;
}

.mastodon-comment .author .avatar img{
  margin-right: 1rem;
  min-width: 60px;
  border-radius: 5px;
}

.mastodon-comment .author .details{
  display: flex;
  flex-direction: column;
}

.mastodon-comment .author .details .name{
  font-weight: bold;
}

.mastodon-comment .author .details .user{
  color: var(--mastodon-comment-user-color);
}

.mastodon-comment .author .date{
  margin-left: auto;
  font-size: small;
}

.mastodon-comment .status > div{
  display: inline-block;
  margin-right: 15px;
}

.mastodon-comment .status a{
  color: var(--mastodon-comment-status--inactive);
  text-decoration: none;
}

.mastodon-comment .status .twemoji.replies.active a{
  color: var(--mastodon-comment-status-replies--active);
}

.mastodon-comment .status .twemoji.reblogs.active a{
  color: var(--mastodon-comment-status-reblog--active);
}

.mastodon-comment .status .twemoji.favourites.active a{
  color: var(--mastodon-comment-status-favourite--active);
}

.mastodon-comment .status svg{
  margin-right: 0.2rem;
  vertical-align: middle;
}