@charset "UTF-8";

*,:before,:after {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

html {
  font-size:100%;
}

body {
  -webkit-font-smoothing:antialiased;
  color:#333332;
  font-family:Lora,serif;
  font-size:18px;
  font-weight:400;
  line-height:1.4;
  text-rendering:optimizeLegibility;
}

.skill-set li:hover {
  background:#3498db;
}

h1 {
  color:rgba(0,0,0,.75);
}

.wrapper {
  height:100%;
}

.left {
  background-color:rgba(0,0,0,.025);
  border-right:1px solid rgba(0,0,0,.05);
  float:right;
  height:100%;
  margin-left:-1px;
  min-width:256px;
  position:fixed;
  width:33.33%;
}

.right {
  float:right;
  height:100%;
  position:relative;
  width:66.66%;
}

.name-hero {
  background:rgba(0,0,0,.001);
  bottom:0;
  height:290px;
  left:0;
  margin:auto;
  position:absolute;
  right:0;
  top:0;
  width:85%;
}

.me-img {
  background:url(https://i.imgur.com/XNRcTAE.png) no-repeat center center;
  background-size:110%;
  background-position:px;
  border-radius:100%;
  border:3px solid black;
  height:180px;
  margin:0 auto;
  position:relative;
  width:180px;
}

.name-hero h1 {
  font-family:Open Sans,sans-serif;
  font-size:1.5em;
  text-align:center;
}

.name-hero h1 em {
  color:rgba(0,0,0,.3);
  font-style:normal;
  font-weight:700;
}

.name-hero p {
  color:rgba(0,0,0,.75);
  font-size:.75em;
  line-height:1.5;
  margin:0 8px 0 0;
  text-align:center;
}

.name-hero .name-text {
  margin:0 auto;
  width:85%;
}

.inner {
  margin:0 auto;
  max-width:975px;
  padding:3em;
  background-image:url(https://i.imgur.com/UW1nan9.jpg?1);
  background-position:right;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
}

.inner h1 {
  font-size:1.75em;
  color:black;
}

.inner p {
  color:white;
  text-shadow:1px 1px black;
  font-size:18px;
}

.inner p em {
  color:rgba(0,0,0,1);
  font-style:normal;
}

.inner section {
  margin:100px auto;
}

ul {
  list-style-type:none;
  margin-top:-10px;
  max-width:570px;
  padding:0;
}

.skill-set li {
  background:rgba(0,0,0,.75);
  border-radius:5px;
  color:#FFF;
  display:inline-block;
  list-style:none;
  margin:15px 15px 0 0;
  padding:10px;
  text-align:justify;
}

@media screen and (max-width: 48em) {