@font-face{font-family:raleway;src:url(raleway-light.woff) format(woff);font-weight:200;font-style:normal}
@font-face{font-family:raleway;src:url(raleway-regular.woff) format(woff);font-weight:400;font-style:normal}
*{box-sizing:border-box}

html{
    background:#fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNjAiIGhlaWdodD0iNjI1Ij48cGF0aCBkPSJNMC0xbDM2MCA2MjUgMC0yMDgtMjQwLTQxNi0xMjAgMHoiIGZpbGw9IiMzZmI5ODQiLz48cGF0aCBkPSJNMTIwIDBsMjQwIDQxNiAwLTIwOC0xMjAtMjA4LTEyMCAweiIgZmlsbD0iIzMxNDc1ZSIvPjwvc3ZnPgo=) no-repeat 100% 0;
    font:1em/1.8 Raleway, raleway, 'Open Sans', sans-serif;
}
body{position:relative;min-height:100%;max-width:55em;margin:0 auto;padding:4em;color:#31475e}

a{color:#379e6f;text-decoration:underline}
a:hover{color:#000;text-decoration:underline}
h1{text-align:center;font-weight:200;font-size:3.5em;margin:0;padding:0 0 1em;line-height:1.2}
small{font-size:.72em}

.content{font-size:1.4em;display:flex;justify-content:space-between}
ul{margin:0 0 2em;padding:0;list-style:none}

@media all and (max-width:1200px){
    html{background-size:25% auto}
    .content{display:flex;flex-wrap:wrap;justify-content:center}
    ul{flex-basis:55%}
}
@media all and (max-width:700px){
    html{background-size:130px auto}
    body{padding:2em}
    h1{font-size:2.5em}
    h1 small{display:block}
    .content{font-size:1em;display:block}
}
@media (prefers-color-scheme: dark){
    html{background-color:#0a1b2e}
    body{color:#bbb}
    a:hover{color:#eee}
}