html {
    -webkit-text-size-adjust:none
}
body {
    background-color: #f8f8f8;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    margin:0;
}
header {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0.80555555rem auto;
    max-width:42rem;
    border: 1pm solid #f8f8f8;
}
footer {
    color: #888;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0.80555555rem auto 0.80555555rem;
    max-width:42rem;
    border: 1pm solid #f8f8f8;
}
#box {
    border-radius: 4px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    background-color: #fff;
    margin: 0 auto;
    max-width:42rem;
    border: 1px solid #e7e7e7;
}
@media screen and (min-width: 42rem) {
    #box {
        padding: 1.61111111rem 1.61111111rem 0;
    }
    header {
        padding: 0 1.61111111rem 0rem;
    }
    footer {
        padding: 0 1.61111111rem 0;
    }
    h2 span {
        display: block;
    }
}
@media screen and (max-width: 42rem) {
    #box{
        padding: 0.402777777rem 0.402777777rem 0em;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    header, footer {
        padding: 0 0.402777777rem 0em;
    }
    h2 span {
        display: inline;
    }
}
@media screen and (max-width: 30rem) {
    li span {
        display: block;
    }
    li span span{
        display: inline;
    }
}
@media screen and (max-width: 25rem) {
    li span span{
        display: none;
    }
}
form {
    width:100%;
    display:flex;
    margin:0 0 0.80555555rem;
}
input {
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    padding: 0.402777777rem;
    margin:0;
}
input[type="text"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.61111111rem;
    line-height: 1.20833333rem;
    display:table-cell;
    width: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: #666;
    background: #fff;
}
input[type="submit"] {
    font-family: inherit;
    font-size: 1.61111111rem;
    line-height: 1.20833333rem;
    color:#ddd;
    background: #fff;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width:4rem;
}
h1 {
    font-size: 1.61111111rem;
    line-height: 1.20833333rem;
    font-weight: 600;
    margin: 0;
    color:#555;
}
h1 a:link, h1 a:visited {
    color:#555;
    text-decoration:none;
}
h1 a:hover, h1 a:active {
    color: #4166B5;
}
h2 {
    font-size: 2.61111111rem;
    line-height: 3.222222222rem;
    color:#555;
    font-weight: 600;
    margin: 0;
}
h2 strong {
    font-weight: 700;
    color:#111;
}
h2 + p {
    margin-top: 1rem;
}
ul {
    list-style: none;
    margin:0.80555555rem 0 1.611111111rem;
    padding:0;
}
li {
    color: #888;
    margin: 0 0 0.80555555rem;
}
li strong {
    color: #777;
    font-weight: 600;
}
li code, ul.code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:1em;
    background-color: #f8f8f8;
    border: 1px #e7e7e7 solid;
    border-radius: 2px;
    color: #333;
}
ul.code {
    padding: 0.402777777rem;
}
ul.code li {
    margin:0;
}
ul.code a {
    font-weight: 600;
}
small {
    font-size: 0.62069em;
    white-space: nowrap;
}
p {
    margin:0 0 1rem;
}
a:link, a:visited {
    color: #4166B5;
}
a:hover, a:active {
    color: #444;
}
p.servertime {
    color: #aaa;
}