* {
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
    padding: 0;
}



body {
    background-image: url("images/pattern-49aj.png");
    border: 0;
    padding: 0 0 3em 0;
}

.center {
    text-align: center;
}

header {
    margin: 2em 0;
    padding: 1em;
    -moz-box-shadow: 3px 3px 5px 6px #b3b3b3;
    -webkit-box-shadow: 3px 3px 5px 6px #b3b3b3;
    box-shadow: 3px 3px 5px 6px #b3b3b3;
    background-color: White;
}

header h1 { font-size: 3em; font-weight: bolder; line-height: 0.5em; }
header h2 { font-size: 2em; font-weight: lighter; line-height: 0.5em; }
header li { font-size: 1.25em; }
header hr { color: #1d9d74; background-color: #1d9d74; height: 1px; }


.social-links { white-space: nowrap; }
.social-links>a {
    color: White;
    background-color: #1d9d74;
    display: inline-block;
    padding: 0.25em;
}

.section {
    margin: 2em 0em;
    padding: 1em;
    background-color: White;
    -moz-box-shadow: 3px 3px 5px 6px #b3b3b3;
    -webkit-box-shadow: 3px 3px 5px 6px #b3b3b3;
    box-shadow: 3px 3px 5px 6px #b3b3b3;
}

.section>h1 {
    font-size: 1.5em;
    text-transform: uppercase;
    display: inline-block;
    border-bottom: .25em solid #1d9d74;
}

.entity {
    width: 100%;
    margin-bottom: 2em;
}

.entity>ul { margin: .25em 4em; }


/* layout stuff for the experience meters in skills section */
.bar {
    color: White;
    background-color: #b3b3b3;
    padding: 0;
    width: 100%;
}

.fill { 
    background-color: #1d9d74;
    display: inline-block; 
    padding: 0 0.5em;
}

.fill1 { width: 20%;  -webkit-animation: fill1 2s linear; -moz-animation: fill5 2s linear; }
.fill2 { width: 40%;  -webkit-animation: fill2 2s linear; -moz-animation: fill5 2s linear; }
.fill3 { width: 60%;  -webkit-animation: fill3 2s linear; -moz-animation: fill5 2s linear; }
.fill4 { width: 80%;  -webkit-animation: fill4 2s linear; -moz-animation: fill5 2s linear; }
.fill5 { width: 100%; -webkit-animation: fill5 2s linear; -moz-animation: fill5 2s linear; }

@-webkit-keyframes fill1 { 0% {width: 0px;} 100% {width: 20%;}  }
@-webkit-keyframes fill2 { 0% {width: 0px;} 100% {width: 40%;}  }
@-webkit-keyframes fill3 { 0% {width: 0px;} 100% {width: 60%;}  }
@-webkit-keyframes fill4 { 0% {width: 0px;} 100% {width: 80%;}  }
@-webkit-keyframes fill5 { 0% {width: 0px;} 100% {width: 100%;} }

@-moz-keyframes fill1 { 0% {width: 0px;} 100% {width: 20%;}  }
@-moz-keyframes fill2 { 0% {width: 0px;} 100% {width: 40%;}  }
@-moz-keyframes fill3 { 0% {width: 0px;} 100% {width: 60%;}  }
@-moz-keyframes fill4 { 0% {width: 0px;} 100% {width: 80%;}  }
@-moz-keyframes fill5 { 0% {width: 0px;} 100% {width: 100%;} }