body {
background: url(bg.jpg) repeat #000;
font:18px/24px  'lato', 'lucida sans unicode', 'lucida grande', helvetica, arial, verdana, sans-serif;
color:#eee;
margin:0px;
padding:0px;
}

/* structure */

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

header {
margin:0px auto;
width:1200px;
height:721px;
background-size:cover;
}

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

nav ul {
margin:0px;
padding:0px;
text-align:center;
}

nav ul li {
display:inline;
list-style-type:none;
margin:0px 20px;
padding:0px;
}

nav ul li a {
font:30px 'Knewave', georgia, 'times new roman', serif;
color:var(--base);
text-decoration:none;
text-transform:lowercase;
font-weight:normal;
padding:5px 10px;
text-shadow:0px 2px 2px #444;
transition:color 0.5s ease;
}

nav ul li a:hover { color:var(--contrast); }

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

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

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

/* headers */

h1 {
margin:10px 0px 0px 0px;
font: normal 40px 'Knewave', 'lucida sans unicode', arial, sans-serif;
color:var(--base);
text-transform:lowercase;
border-radius:5px;
padding:10px 0px 0px 0px;
height:70px;

}

h2, h4 {
margin:5px 0px 5px;
font: normal 25px 'Knewave', 'lucida sans unicode', arial, sans-serif;
color:var(--saturated);
text-transform:lowercase;
border-radius:5px;
padding:5px 0px;
background:url(bg.gif);
}

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

h3 {
margin:10px 0px;
font: normal 20px 'Knewave', 'lucida sans unicode', arial, sans-serif;
color:var(--saturated);
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:'Lato',
'lucida sans unicode', arial, sans-serif;
color:var(--accent);
font-weight:700;
}

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

code { font-family:'Ubuntu Mono', 'courier new', monospace; }
small { font-size:14px; 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(--dark);
margin:10px 10px 0px;
}

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

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

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

/* images */

img, a img { 
border:5px solid var(--dark);
padding:0px; margin-right:6px;
background:none;
transition:border 1s ease;
}

img:hover { border-color:var(--accent); }
img.right { float:right; margin:0px 0px 5px 5px; }
img.left { float:left; margin:0px 5px 5px 0px; }

/* form styling */

input, textarea {
background:rgba(0,0,0,0.5);
padding:2px;
border:3px solid var(--shade);
font:16px/22px 'PT Serif', 'trebuchet ms', tahoma, verdana, arial, sans-serif;
color:#fff;
margin:5px 0px;
}

option, select { 
padding:2px;
border:3px solid var(--shade);
font:16px/22px 'PT Serif', 'trebuchet ms', tahoma, verdana, arial, sans-serif;
color:#fff;
margin:0px 0px;
background:rgba(0,0,0,0.5);
}

input:focus, textarea:focus, select:focus { border-color:var(--accent); }

option { 
border-width:0px;
background:#000;
}


/* responsive */


@media (max-width:420px) {

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

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

}

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

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

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

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

    
}

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

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

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


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


    div#container {
    width:80%;
    }

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

    }
    

}