body {
  max-width: 66em;
  margin: auto;
  word-break: break-word;
}

.comment_content p::after { content: " this is not satire."; }


blockquote { font-style: italic; margin-left: .5em; margin-bottom: .5em; background: #c6c6c6 }

blockquote::before { content: "> "; }
h2 { font-size: 1.1em }
h3 { font-size: 1em }
.collapselink { text-decoration: underline; cursor: pointer }

main {
  padding: 1em;
}

video, img { 
  display: block;
  max-width: 100%;
}

@keyframes focus {
  0% { background: pink; color: gray };
100% { background: none; color: inherit };
}

:target { animation: 3s linear focus }

a:hover { 
  opacity: .7 
}

header {
  font: 1em sans-serif;
}

header a { 
  text-decoration: none;
}

#topmenu::before {
  content: "";
  background-image: url("https://triapul.cz/files/_/pandax.png") ;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: .5em;
  display: block;
  width: 100%;
  height: 12em;
}

#topmenu {
  background: black;
}

#topmenu, #submenu {
  padding: .5em;
}

header a {
  margin: 0 .3em;
}

#topmenu a {
  color: orange;
}

#topmenu #notifholder {
  font-weight: bold; /* bold if there's a notif? */
}

#topmenu form {
  float: right;
}

#topmenu input {
  padding: 0 1em;
  background: orange;
  outline: 0;
  border: 0;
}

#submenu { 
  background: #222;
}

#submenu a {
  color: #bbb;
}

.outline { 
  clear: both;
 }

hr { border: 0; border-bottom: 1px dotted gray; margin:0 1em }

.outline button, .inline button, .inline, button, .but {
  display: inline-block;
}

.outline button, #topmenu button, button, .but {
  background: orange;
  border: 1px solid #222;
  color: black;
  text-decoration: none;
} 

button a, .but a { 
  color: black; 
  text-decoration: none;
}

.outline button:hover {
  opacity: .7;
}

.outline button a, .inline button a, .inline, .but a {
  color: black;
  font-weight: normal;
  text-decoration: none;
}

.subtlelinks {
 margin:0; padding: 0;
 padding-top:.3em;
 padding-left:.5em;
}


.subtlelinks hr {
  padding-bottom:.5em
}

.subtlelinks a, .outline a, #commentbox a {
  display: inline-block; 
  color: blue;
  line-height: 1.3;
}

.alert {
  border: 3px dashed black;
  padding: .3em;
  text-align: center;black;
  background: orange;
  margin: 0;
  font-weight: bold;
}

.alert a {
  color: antiquewhite;
  text-decoration: none;
}

.subtlelinks img {
  display: block;
  margin: 1em 0;
}

.commentbox {
  width: 100%;
}


.comment_content {
  padding-left: 0;
  margin-bottom: .75em
}

.comment_content p {
  margin: .3em 0;
  line-height: 1.5
}

#commentbox .comment .comment {
  margin-left: .7em;
  border-left: 2px solid gray;
  padding-left: .7em;
}

.comment { border-bottom: 0 dotted gray;
 padding-top:.7em
 }

.outline textarea {
  width: 90%;
  height: 4em;
}

pre { overflow: auto }

h2 { font-size: 1em;margin:0 }
.source { font-size: .8em }
.prevpic + .prevpic { display: none }
.title { display: inline; font-size: .8em }

.preview {
  max-width: 10em;
}

.preview + .preview { display: none }
p img + p img { display: none }

.subtlelinks:nth-child(odd) {
 background: #e4e4e4
}
.subtlelinks:hover { 
  background: antiquewhite;
}



@media (prefers-color-scheme: dark) {

body {
  background: #222;
  color: #bbb;
}

blockquote { color: black }

#submenu { border-bottom: 3px solid black }

.alert { color: black }

a, .subtlelinks a, .outline a, #commentbox a {
 color: antiquewhite }

input, textarea { background: darkgray; color: black }
.subtlelinks:nth-child(odd) {
 background: #444
}

.subtlelinks:hover { background: #333 }
}
.comment .subtlelinks { background: none; padding-left: 0 }

}

.comment .subtlelinks { background: none }