/* https://codepen.io/anthonyadamski/pen/ukghm */

*, *: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:black;
}

h1
{
	color:rgba(0,0,0,.75);
    border-top: 2.8px solid rgba(0,0,0,.75);
    border-left: 2.8px solid rgba(0,0,0,.75);
    width: 100%;
    height: 1.289em;
    
}

.wrapper
{
	height:100%;
}

.left
{
    /*
	background-color:rgba(0,0,0,.025);
	border-right:1px solid rgba(0,0,0,.05);
    */
	float:right;
	height:50%;
	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:190px;
	left:0;
	margin:auto;
	position:static;
	right:0;
	top:0;
	width:85%;
}

.me-img
{
	border-radius:100%;
	margin:auto;
    margin-top: 50px;
	position: relative;
    display: block;
	max-width: 75%;
    height: auto;
}

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

.name-hero h1 em
{
    color:grey;
	font-style: normal;
	font-weight:700;
}

.name-hero p
{
	color: grey;
	font-size:1.115em;
	line-height:2;
	margin:4px 8px 0 0;
	text-align:center;
}

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

.inner
{
	margin:0 auto;
	max-width:975px;
	padding:2.5em;
}

.inner h1
{
	font-size:1.95em;
}

.inner p
{
	color: black;
    margin-bottom: auto;
    font-style:normal;
}

.inner p em
{
	color: gray;
	font-style: normal;
}

.inner section
{
	margin:60px auto;
}

ul
{
	list-style-type:disc;
	margin-top: 1px;
	max-width: 825px;
	padding: 5px;
    line-height: 1.5em;
    font-weight: 500;
}

.skill-set li
{
	background:rgba(0,0,0,.75);
	border-radius: 12px;
	color: white;
	display: inline-block;
	list-style: none;
	margin: 17px 15px 0 0;
	padding: 12px;
	text-align: justify;
    font-size: 1.25em;
}

@media screen and (max-width: 61.25em) {
	.right,.left
	{
		float:none;
        position:relative !important;
		width:99%;
        min-height:400px;
	}
    .me-img 
    {
        max-width: 60%;
    }
    .name-hero p {
        font-size: 1.5em;
    }
    .skill-set li{
        font-size: 1.445em;
    }
}

@media screen and (max-width: 75em) {
    body
{ font-size:1.2em;}
}

@media screen and (max-width: 60em) {
    body
{ font-size:1.4em;}
}