* {
	font-family: Roboto, "Segoe UI", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, "Noto Sans CJK SC Light", "Source Han Sans CN Light", "Microsoft YaHei Light", "Microsoft YaHei", Segoe, Arial, sans-serif;
}

html, body {
	margin: 0;
	padding: 0;
	font-size: 16px;
}

a {
	color: inherit;
}

.wrapper {
	display: flex;
	flex-flow: column;
	min-height: 100vh;
}

header {
	padding: 30px 60px;
}

button {
	background-color: transparent;
	border: 2px rgba(0, 0, 0, 0.5) solid;
	padding: 4px 10px;
	cursor: pointer;
}
button:hover {
	background-color: rgba(255, 255, 255, .7);
}

nav .title {
	font-weight: bold;
	font-size: 1.5rem;
}

nav > .right {
	float: right;
}

nav #contact {
	font-size: 1.1em;
}

.main {
	flex: 1;
	position: relative;
}

footer {
	background: #2196f3;
	/* position: absolute;
	bottom: 0;
	width: 100%; */
	text-align: center;
	color: #eee;
	padding: 50px 0;
}

/* footer::before {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%232196f3' fill-opacity='1' d='M0,160L16,144C32,128,64,96,96,117.3C128,139,160,213,192,240C224,267,256,245,288,208C320,171,352,117,384,133.3C416,149,448,235,480,272C512,309,544,299,576,266.7C608,235,640,181,672,176C704,171,736,213,768,218.7C800,224,832,192,864,160C896,128,928,96,960,117.3C992,139,1024,213,1056,224C1088,235,1120,181,1152,165.3C1184,149,1216,171,1248,160C1280,149,1312,107,1344,90.7C1376,75,1408,85,1424,90.7L1440,96L1440,320L1424,320C1408,320,1376,320,1344,320C1312,320,1280,320,1248,320C1216,320,1184,320,1152,320C1120,320,1088,320,1056,320C1024,320,992,320,960,320C928,320,896,320,864,320C832,320,800,320,768,320C736,320,704,320,672,320C640,320,608,320,576,320C544,320,512,320,480,320C448,320,416,320,384,320C352,320,320,320,288,320C256,320,224,320,192,320C160,320,128,320,96,320C64,320,32,320,16,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
	background-color: #2196f3;
    background-repeat: no-repeat;
	position: absolute;
    top: -200px;
    height: 100px;
    width: 100vw;
    left: 0;
} */


.centered {
	display: block;
	position: absolute;
	width: 100%;
	top: 40%;
	transform: translateY(-50%);
}

.slogan {
	text-align: center;
	font-size: 4rem;
	margin: 0;
}

.desc {
	text-align: center;
	font-size: 1.2rem;
}