html.light {
  --c-social-svg: #303030;
}

html.dark {
  --c-social-svg: #b2b2b2;
}

/* used from wotd/archive.tpl, but only included (via Ajax) in wotd/view.tpl */
.wotdArchiveTable {
  text-align: center;
  vertical-align: middle;
}

.wotdArchiveTable .wotdDoM {
  text-align: right;
}

.wotdArchiveTable td {
  height: 112px;
  width: 90px;
}

.social-svg svg {
  margin-left: 0.5em;
  width: 24px;
}

.social-1 path {
  fill: var(--c-social-svg);
  stroke: var(--c-social-svg);
}

.social-2 path,
.social-3 path {
  fill: var(--c-social-svg);
}

@media (max-width: 767px) {
  .wotdArchiveTable tbody td {
    border: none;
    display: block;
    font-size: 1.2em;
    height: 138px;
    width: auto;
  }

  .wotdArchiveTable thead,
  .wotdArchiveTable tbody td:not(.activeMonth) {
    display: none;
  }

  .wotdArchiveTable tbody td > div {
    display: inline-block;
  }

  .wotdArchiveTable .wotdDoM {
    width: 7%;
  }

  .wotd-link {
    text-align: right;
    width: 88%;
  }
}

@media (max-width: 320px) {
  .wotdArchiveTable .wotdDoM {
    width: 8%;
  }

  .wotd-link {
    width: 70%;
  }

  .thumb {
    min-width: 18%;
  }
}
