myrtillenne | Emphasis (Reply)

header image (700x300px)
sidebar image (300x200px)
navigation links, links list, custom text
comment pages
icon pages

Code:

/*-------------------------------------

- layout - emphasis (tabula rasa) - https://myrtillenne.dreamwidth.org
- images - https://unsplash.com

/*--------------- options ---------------*/

:root {
  --text-size: 16px;
  --text-color: #ddd;
  --line-height: 1.5;
  --background-color: #222;
  --link-color: #fb6a0b;
  --link-hover-color: #ed9f54;
  --main-font: Roboto, sans-serif;
  --title-font: Roboto Condensed, sans-serif;
  --title-color: #ed9f54;
  --content-width: 700px;
  --border-color: #444;
  --entry-background-color: #2c2c2c;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/72985.jpg");
  --header-image-height: 300px;
  --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/69222.jpg");
  --sidebar-image-width: 300px;
  --sidebar-image-height: 200px;
  --sidebar-link-color: #fb6a0b;
  --sidebar-link-hover-color: #222;
  --sidebar-link-background-color: #272727;
  --sidebar-link-background-hover-color: #ed9f54;
}

/*--------------- general ---------------*/

H1,
H2,
H3 {
  margin: 0.25em 0;
  padding: 0.25em 0;
}

img {
  border: none;
}

hr {
  display: none;
}

body {
  color: var(--text-color);
  background: var(--background-color);
  border: 0;
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  margin: 0;
}

/*--------------- links ---------------*/

a,
a:visited {
  color: var(--link-color);
}

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

a,
a:link,
a:visited {
  text-decoration: none;
  transition: all 0.4s ease;
}

q {
  font-style: italic;
}

blockquote {
  border: 1px solid var(--border-color);
  margin: 1em 0;
  padding: 1em;
}

/*--------------- content ---------------*/

#canvas {
  margin-top: 40px;
}

@media (min-width: 1024px) {
  #canvas {
    margin: 40px 0 40px calc(var(--sidebar-image-width) + 81px);
    padding: 0 40px;
  }
}

#content-footer {
  height: 0;
  font-size: 0;
  clear: both;
}

#header,
#primary {
  max-width: var(--content-width);
  margin: 30px auto;
}

@media (min-width: 1024px) {
  #header,
  #primary {
    margin: 30px 0;
  }
}

/*--------------- header ---------------*/

@media (min-width: 800px) {
  #header:after {
    content: "";
    display: block;
    width: 100%;
    height: var(--header-image-height);
    margin-top: 10px;
    background-image: var(--header-image);
    background-repeat: no-repeat;
    background-position: center center;
  }
}

#header > .inner {
  text-align: center;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  position: relative;
  padding: 20px 5px;
  line-height: 1;
  text-transform: uppercase;
  font-family: var(--title-font);
}

h1#title {
  font-size: 2em;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

h1#title a {
  color: var(--title-color);
}

h2#subtitle {
  font-size: 1em;
  font-weight: normal;
  background: var(--sidebar-link-background-hover-color);
  color: var(--sidebar-link-hover-color);
  margin: 0;
  padding: 0;
}

@media (min-width: 800px) {
  h1#title {
    font-size: 4em;
  }
}

h2#pagetitle {
  display: none;
}

/*--------------- entries ---------------*/

.entry {
  margin: 30px 0;
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
}

.entry .header,
.comment .header {
  float: left;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
}

.entry .entry-title {
  font-size: 1.5em;
  color: var(--title-color);
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  margin: 0;
  padding: 0.5em;
}

.entry .entry-title a {
  color: var(--title-color);
}

.no-subject .entry .entry-title {
  background: none;
  border: none;
  padding: 0;
}

.sticky-entry-icon,
.admin-post-icon {
  display: none;
}

.restrictions img,
.access-filter img {
  display: none;
}

.entry .date,
.entry .time,
.entry .restrictions,
.entry .access-filter {
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
  display: block;
  float: left;
}

.security-protected .access-filter:before {
  content: "LOCKED";
}

