@import url("reset.css");

/* ------ layout
-----------------------------------------------*/


#content {
position:absolute;
top:50%;
left:50%;
margin:-340px 0 0 -450px;
width:900px;
height:600px;
}

.legend {
float:left;
width:250px;
margin-top:140px;
}

#content h1 {
font-family:'Cabin Sketch', arial, serif;
text-shadow:3px 3px 0 #ddd;
color:#193340;
font-size:40px;
margin-bottom:40px;
text-align:right;
}

.skills {
float:left;
clear:both;
width:100%;
}

.skills ul,
.skills li {
display:block;
list-style:none;
margin:0;
padding:0;
}

.skills li {
float:right;
clear:both;
padding:0 15px;
height:35px;
line-height:35px;
color:#fff;
margin-bottom:1px;
font-size:18px;
}

.skills .jq {
background:#97BE0D;
}

.skills .css {
background:#D84F5F;
}

.skills .html {
background:#88B8E6;
}

.skills .php {
background:#BEDBE9;
}

.skills .sql {
background:#EDEBEE;
}

.footer {
position:fixed;
bottom:0;
left:0;
width:100%;
background:#2D2D2D;
color:#EAEAEA;
padding:20px 0;
}

.footer a {
color:#EAEAEA;
}

.footer a:hover {
color:#E4842C;
}

.footer .inside {
font-family: 'Cabin Sketch', arial, serif;
font-size:22px;
text-align:center;
}


#diagram {
float:right;
width:500px;
height:500px;
zoom: 0.8;
-moz-transform: scale(0.8);
}

.get {
display:none;
}


/* ------ anchors
-----------------------------------------------*/

a {
text-decoration:none;
color:#333;
}
@media (min-width: 1170px) {
    #diagram {
    zoom: 1;
    -moz-transform: scale(1);
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    #diagram {
        zoom: 0.7;
        -moz-transform: scale(0.7);
        width: 100%;
    }
}

@media (max-width: 767px) {
    #diagram {
        zoom: 0.7;
        -moz-transform: scale(0.7);
        width: 100%;
        height: auto;
    }
    #diagram svg {
        margin: 0 auto;
        display: block;
    }
}
@media (max-width: 400px) {
    #diagram {
        zoom: 0.5;
        -moz-transform: scale(0.5);
    }
}