:root {
--base:#1897be;  /* blue */
--accent:#c888c0; /* desaturated purple */
--contrast:#c577cc; /* red */
--shade:#2f748e; /* teal */
--link:#6ba5f5; /* pale blue */
--saturated:#64c5ee; /* saturated blue */
--dark:#123955; /* even darker blue */
}
 
 
body {
background: url("bg.jpg") repeat #fff;
font:22px/26px 'PT Serif', 'lato', 'lucida sans unicode', 'lucida grande', helvetica, arial, verdana, sans-serif;
color:#222;
margin:0;
padding:0;
}

/* structure */

div#container {
margin:0 auto;
width:750px;
}

header {
margin:0 auto;
width:750px;
height:483px;
background-size:cover;
}

header img { 
margin:0 auto !important;
border:0 !important;
padding:0 !important;
display: block;
max-width:100%;
height: auto;
}

section {
width:750px;
margin:0 auto 0;
text-align:left;
}

section p {
margin:10px 0;
padding:0;
}

footer {
text-align:right;
clear:right;
font-size:14px; 
line-height:18px;
color:#666;
padding:20px 0;
}

/* headers */

h1 {
margin:10px 0 0 0;
font: normal 40px 'DM Serif display', 'lucida sans unicode', arial, sans-serif;
color:var(--base);
text-transform:lowercase;
border-radius:5px;
font-style:italic;
padding:10px 0;

background:url(images/h1.jpg) top left no-repeat;
}

h2, h4 {
margin:5px 0 5px;
font: normal 25px 'DM Serif display', 'lucida sans unicode', arial, sans-serif;
color:var(--saturated);
text-transform:lowercase;
border-radius:5px;
font-style:italic;
padding:5px 0;
}

h2 + blockquote { margin-top:-10px; }

h3 {
margin:10px 0;
font: normal 20px 'DM Serif display', 'lucida sans unicode', arial, sans-serif;
color:var(--contrast);
text-align:center;
text-transform:lowercase;
clear:both;
}

/* text styling & utility */

a {
color:var(--link);
font-weight:bold;
cursor:crosshair;
transition:color 0.5s ease;
}
a:hover { color:var(--accent); }


b, strong {
font-family:'DM Serif Display', 'lucida sans unicode', arial, sans-serif;
color:var(--accent);
font-weight:700;
}

i, em {
font-family:'DM Serif Display', 'lucida sans unicode', arial, sans-serif;
color:var(--shade);
}

code { font-family:'Ubuntu Mono', 'courier new', monospace; }
small { font-size:17px; line-height:18px; }
span { color:var(--contrast); }

.center { text-align:center; }
.help { cursor:help; }


p.bg { text-align:center; }
p.bg img { background-color:#fff; }

blockquote {
border-left:5px solid var(--link);
margin:10px 10px 0;
}

blockquote p {
margin:0 !important;
padding:0 5px 0 !important;
}

blockquote:hover { border-color:var(--accent); }
blockquote span {
text-transform:uppercase;
font-family:'DM Serif display', 'lucida sans unicode', arial, sans-serif;
}

ul li { 
list-style-type:square;
}

hr { 
background:url(hr.png) top center no-repeat;
border:0;
height:16px;
}

p.next {
text-align:right;
}

p.next a {
text-decoration:none;
font-style:italic;
font-size:30px;
}

span.site {
font: 24px 'DM Serif Display', 'lucida sans unicode', arial, sans-serif;
color:var(--saturated);
text-transform:uppercase;
}

/* images */


img, a img { border:1px solid var(--link); padding:5px; margin-right:6px; background:var(--link); transition:border 0.5s ease, background 0.5s ease; }
img:hover { border-color:var(--accent); background:var(--accent); }

img.none {
background:none;
border:none;
}

img.left { float:left; margin:0 5px 5px 0; }

img.bg {
padding:20px;
background:url(imgbg.png);
border-radius:50px;
border-width:0;
}

a img.bg, img.bg { transition:background 1s steps(1, jump-end); }
a:hover img.bg, img.bg:hover {
background-position:bottom right;
}

a img.inset { transition:background 2s ease; }
a:hover img.inset {
background-image:url("images/frame2.png");
}

/* responsive */


@media (max-width:420px) {

    header {
    width:100%;
    height:auto;
    }
    
    div#container {
    width:80%;
    }
    
    
    div#container {
    width:90%;
    margin:0 auto !important;
    padding:0 0 !important;
    }

    section {
    margin:0 auto;
    width:80%;
    }
    
    nav ul li a, h1 { font-size:20px !important; }
    
    .nav {
    width:50%;
    }

}

@media (min-width:420px) and (max-width:768px) {

    header {
    width:100%;
    height:auto;
    }
    

    div#container {
    margin:0 auto;
    width:100%;
    }

    section {
    margin:0 auto;
    width:90%;
    }
    
    nav ul li a, h1 { font-size:22px !important; }

    .nav {
    width:50%;
    margin:0 auto;
    }
    
}

@media (min-width:768px) and (max-width:1200px) {

    header {
    width:100%;
    height:auto;
    }
    
    
    div#container {
    width:80%;
    }

    section {
    float:none !important;
    margin:0 auto;
    clear:both;
    width:100%;
    }

    
}


@media (min-width:1200px) and (max-width:1450px) {


    div#container {
    width:80%;
    }

    section {
    float:none !important;
    margin:0 auto;
    clear:both;

    }
    

}