.security-private .access-filter:before {
  content: "PRIVATE";
}

.restrictions-NSFW .restrictions:before {
  content: "NSFW";
}

.restrictions-18 .restrictions:before {
  content: "18+";
}

.has-userpic .userpic {
  float: right;
  margin-top: -1px;
  margin-left: 1em;
}

@media (min-width: 1280px) {
  .has-userpic .userpic {
    width: 110px;
    margin-right: -115px;
    margin-left: 0;
  }
}

.userpic img {
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
  padding: 5px;
  display: block;
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
}

@media (min-width: 800px) {
  .userpic img {
    max-width: 100px;
    max-height: 100px;
  }
}

.entry .poster,
.full .poster {
  clear: left;
  display: block;
  border-bottom: 1px solid var(--border-color);
  text-align: right;
  line-height: 1;
}

.entry .poster {
  font-size: 0;
}

.entry .poster .ljuser,
.full .poster .ljuser,
.poster .anonymous {
  display: inline-block;
  font-family: var(--title-font);
  text-transform: uppercase;
  padding: 0.5em;
  border-left: 1px solid var(--border-color);
}

.entry .poster .ljuser {
  font-size: var(--text-size);
}

.has-userpic .entry .poster .ljuser:last-child,
.full.has-userpic .poster .ljuser {
  margin-right: -1em;
}

@media (min-width: 1280px) {
  .has-userpic .entry .poster .ljuser:last-child,
  .full.has-userpic .poster .ljuser {
    margin-right: 0;
  }
}

.poster .ljuser img {
  display: none;
}

.poster.empty {
  border: none;
}

.poster .ljuser b {
  font-weight: normal;
}

.entry-content li,
.comment-content li {
  list-style-position: inside;
}

.entry-content img,
.comment-content img {
  max-width: 100%;
  height: auto;
}

.entry-content {
  margin: 2em;
  clear: left;
}

@media (min-width: 800px) {
  .entry-content {
    text-align: justify;
  }
}

.entry-content ol,
.comment-content ol {
  padding-left: 1em;
}

.entry-content ul,
.comment-content ul {
  padding-left: 1em;
}

.metadata {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: -1px;
  clear: both;
}

.metadata ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry div.tag,
.metadata li {
  border-top: 1px solid var(--border-color);
  display: flex;
  line-height: 1;
}

.entry .tag-text,
.metadata-label {
  font-family: var(--title-font);
  text-transform: uppercase;
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
}

.entry .tag ul,
.metadata-item {
  margin: 0;
  padding: 0.5em;
}

.entry div.tag {
  border-bottom: 1px solid var(--border-color);
}

.tag ul li {
  display: inline;
}

.tag-nav-trigger {
  align-self: center;
}

ul.entry-management-links,
ul.entry-interaction-links {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  text-transform: uppercase;
  font-family: Roboto Condensed, sans-serif;
  line-height: 1;
}

ul.entry-management-links {
  margin-top: 10px;
}

ul.entry-management-links li {
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
}

ul.entry-interaction-links {
  justify-content: flex-end;
}

ul.entry-interaction-links li {
  padding: 0.5em;
  border-left: 1px solid var(--border-color);
}

.footer {
  clear: both;
}

/*--------------- comments ---------------*/

.comment-pages {
  text-transform: uppercase;
  font-family: var(--title-font);
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  padding: 0.5em;
  text-align: center;
}

.comment-pages:first-of-type {
  margin-top: 30px;
  margin-bottom: 5px;
}

.full .comment {
  margin: 30px 0;
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
}

.comment .header .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.full .comment-title {
  font-size: 1em;
  font-family: var(--title-font);
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  margin: 0;
  padding: 0.5em;
  line-height: 1;
  order: -1;
  flex: 0 0 100%;
}

.full .comment-title a {
  color: var(--title-color);
}

.full .thread-depth,
.full .header .datetime {
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
}

.comment-posted {
  font-weight: bold;
}

.comment-wrapper {
  min-width: 15em;
}

.no-subject .comment .comment-title {
  background: none;
  border: none;
  padding: 0;
}

