html {
  height:100%;
  font-family: "Karla", sans-serif;
  font-weight: 400;
	font-size:18px;
	color: #eee;
	background-color: #222;
}

.mini-logo .logo {
	font-size: 18px;
}
.logo {
	font-family: "Karla";
	font-weight: 700;
	font-size:48px;

	text-decoration:none;
	color:inherit;
	padding-bottom:8px;
	letter-spacing:-0.5px;
	/*color: #eadae1;*/
	/*color: #f4d0e0;1*/
}

.logo:hover {
	color: #f0f1df;
}

nav {
	flex: 1;
}

nav li {
	list-style: none;
}

.button {
	border:  1px solid #ccc;
	padding: 8px 6px;
	margin: 10px;
	border-radius: 10px;
}

.button:hover {
	border:  1px solid #222;
	cursor:  pointer;
	background-color: #f0f1df;
	/*background-color: #eadae1;*/
	/*background-image:linear-gradient(-30deg, #eadae1 30%, #f0f1df 50%);*/
}

.button a {
	color: #666;
}

.button:hover a {
	/*text-decoration: underline;*/
	color: #111;
}

h3 {
	font-weight: 700;
	font-size: 24px;
	color: #eadae1;
}

body {
  margin:0;
}

.bg {
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.content {
  background-color:white;
  border-radius:10px;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  border:5px solid #f3f5ed;
  padding:5px 10px 10px 10px;
}

.container {
	text-align: center;
	width:95%;
	max-width:400px;
	margin:10px auto 0 auto;
	padding-bottom:100px;
}

.landing-container {
	display:flex;
	flex-direction:row;
	text-align:center;
}

@media (min-width:800px) {
	.container {
		margin-top:100px;
	}
	.content {
	  padding:20px 30px 30px 30px;
	}
	.button {
		width:50%;
	}
}

a {
	/*text-decoration: none;*/
	color: #eee;
}

a.logo:hover {
	text-decoration:underline;
}

h1 {
	font-size: 42px;
	/*letter-spacing:-1px;*/
	margin-top:10px;
	margin-bottom:15px;
}