* {
margin:0;
padding:0;
border:0;
font-family:system-ui,sans-serif;
color:#444;
letter-spacing:.02em
}

body {
overflow-y:scroll;
height:100%
}

#menu {
width:100%;
margin:0;
background:#444;
text-align:center
}

#menu li {
display:inline-block;
padding:.5em .4em
}

#menu li a {
color:#fff;
font-weight:600;
text-decoration:none
}

#menu li a:hover {
color:#fc0;
text-decoration:underline
}

#content {
max-width:1024px;
margin:1em auto;
padding:1em
}

#content h1 {
margin:0 0 1em
}

#content h2,#content h3 {
margin:2em 0 1em
}

#content h2 a, #content dt a {
text-decoration:none
}

#content p {
line-height:1.6em;
margin:1em 0
}

#content a img {
margin:1em 0
}

#content p a, #content td a, #content dt a {
color:#028;
}
#content p a:hover, #content td a:hover, #content dt a:hover {
color:#04a;
text-decoration:underline
}

#content pre {
display:inline-block;
margin:1.2em 0;
padding:1em;
border-left:2px solid #aaa;
background:#fafafa;
font-family:monospace;
font-size:120%;
width:100%;
max-width:90%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
word-wrap:break-word
}

#content .changelog {
background:#fff;
border:0;
font-family:system-ui,sans-serif;
font-size:100%;
width:90%;
overflow:hidden;
white-space:pre-wrap;
text-overflow:ellipsis;
word-wrap:break-word;
}

#content .comment {
display:block;
font-size:95%;
font-style:italic;
color:#777
}

#content table {
margin:1em 0;
width:100%;
table-layout:fixed;
border-collapse:collapse;
background:#fff
}

#content td,#content th {
padding:.3em;
border:1px solid #aaa;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}

#content td,#content td a,#content th,#content caption {
text-align:left;
font-family:monospace;
font-size:110%
}

#content th {
background:#eee
}

#content caption {
padding:.5em 0;
font-style:italic;
font-size:95%;
color:#777
}

#content .w49 th {
width:49.4%
}

#content .w33 th {
width:33.3%
}

#content .w24 th {
width:24.97%
}

#content .w19 th {
width:19.98%
}

#content hr {
display:block;
margin:3em 0 0;
border-top:1px solid #ddd
}

#content .uls li {
margin:.2em 2em;
list-style:square
}

#content dl {
margin:3em 0
}

#content dt {
margin:2em 0 0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
word-wrap:break-word
}

#content dt::before,#content .log::before {
content:"📄 "
}

#content .log a {
text-decoration:none;
font-weight:700
}

#content dt a {
font-weight:700
}

#content .dl::before {
font-size:110%;
content:"↓ "
}

#content .f li {
margin:.2em 2em;
list-style:square;
font-family:monospace;
font-size:110%
}

#content .s {
width:33.3%
}

#content .q {
width:16.6%
}

#content .s span,#content .q span {
font-size:70%
}

#content .user,#content .cedric,#content .bot {
display:block;
margin:2.5em 0 1.5em;
padding:1em;
border-radius:1em
}

#content .user {
background:#f8f8f8;
border:1px solid #f4f4f4
}

#content .cedric {
background:#fff4de;
border:1px solid #fff1d5
}

#content .cedric li {
margin:1em 0
}

#content .bot {
background:#e0e0e0;
border:1px solid #666
}

#view pre {
padding:.5em;
font-family:system-ui,sans-serif;
font-size:100%;
letter-spacing:.02em;
white-space:pre-wrap;
background:transparent;
width:100%;
border:0
}

#view #csample,#view #ccommand {
display:block;
padding:.5em 0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
word-wrap:break-word
}

#view #csample::before {
content:"🔗 "
}

#view #ccommand::before {
content:"🗖 "
}

#postit,#postit2 {
margin:2em 0;
text-decoration:none !important;
font-size:110%;
font-weight:700;
color:#555 !important;
border:1px solid #ccc;
background:#eee;
cursor:pointer;
border-radius:5px;
box-shadow:2px 2px 2px #eee;
width:100px
}

#postit {
height:50px
}

#postit2 {
display:inline-block;
text-align:center;
padding:.5em 0
}

#postit:hover,#postit2:hover {
color:#000 !important
}

form {
margin:3em 0
}

textarea,form input {
font-size:120%;
display:block;
margin:1em 0;
height:40px;
width:80%;
border:1px solid #ddd;
padding:.5em;
resize:none
}

textarea {
height:300px
}

#cap input {
width:50px;
height:35px;
margin-left:20px
}

::placeholder {
color:#ccc
}

#table-cap {
width:0
}

#table-cap td {
border:0
}

#select {
appearance:none;
font-size:110%;
width:100%;
max-width:50%;
padding:1em;
color:#333;
background-color:#fff;
border:1px solid #ccc;
border-radius:.3em;
cursor:pointer
}

#select:hover {
border-color:#888
}

#select:focus {
border-color:#06c;
outline:none
}

#select option {
color:#333;
background-color:#fff
}

@media screen and (max-width: 500px) and (max-height: 850px) {
img {
width:95%;
height:auto
}
}