html {
	height: 100%;
}

body {
	font-family: 'Open Sans', serif;
	height: 100%;
}

a {	color: #2196f3; }
a:hover { text-decoration: none;}
a:visited { color: #2196f3; }
a:active { color: #2196f3; }

ul {		
	list-style-type: circle;
	padding: auto;
}

h1 {
	border-bottom: 5px solid #CCC;
}

/* Mobile View CSS */
#main {
	margin-left: 0;
	margin-top: 3rem;
	padding: 0.8rem;
}
#menuCheckbox:checked ~ #main {
	margin-top: 0rem;
	list-style-type: georgian;
}

#menu {
	display:none;
	list-style: none;	
}
#menuCheckbox:checked ~ nav #menu {
	display:block;	
}

#logo {
	display: none;		
	text-align:center;
	width: 100%;
}	
#logo img {
	border: 0px;	
	margin: 0.8rem 0;
	opacity: 0.6;
}
#logo img:hover {
	opacity: 1;
	-webkit-transition: opacity 0.8s;
	        transition: opacity 0.8s;
}	

#name {	
	font-size: 1.5rem;
	text-align: center;	
}

#desc {
	font-size: 0.8rem;
	text-align: center;
}

#desc-expanded {
	background: #ffedbb;
	box-shadow: 5px 5px 15px #CCC;
	padding: 0.1rem;
	margin: 0.5rem 0;
}
#desc-expanded ul {
	background-color: inherit;
	border: none;
}

#profiles {
	display:none;
}
#menuCheckbox:checked ~ nav #profiles {
	display:block;	
}

nav {
	background-color: #2196f3;
	box-shadow: 5px 5px 15px #CCC;
	height: 3rem;
	margin-left: 4rem;	
	position: fixed;
	top: 0rem;
	width: 100%;
}
#menuCheckbox:checked ~ nav {
	background-color: #2196f3;
	height: 100%;
	margin-left: 0rem;
	margin-top: 3rem;
	width: 11rem;	
}

nav a, nav a:visited {
	color: #FFF;
	font-size: 1rem;
	line-height: 1.5rem;
	text-decoration: none;
	-webkit-transition: color 0.3s;
	        transition: color 0.3s;
}
nav a:hover { color: #AAA; }
nav a:active { color: #000; }

#labelMenu {	
	background-color: #000;
	cursor: pointer;
	display: block;
	height: 3rem;	
	left: 0rem;
	position: fixed;
	top: 0rem;	
	width: 11rem;
}

#menuCheckbox:checked ~ #labelMenu {
	background-color: #000;
	color: #FFF;
	left: 0rem;
	position: fixed;
	top: 0rem;
}

#menuCheckbox {
	display: none;
}
#menuCheckbox:checked ~ #menuContainer {
	display: block;
}

#menuCheckbox:checked ~ #main {
	
	margin-top: 3rem;	
}

#hamburger {
	background: url(/images/sprite-hamburger.png) 0px 0px;	
	height: 30px;
	margin: 0.6rem 1rem;
	width: 30px;	
}
#menuCheckbox:checked ~ #labelMenu #hamburger {
	background: url(/images/sprite-hamburger.png) -30px 0px;	
}

#profiles {
	text-align: center;
}
nav #link-github { background: url(/images/sprite-icons.png) 0px -64px no-repeat; }
nav #link-medium { background: url(/images/sprite-icons.png) 0px -96px no-repeat; }
nav #link-twitter { background: url(/images/sprite-icons.png) no-repeat; }
nav #link-linkedin { background: url(/images/sprite-icons.png) 0px -32px no-repeat; }
nav #link-email { background: url(/images/sprite-icons.png) 0px 0px no-repeat; }
nav #link-github, nav #link-medium, nav #link-twitter, nav #link-linkedin, nav #link-email {	
	display: inline-block;
	height: 32px;	
	margin: 0.1rem;
	text-decoration: none;
	width: 32px;	
}
#main #link-github { background: url(/images/sprite-icons.png) 0px -197px no-repeat; }
#main #link-medium { background: url(/images/sprite-icons.png) 0px -217px no-repeat; }
#main #link-twitter { background: url(/images/sprite-icons.png) no-repeat; }
#main #link-linkedin { background: url(/images/sprite-icons.png) 0px -175px no-repeat; }
#main #link-email { background: url(/images/sprite-icons.png) 0px -155px no-repeat; }
#main #link-github, #main #link-medium, #main #link-twitter, #main #link-linkedin, #main #link-email {			
	clear: both;
	display: inline-block;
	float: left;	
	margin:0.2rem;
	padding: 0.1rem 0 0 23px;	
	height: 20px;
	width: 9rem;
}

section ul {
	background-color: #e0edf1;
	border: 1px dashed #CCC;
	margin: 10px 0;
}	

footer {
	margin-left: 0rem;
	padding: 0.8rem;
}

/* Desktop View CSS */
@media screen and (min-width: 52rem) {

	footer {
		margin-left: 11.5rem;
	}

	#main {
		margin-left: 11.5rem;
		margin-top: 0rem;
	}	

	#menu {
		display:block;
	}

	#name {
		font-size: 1.4rem;
	}

	#desc {
		font-size: 1rem;
	}

	#profiles {
		display:block;
	}	

	nav, #menuCheckbox:checked ~ nav {	
		background-color: #2196f3;
		height: 100%;
		min-height: 200px;
		margin-left: 0rem;
		margin-top: 0rem;
		overflow: scroll-y;
		width: 11rem;
	}

	#labelMenu {
		display: none;
	}		

}

/* Desktop -> Normal height -> Menu */
/* Desktop -> Normal height -> No Menu */
@media screen and (min-width: 52rem) and (min-height: 300px) {
	#menuCheckbox ~ nav #logo, #menuCheckbox:checked ~ nav #logo {
		display: block;
	}	
}

/* Mobile -> Normal height -> Menu */
@media screen and (max-width: 51rem) and (min-height: 300px) {
	#menuCheckbox:checked ~ nav #logo {
		display: block;
	}
}