html,body{margin:0;padding:0;height:100%}
body{color:#000;background:#d7dddd;font:18px/2 sans-serif;word-break:keep-all}
#body{max-width:720px;padding:16px;margin:0 auto}
.index h1 img{width:720px;padding-top:48px}
.index #body{margin-top:-24px}
#mainlink::before{content:'';display:block;width:32px;height:32px;background:url('/static/img/i.svg') center center no-repeat;margin:32px auto;margin-bottom:0}
#mainlink a{display:block;width:100px;height:19px;background:url('/static/img/xtendo.org.svg') center center no-repeat;padding:16px;margin:16px auto}
#mainlink a span{display:none}
h1{text-align:center;line-height:1.5;font-size:32px;font-weight:normal;margin:0}
h1::after{content:'';display:block;width:100px;height:100px;background:url('/static/img/computer.gif') center center no-repeat;margin:0 auto}
.index h1::after{display:none}
#footer{color:#999;font-size:14px;text-align:center;border-top:1px solid #CCC;padding-top:1em;margin-top:2em}
#footer a{color:#999}

#posts{display:flex;justify-content:space-between}
#posts h3{padding-left:0;background:none;border-bottom:1px solid rgba(0,0,0,0.2)}
#posts div{width:340px}

h2,h3,h4{font-weight:normal;line-height:1.5}
h2{font-size:24px;border-bottom:1px solid #999}
h3{font-size:22px;padding-left:30px;background:url('/static/img/h3.svg') left 6px no-repeat;}
a{color:#05c;text-decoration-color:rgba(0,0,0,0.2)}
a:hover{color:#39f}
kbd{display:inline-block;min-width:1em;text-align:center;font-family:sans-serif;line-height:1;border:1px solid #CCC;border-color:#ccc #999 #666 #999;border-radius:0.125em;padding:.2em .25em;margin:0 0.125em;box-shadow:0 1px #999;background:#d7dddd}
p{margin:1.5em 0}
ul,ol{padding-left:18px}
ul{list-style-image:url('/static/img/list.svg')}
ul ul{list-style-image:url('/static/img/list2.svg');padding-left:24px}
ol{list-style:decimal}
blockquote{border-left:6px solid #b0bbbb;padding-left:1em;margin:1.5em 0}
strong{color:#222}
img{max-width:100%;display:block;margin:0 auto}
h2 code,h3 code,p code,ul code,ol code{background:rgba(0,0,0,0.05);color:#000;font-size:0.9em}
pre code{line-height:1.5;padding:12px;font-size:12px;border:1px solid #998;border-radius:3px}
.notice{background:#fc0;padding:12px 24px;}

@media only screen and (max-width: 767px) {
  body{text-align:left}
  .index h1 img{width:90%;padding-top:32px}
  #posts{display:block}
  #posts div{width:100%}
}