.comment-date-text,
.comment-from-text {
  display: none;
}

.comment .poster-ip {
  font-size: 1em;
  display: block;
  font-family: var(--title-font);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
  line-height: 1;
  padding: 0.5em;
}

.comment-content {
  padding: 2em;
}

.comment .multiform-checkbox {
  float: left;
  border-top: 1px solid var(--border-color);
  padding: 0.25em 0.5em 0;
  display: block;
  font-family: var(--title-font);
  text-transform: uppercase;
}

.multiform-checkbox input {
  vertical-align: top;
}

ul.comment-management-links,
ul.comment-interaction-links {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  text-transform: uppercase;
  font-family: var(--title-font);
  line-height: 1;
}

ul.comment-management-links li {
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
}

ul.comment-management-links li:first-child {
  border-left: 1px solid var(--border-color);
  margin-left: -1px;
}

ul.comment-interaction-links {
  justify-content: flex-end;
}

ul.comment-interaction-links li {
  padding: 0.5em;
  border-left: 1px solid var(--border-color);
}

#comments ul.entry-management-links,
#comments ul.entry-interaction-links,
.comment-pages.bottompages {
  display: none;
}

.bottomcomment {
  padding: 0;
  text-align: center;
}

textarea#commenttext {
  width: 100%;
}

.partial .comment {
  background: var(--entry-background-color);
  margin-top: 10px;
  padding: 0.5em 1em;
  border: 1px solid var(--border-color);
}

.partial .comment-title {
  margin: 0;
}

#qrformdiv {
  right: 0 !important;
  min-width: 100% !important;
  padding: 0;
}

#qrform {
  padding: 2em;
  border-top: 1px solid var(--border-color);
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
  color: var(--text-color);
  font-family: var(--main-font);
  font-size: var(--text-size);
}

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  background: var(--sidebar-link-background-color);
  font-family: var(--title-font);
  font-size: var(--text-size);
  padding: 0.5em;
  color: var(--sidebar-link-color);
  text-transform: uppercase;
  line-height: 1;
}

#postform {
  padding: 2em;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  margin-top: 5px;
}

/*------------ archive, tags, icons containers ------------*/

.month-wrapper,
.page-month .month,
.tags-container,
.icons-container {
  margin: 30px 0;
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
}

.month-wrapper .header,
.tags-container .header,
.icons-container .header {
  border-bottom: 1px solid var(--border-color);
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-size: 1.5em;
  font-family: var(--title-font);
  color: var(--title-color);
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  margin: 0;
  padding: 0.5em;
  line-height: 1;
}

.tags-container .contents {
  padding: 2em;
}

#archive-year .month .footer .inner,
#primary .manage-link {
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
  border-top: 1px solid var(--border-color);
}

#archive-year .month .footer .inner a,
#primary .manage-link a {
  display: inline-block;
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
}

/*------------ archive ------------*/

.day-date {
  display: none;
}

.month caption {
  display: none;
}

table.month {
  margin: 0 auto;
  border-collapse: collapse;
  width: 100%;
  border: none;
  text-align: center;
}

table.month td,
table.month th {
  border-right: 1px solid var(--border-color);
  max-width: 1em;
  height: 3.25em;
}

table.month th {
  font-family: var(--title-font);
  text-transform: uppercase;
  font-weight: normal;
}

table.month td:last-child,
table.month th:last-child {
  border-right: none;
}

table.month tr,
table.month th {
  border-bottom: 1px solid var(--border-color);
}

table.month tr:last-child {
  border-bottom: none;
}

table.month td p {
  margin: 0;
}

.month dl {
  margin: 0;
}

.month dl dt {
  font-family: var(--title-font);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.25em;
  padding: 0.25em;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.month dl dt:first-child {
  border-top: 0;
}

.month dl br {
  display: block;
}

.month dl h3 {
  display: inline;
  font-size: 1em;
}

.month dd {
  margin: 0;
  padding: 2em;
}

.month dd > span {
  padding-right: 0.25em;
}

.month .tag ul {
  display: inline;
  margin: 0;
  padding: 0;
}

#archive-year .navigation ul,
#archive-month .navigation ul form {
  display: flex;
  flex-wrap: wrap;
}

