@import url(https://fonts.googleapis.com/css?family=Roboto:300,500);

* {
	margin:0;
	padding:0;
}

/* Set some nice typographic basics. */
body{
	max-width:29em;
	margin:0 auto;
	line-height:1.4;
	color:#606B6C;
	padding:2em;
  font-size: 1.3em;
  line-height: 1.35em;
  font-family: 'Roboto','helvetica neue', helvetica, arial, sans-serif;
  font-weight: 200;
}

@media (min-width:60em){
	body{
		font-size:1.2em;
		padding:4em;
	}
}

h1{
	font-weight:600;
	color:#34495e;
	font-size:2em;
	font-weight:normal;
	line-height:1;
	margin:1em 0;
}

h2{
	font-size:1em;
	letter-spacing:0.1em;
	margin-bottom:1em;
	text-transform:uppercase;
	font-weight:normal;
}

p,ul,ol{
	margin-bottom:1em;
}

ul,ol{
	margin-left:2em;
}

li{
	margin-bottom:0.2em;
}

a{
	color:#3498db;
	transition:color 0.2s;
	text-decoration:none;
}

a:hover{
	color:#2980b9;
}

#logo {
	border:solid 0.1em #bdc3c7;
	margin-bottom:15px;
	padding:0.1em 0;
	text-decoration:none;
	color:#bdc3c7;
	display:block;
	width:1.5em;
	text-align:center;
	font-size:1.4em;
}

#logo:hover{
	opacity:0.75;
}

@media (min-width:60em){
	#logo{
		border-width:0.1em;
	}
}

h3 {
	font-size:1em;
	margin-bottom:0.2em;
}

h3 a{
	text-decoration:none;
}

em em{
	font-style:normal;
}

video,
img{
	display:block;
	width:100%;
	margin:2em 0;
	box-shadow:0 0.2em 0.2em rgba(0,0,0,0.1);
}

hr {
	border:0;
	height:0;
	border-bottom:solid 0.16em #ecf0f1;
	margin:2em 0;
}

/* It’s the little things. */
::-moz-selection{
    background:#ecf0f1;
}

::selection{
    background:#ecf0f1;
}