body {
margin:0;
background:linear-gradient(#506077 3%, #6b8099 25%, #ffdb90);
background-attachment:fixed;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:20pt;
color: #575040;
}

.main {
background:#f7f5f0;
position:relative;
margin: 0 2.5% 0 2.5%;
border-radius: 25px;
text-align:center;
animation: fade 2s;
opacity:0.95;
}

@keyframes fade {
0% {opacity:0; top:50px;}
25% {opacity:0;}
100% {opacity:0.95; top:0;}
}

h1 {
font-size:3em;
font-family:georgia, serif;
color:#607790;
font-stretch:semi-condensed;
word-spacing:0.1em;
clear:both;
padding: 2.2em 0.1em 0.4em 0.1em;
}

h2 {
font-size:2em;
font-family:georgia, serif;
color:#607790;
font-stretch:semi-condensed;
word-spacing:0.1em;
margin:0.4em 0 0.2em 0;
}

h3 {
font-size:1em;
font-family:georgia, serif;
margin:0.6em 0 0 0;
}

p {padding: 0 2em 1.5em 2em;}
a {color:#372717; text-decoration:none; cursor:crosshair;}

ul {
margin:0 10% 2em 10%;
font-size:18pt;
line-height:2em;
}

li {text-align:left;}

.portfolio {padding:1% 0;}

.cube {
width:33.33%;
height:340px;
background:#e7e5d7;
background-size:cover;
background-position:center top;
opacity:0.5;
padding-top:40px;
transition:1s;
font-family:georgia, serif;
font-size:22pt;
font-style:italic;
letter-spacing:0.03em;
text-align:center;
text-shadow: 0 3px 2px #979077;
float:left;
overflow:hidden;
}

.cube:hover {opacity:0.9;}

#vampirefight {background-image:url("../content/vampirefight.jpg");}
#littlesister {background-image:url("../content/littlesister.jpg");}
#pigeons {background-image:url("../content/pigeons.jpg");}
#design2012 {background-image:url("../content/design2012.jpg");}
#portfolio {background-image:url("../content/portfolio.jpg");
    color:white; text-shadow: 0 3px 2px #f7f7f7;}
#commissions {background-image:url("../content/commissions.jpg");}
#written {background-image:url("../content/written.png");}
#aural {background-image:url("../content/aural.png");}

#panhandling {
clear:both;
line-height:3em;
padding: 1.5em 0 0.5% 0;
}

#panhandling p {padding-bottom:0;}
#panhandling a {color:#876040;}

#upd8 {
background:#fbfbf7;
margin:5%;
border:1px solid #372717;
}

#upd8_scrollbox {
position:relative;
height:50vh;
overflow:visible scroll;
}

#upd8_scrollbox p {
padding-top:0.4em;
line-height:0.2em;
}

#teaser {
position:relative;
width:80%;
margin:auto;
padding-top:2%;
color:#f0e0c0;
font-size:48pt;
line-height:3.5em;
font-weight:bold;
}


#teaser img {
position:relative;
width:100%;
z-index:-1;
top:0;
}

#top_text {
position:absolute;
top:12.5%;
width:100%;
}

#bottom_text {
position:absolute;
bottom:12.5%;
width:100%;
}

.buttonz {display:inline; font-size:36pt; font-weight:bold; margin-right:0.3em;}

.smol {
padding:3em 0 0.5em 0;
font-size:12pt;
line-height:1.5em;
color: #706050;}

.smol:before {
content: "";
display: block;
padding-bottom:2em;
border-top:1px solid #A08070;
margin: 0 auto;
width:75px;
}

.footer {
width:auto;
height:290px;
padding-top:120px;
position:relative;
bottom:0;
}

#hill {
height:60px;
width:2000px;
position:absolute;
bottom:0;
right:0;
overflow:hidden;
z-index:-1;
}

#trees {
position:absolute;
right:1%;
z-index:1;
}

#briar {
position:absolute;
right:475px;
top:290px;
z-index:1;
}


/* DYNAMICS */

@media (max-aspect-ratio: 4/3) {
h2 {padding-bottom: 0;}
ul {
font-size:0.8em;
line-height:2.4em;}
#teaser {font-size:32pt;}
}

@media (max-aspect-ratio: 5/6) {
.cube {width:50%; height:250px;}
}

@media (max-aspect-ratio: 4/5) {
.main {margin:5% 5% 8% 5%;}
}

@media (max-width:499px) {
.cube {width:100%; height:250px;}
h1 {font-size:2em;}
p {font-size:18pt; padding-bottom:0.8em;}
.panhandling p {line-height:2em;}
.smol {padding-top:10%;}
}