#archive-year .navigation li,
#archive-month .navigation li {
  border-right: 1px solid var(--border-color);
}

/*------------ tags ------------*/

ul.ljtaglist {
  margin: 0 0 0 1em;
  padding: 0;
  list-style: inside;
}

ul.ljtaglist:first-child,
.tags_cloud ul {
  padding: 0;
  margin: 0;
}

/*------------ icons page ------------*/

.sorting-options ul {
  margin-left: 0;
}

.sorting-options ul li {
  display: inline;
}

.icon-keywords ul {
  display: inline;
  margin-left: 0;
  padding-left: 0;
}

.icon-keywords ul li {
  display: inline;
}

/*------------ icons page ------------*/

.sorting-options ul {
  margin: 0;
  padding: 0.5em;
  text-transform: uppercase;
  font-family: var(--title-font);
  line-height: 1;
  border-bottom: 1px solid var(--border-color);
}

.page-icons .toppages {
  display: none;
}

.page-icons .bottompages {
  padding: 0.25em;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--title-font);
}

.icons-container .icon {
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
}

.icons-container .icon:last-child {
  border-bottom: 0;
}

.icon-image {
  order: 2;
  min-width: auto;
  margin: 0;
  border-left: 1px solid var(--border-color);
}

.icon-image img {
  display: block;
  padding: 5px;
}

.icon-info {
  padding: 1.5em;
  flex: 1;
}

.default.label,
.keywords-label,
.comment-text,
.description-text {
  text-transform: uppercase;
  font-family: var(--title-font);
  text-decoration: none;
}

.icon-pages p {
  margin: 0;
  text-transform: uppercase;
  font-family: var(--title-font);
}

/*------------ sidebar ------------*/

#secondary {
  background: var(--entry-background-color);
  margin-top: 30px;
  border-top: 1px solid var(--border-color);
}

.one-column-split #secondary {
  border-bottom: 1px solid var(--border-color);
}

.module-section-one {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5em 1.5em;
}

.module{
  margin-top: 1.5em;
}

@media (min-width: 1024px) {
  #secondary {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-image-width);
    height: 100%;
    overflow: auto;
    display: flex;
    border: none;
    border-right: 1px solid var(--border-color);
    margin: 0;
    padding: 0 40px;
  }
  .module-section-one {
    margin: 40px 0;
    padding: 0;
  }
}

#secondary > .inner:first-child {
  margin: auto;
}

@media (min-width: 1024px) {
  .module-section-one:before {
    content: "";
    display: block;
    width: 100%;
    height: var(--sidebar-image-height);
    margin-bottom: 10px;
    background-image: var(--sidebar-image);
    background-repeat: no-repeat;
    background-position: center center;
  }
}

.module-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2px;
}

.module-content li {
  flex-grow: 1;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--title-font);
  line-height: 1;
}

@media (min-width: 1024px) {
  .module-content li {
    min-width: 50%;
  }
}

.module-content li a {
  display: block;
  margin: 2px;
  background: var(--sidebar-link-background-color);
  border: 1px solid var(--border-color);
  padding: 0.5em;
  color: var(--sidebar-link-color);
}

.module-content li a:hover {
  border: 1px solid var(--sidebar-link-background-hover-color);
  background: var(--sidebar-link-background-hover-color);
  color: var(--sidebar-link-hover-color);
}

.module h2,
.module .manage-link,
.module-userprofile,
.module-calendar,
.module-tags_list,
.module-tags_cloud,
.module-tags_multilevel,
.module-cuttagcontrols,
.module-pagesummary,
.module-active,
.module-credit,
.module-syndicate,
.module-subscriptionfilters,
.module-search,
.module-time,
.module-powered {
  display: none;
}

#secondary::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

#secondary::-webkit-scrollbar-track {
  background: transparent;
}

