html { background: url(roughcloth.png) }
body { font-family: 'Lato', sans-serif; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,1); line-height: 1.7; font-size: 18px; }
/* tiltShift stuff (start) */

.frame { position: relative; width: 400px; height: 400px; float: left; margin: 20px 40px 20px 0; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 15px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 15px 0px rgba(0, 0, 0, 0.3); border: 5px solid white; }
.tiltshift-layer { -webkit-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; opacity: 1; cursor: pointer; }
.frame:hover .tiltshift-layer { opacity: 0; }
/* tiltShift stuff (end)*/


a { color: #ed3314; text-decoration: none; }
.clear { clear: both; }
#main { width: 860px; margin: 0 auto; overflow: visible; padding-bottom: 40px; position: relative; }
h1 { font-size: 56px; margin: 10px 0 0; }
h2 { border-bottom: 1px solid rgba(0,0,0,0.2); padding-bottom: 5px; margin: 40px 0; }
.social { position: absolute; top: 0; right: 0; }
#hover { width: 90px; height: 65px; position: absolute; top: 60px; background: url(hover.png) no-repeat; left: -120px; }
.desc { width: 400px; float: left; }
.desc p:first-child { margin-top: 0; }
.frame:nth-child(even) { margin-right: 0; }
.avatar { -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 2px 15px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 2px 15px 0 rgba(0, 0, 0, 0.3); border: 5px solid white; margin: 0 20px 40px 0; float: left; height: 80px; width: 80px; clear: left; }
code { display: block; background: rgba(0,0,0,0.05); padding: 10px; font-size: 15px; }