html[data-theme="dark"] {
  --main-text-color: #d8dee9;
  --main-background-color: #2e3440;
  --side-background-color: #222;
  --border-color: #4c566a;
  --link-color: #88c0d0;
  --link-hover-color: #d8dee9;
  --link2-color: #5e81ac;
  --link2-hover-color: #5e81ac;
  --button-background-color: #3b4252;

}

html[data-theme="light"] {
  --main-text-color: #2e3440;
  --main-background-color: #fff;
  --side-background-color: #2e3440;
  --border-color: #eee;
  --link-color: #5e81ac;
  --link2-color: #5e81ac;
  --link-hover-color: #5e81ac;
  --link2-hover-color: #5e81ac;
  --button-background-color: #eceff4;
}

.literal-block, .highlight {
 background-color: var(--side-background-color) !important;

}

main article {
  margin:0 10px 10px;
  max-width: unset;
}

main article header p{
 font-weight: lighter;
}

main article h1 a, main article h2 a, main article h1, main article h2 {
 color: unset;
 font-family: 'Noto Serif Display', serif;
}

main {
 font-size: 1.5em;
 line-height: 1.5em;
 font-weight: 300;
}

body {
 color: var(--main-text-color);
 background-color: var(--main-background-color);
}
a {
 color: var(--link-color);
}
.admonition a {
 color: var(--link2-color);
}
aside {
 background-color: var(--side-background-color);
}

aside,
aside a {
 color:#eceff4
}

aside nav ul li {
 /* The text is in lower case by default, just remove it */
 text-transform:
}

@media screen and (min-width:768px) {
  /* Reduce the sidebar width to 20% */
 aside {
    width:20vw;
  }
  main {
    padding-left:20vw;
  }
  main article {
    margin:0 50px 50px;
  }

}

a.btn,
.tag-cloud a,
section#isso-thread section.auth-section p.post-action input {
 background-color: var(--button-background-color);
 color:unset;
}
a.btn:hover,
.tag-cloud a:hover {
 background-color:#5e81ac;
 color:#fff;
}
a:hover {
 color: var(--link-hover-color);
 text-decoration:underline
}
.admonition a:hover {
 color: var(--link2-hover-color);
 text-decoration:underline
}
aside a:hover {
 color:#d8dee9;
 text-decoration:none;
}
hr {
 background-color: var(--border-color);
}

div.related-posts {
 margin:15px 0;
 padding-bottom:20px;
 border-top:1px solid var(--border-color);
 border-bottom:1px solid var(--border-color);
}


main nav {
 border-bottom: 1px solid #d8dee9;
}
ul.social a.sc-medium {
 background-color:#00ab6b
}
ul.social a.sc-rss {
 background-color:#f26109
}
ul.social a.sc-github,
ul.social a.sc-github-alt {
 background-color:#111010
}
ul.social a.sc-envelope {
 background-color:#578ad6
}
.theme-switch {
  color: unset;
  background-color: unset;
  border: 0px;
}
@media screen and (max-width: 768px) {
 .theme-switch {
  position: absolute;
  top: 25px;
  right: 25px;
 }
}
@media screen and (min-width: 768px) {
 .theme-switch {
  position: fixed;
  bottom: 10px;
 }
}
main footer {
 border-top: var(--border-color);
}
main footer p {
 margin:2px;
 text-align:center;
 padding:0 40px;
 color:#999;
 font-size:11px
}
div.admonition div,
div.admonition p,
div.admonition pre {
 margin-bottom:0
}
div.admonition {
 color: var(--main-background-color);
 background-color: var(--main-text-color);
}
div.admonition.attention {
 color:#856404;
 background-color:#fff3cd
}
div.admonition.caution {
 color:#856404;
 background-color:#fff3cd
}
div.admonition.danger {
 color:#721c24;
 background-color:#f8d7da
}
div.admonition.error {
 color:#721c24;
 background-color:#f8d7da
}
div.admonition.hint {
 color:#004085;
 background-color:#cce5ff
}
div.admonition.important {
 color:#155724;
 background-color:#d4edda
}
div.admonition.tip {
 color:#004085;
 background-color:#cce5ff
}
div.admonition.warning {
 color:#856404;
 background-color:#fff3cd
}
div.figure {
 font-size:90%;
 color:#6c757d
}
main article table:not(.field-list) {
 width: 100%;
 word-break: break-all;
}
main article table th.field-name {
    width: 10em;
    text-align: right;
    border-top: 0px;
    word-wrap:break-word;
}
main article table th {
    border-top: 1px;
}
main article table td {
    line-height: unset;
}
main article table td.field-body {
    border-top: 0px;
}
/* Select the cell in the first row, when the row comes just after te table
 * body, no header */
main article tbody > tr:first-child td {
    border-top: 1px black;
}
main article :not(pre)>code {
 font-size:.8em;
 white-space:nowrap;
 color:#c25;
 padding:1px 3px;
 background-color:#f7f7f9;
 border:1px solid #e1e1e8;
 border-radius:3px
}

aside span.amp {
   font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
   font-size:110%;
   font-style:italic;
}

dt {
  font-weight: bold;
}
dt::after {
  content: " :";
}