#secondary::-webkit-scrollbar-thumb {
  background: var(--border-color);
}

#secondary::-webkit-scrollbar-corner {
  background: var(--border-color);
}

/*------------ navigation ------------*/

.navigation ul {
  margin: 30px 0;
  padding: 0;
  text-transform: uppercase;
  overflow: hidden;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
}

.navigation li {
  padding: 0.5em;
  text-align: center;
  line-height: 1;
  font-family: var(--title-font);
  list-style: none;
}

li.page-back {
  float: left;
  border-right: 1px solid var(--border-color);
}

li.page-forward {
  border-left: 1px solid var(--border-color);
  float: right;
}

.topnav,
.navigation .page-separator,
.navigation.empty,
.noentries {
  display: none;
}

/*------------ footer ------------*/

.page-top {
  border-top: 1px solid var(--border-color);
  background: var(--entry-background-color);
  font-family: var(--title-font);
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.5em;
}

@media (min-width: 1024px) {
  #footer {
    max-width: var(--content-width);
  }

.page-top {
    border: 1px solid var(--border-color);
  }
}

#footer a {
  color: var(--title-color);
}

/*------------ contextual pop-up ------------*/

div.ContextualPopup {
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  padding: 1.5em;
  font-family: inherit;
  box-shadow: none;
  border-radius: 0;
}

.ContextualPopup a {
  color: var(--link-color);
}
.ContextualPopup a:hover {
  color: var(--link-hover-color);
}

div.ContextualPopup .Relation {
  font-size: 1em;
  font-family: var(--title-font);
  font-weight: normal;
  text-transform: uppercase;
  color: var(--text-color);
  margin: 0;
}

div.ContextualPopup .Userpic {
  border: none;
}

div.ContextualPopup ul {
  padding: 0.5em 0 0 !important;
}

/*------------ control strip ------------*/

#lj_controlstrip {
  background: var(--entry-background-color);
  color: var(--text-color);
  padding: 0.75em 0;
  border-bottom: 1px solid var(--border-color);
  width: auto;
}

@media (min-width: 1024px) {
  #lj_controlstrip {
    padding-left: calc(var(--sidebar-image-width) + 81px);
  }
}

#lj_controlstrip > div {
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  padding: 0.25em 0.5em !important;
  flex-grow: 0;
}

#lj_controlstrip a {
  font-family: var(--main-font);
  color: var(--link-color);
}

#lj_controlstrip a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
}

#lj_controlstrip_statustext {
  color: var(--text-color);
  font-weight: normal;
  font-size: var(--text-size);
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 1px solid var(--border-color);
  background: var(--entry-background-color) !important;
  font-size: var(--text-size) !important;
  color: var(--text-color) !important;
  font-family: var(--main-font);
}

#lj_controlstrip input[type="submit"] {
  background: var(--sidebar-link-background-color) !important;
  font-family: var(--title-font);
  font-size: var(--text-size);
  padding: 0.5em;
  color: var(--sidebar-link-color) !important;
  text-transform: uppercase;
  line-height: 1;
}

#lj_controlstrip .ljuser b {
  font-weight: normal;
}

#lj_controlstrip .ljuser img {
  display: none;
}

#lj_controlstrip_user,
#lj_controlstrip_login,
#lj_controlstrip_actionlinks {
  border: 0;
}

How to install:

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Go to the "Customize your theme" page, click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)".
On the same page, copy and paste the following https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. Set "Navigation" to number 2, "Custom text" to number 3, "Links list" to number 4. Uncheck the other modules.
Click on the "Presentation" tab; in the "Additional options" section look for "Entry date/time format" and "Comment date/time format". Select "30/04/2010" and "21:00" for both.
In the same section look for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons". Select "text-only" for both.

Live preview
Features:

header image (800x300px)
navigation links, links list, custom text
comment pages
icon pages

Code:

/*-------------------------------------

- layout - emphasis (tabula rasa) - https://myrtillenne.dreamwidth.org
- images - https://unsplash.com

/*--------------- options ---------------*/

