Overlayz CSS setting

styles.css

:root {
  /* [TIP] 글꼴 변경 시 두께가 맘에 들지 않으신다면, */
  /* 아래 숫자(600)를 100~900 사이에서 100 단위로 조절해주세요. */
  /* 숫자가 클 수록 두께가 두꺼워집니다. 400이 보통 굵기. */
  --font-weight: 600;
}
#log>div.deleted {
  visibility: hidden;
}
#log .emote_wrap {
  position: relative;
}
#log .emote_wrap img.emoticon {
  height: calc(1.5em + 7px);
  margin-top: -3.5px;
  vertical-align: top;
}
.badge,
.colon,
.name {
  display: inline;
  vertical-align: top;
}
#log .meta {
  padding-right: 8px;
  position: relative;
}
.badge {
  margin-top: calc(0.25em + 3.5px);
  margin-right: 4px;
  height: 1em
}
.name {
  font-weight: var(--font-weight);
  margin-left: .1em
}
body,
html {
  height: 100%;
  overflow: hidden
}
#log {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 10px 10px;
  width: 100%;
  box-sizing: border-box;
  font-weight: var(--font-weight);
  text-shadow: 
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000,
    0px 0px 3.5px #000;
}
body {
  -webkit-mask-image: -webkit-gradient(linear, left 5%, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
#log>div {
  padding-bottom: .25em;
  word-wrap: break-word;
  line-height: 1.5em;
}
body {
  background: $background_color;
  color: $text_color;
  font-size: $font_sizepx;
}
#log {
  font-family: '$font_face', serif;
}
#log>div {
  animation: fadeOut 1s ease $message_hide_delays forwards;
}
span.message > img {
  height: 1em;
}
span.message > img.emote {
  height: auto;
  vertical-align: text-top;
}