:root {
  --color-comments: #c1dcff;
  --color-borders: #eaeaea;
  --color-borders-embed: #c8c8c8;
  --color-background: #f5f5f5;
  --color-background-alt: #c1d4c1;
  --color-host: #c1dcff;
  --font-size-repost: 0.8em;
  --font-meta-color: #666;
  --font-meta-size: 1.3em;
  --link-color: #EA5165;
  --link-visited-color: #792274;
  --link-hover-color: #EA5165;;
  --icon-size: 40px;
  --icon-radius: 5em;
  --box-max-width: 600px;
  --box-border-radius: 5px;
}

#comments-container {
  margin: 30px 0;
}

#comments-container a:visited {
  color: var(--link-visited-color);
}

#comments-container a:hover {
  color: var(--link-hover-color);
}

.comment-box {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--color-comments);
  background-color: var(--color-background);
  border-radius: var(--box-border-radius);
  max-width: var(--box-max-width);
  filter: drop-shadow(5px 5px 10px #475c404f);
}

p.comment-text {
  font-size: var(--font-size);
}

.comment-innerbox {
  display: flex;
}

.comment-image {
  max-width: 100%;
}

.comment-meta {
  color: var(--font-meta-color);
  font-size: var(--font-meta-size);
}

.comment-avatar {
  height: var(--icon-size);
  width: var(--icon-size);
  border-radius: var(--icon-radius);
  margin-right: 1em;
}

.comment-replies {
  margin-left: 20px;
  border-left: 0px solid var(--color-comments);
  padding-left: 10px;
}

.comment-box.comment-host {
  border-left: 10px solid var(--color-background-alt);
}

.comment-imagebox {
  display: flex;
}

.comment-metricsbox {
  display: flex;
}

.comment-metricslink {
  color: var(--color-text);
  display: flex;
  gap: 0.7em;
}

.comment-metrics {
  display: flex;
  align-items: center;
}

.comment-metrics>svg {
  height: 1.5em;
}

.comment-embedbox {
  text-align: center;
  background-color: var(--color-background-alt);
  padding: 1em;
  border-radius: 0.5em;
  max-width: 100%;
  border: none;
  color: var(--font-color);
  font-weight: bold;
}

.comment-embedbox-thumb {
  border: 1px solid var(--color-borders-embed);
  background-color: var(--color-background);
  border-radius: 8px;
  overflow: hidden;
}

.comment-embedbox-thumb img {
  max-width: 100%;
}

.comment-embedbox-thumb > a {
  color: var(--font-color);
  text-decoration: none;
}

.comment-embedbox-thumb p {
  margin: 0px 20px 3px 10px;
}

.comment-repost {
  margin-left: 4em;
  font-size: var(--font-size-repost);
}

.comment-repost .comment-avatar {
  height: calc(var(--icon-size) * 0.66666);
  width: calc(var(--icon-size) * 0.66666);
}