:root {
  --text-size: 16px;
  --text-color: #ddd;
  --line-height: 1.5;
  --background-color: #222;
  --link-color: #fb6a0b;
  --link-hover-color: #ed9f54;
  --main-font: Roboto, sans-serif;
  --title-font: Roboto Condensed, sans-serif;
  --title-color: #ed9f54;
  --content-width: 800px;
  --border-color: #444;
  --entry-background-color: #2c2c2c;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/69379.jpg");
  --header-image-height: 300px;
  --sidebar-link-color: #fb6a0b;
  --sidebar-link-hover-color: #222;
  --sidebar-link-background-color: #272727;
  --sidebar-link-background-hover-color: #ed9f54;
  --customtext-height: 12em;
}

/*--------------- general ---------------*/

H1,
H2,
H3 {
  margin: 0.25em 0;
  padding: 0.25em 0;
}

img {
  border: none;
}

hr {
  display: none;
}

/*--------------- links ---------------*/

a,
a:visited {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}

a,
a:link,
a:visited {
  text-decoration: none;
  transition: all 0.4s ease;
}

q {
  font-style: italic;
}

blockquote {
  border: 1px solid var(--border-color);
  margin: 1em 0;
  padding: 1em;
}

/*--------------- content ---------------*/

#canvas {
  margin: 30px auto;
  max-width: var(--content-width);
}

@media (min-width: 800px) {
  #canvas {
    margin: 50px auto;
  }
}

@media (min-width: 1024px) {
  #canvas {
    padding: 0 120px;
  }
}

#content-footer {
  height: 0;
  font-size: 0;
  clear: both;
}

/*--------------- header ---------------*/

h1#title {
  font-size: 2em;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

h1#title a {
  color: var(--title-color);
}

h2#subtitle {
  font-size: 1em;
  font-weight: normal;
  background: var(--sidebar-link-background-hover-color);
  color: var(--sidebar-link-hover-color);
  margin: 0;
  padding: 0;
}

@media (min-width: 800px) {
  h1#title {
    font-size: 4em;
  }
}

h2#pagetitle {
  display: none;
}

/*--------------- entries ---------------*/

.entry {
  margin: 30px 0;
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
}

.entry .header,
.comment .header {
  float: left;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
}

.entry .entry-title {
  font-size: 1.5em;
  color: var(--title-color);
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  margin: 0;
  padding: 0.5em;
}

.entry .entry-title a {
  color: var(--title-color);
}

.no-subject .entry .entry-title {
  background: none;
  border: none;
  padding: 0;
}

.sticky-entry-icon,
.admin-post-icon {
  display: none;
}

.restrictions img,
.access-filter img {
  display: none;
}

.entry .date,
.entry .time,
.entry .restrictions,
.entry .access-filter {
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
  display: block;
  float: left;
}

.security-protected .access-filter:before {
  content: "LOCKED";
}

.security-private .access-filter:before {
  content: "PRIVATE";
}

.restrictions-NSFW .restrictions:before {
  content: "NSFW";
}

.restrictions-18 .restrictions:before {
  content: "18+";
}

.has-userpic .userpic {
  float: right;
  margin-top: -1px;
  margin-left: 1em;
}

@media (min-width: 1024px) {
  .has-userpic .userpic {
    width: 110px;
    margin-right: -115px;
    margin-left: 0;
  }
}

@media (min-width: 800px) {
  .userpic img {
    max-width: 100px;
    max-height: 100px;
  }
}

.entry .poster,
.full .poster {
  clear: left;
  display: block;
  border-bottom: 1px solid var(--border-color);
  text-align: right;
  line-height: 1;
}

.entry .poster {
  font-size: 0;
}

.entry .poster .ljuser {
  font-size: var(--text-size);
}

.has-userpic .entry .poster .ljuser:last-child,
.full.has-userpic .poster .ljuser {
  margin-right: -1em;
}

@media (min-width: 1024px) {
  .has-userpic .entry .poster .ljuser:last-child,
  .full.has-userpic .poster .ljuser {
    margin-right: 0;
  }
}