/* 
see here:
https://stackoverflow.com/questions/219219/how-to-change-a-span-to-look-like-a-pre-with-css
https://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag
 */

body, html {
    max-width: 600px;
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: rgb(255, 86, 227);
}

a:hover {
    text-decoration: underline;
}

.inline-pre {
    display: inline;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

pre {
    margin: 0;
}

/* this block must go below pre and .inline-pre */
pre, .inline-pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;  
}

li {
    margin-top: 15px;
}

.block {
    white-space: pre;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;  
}

@media only screen and (max-width: 600px) {
    body, html {
        margin: 0 5px;
    }
}