html {
	height: 100%;
}

body {
	font-family: "circe-rounded", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1.2rem;
	display: flex;  
	flex-wrap: wrap;
	height: 100%;
}

h2 {
	font-size: 24px;
	padding: 2rem 0;
}

h3 {
	font-size: 20px;
}


aside {
	background: #151515;
	color: white;
	height: 30%;
	min-height: 200px;
	width: 100%;
	padding: 20%;
	display: flex; 
	align-items: center;
	justify-content: center;
}


main {
	width: 100%;
	height: 70%;
	display: flex; 
	align-items: center;
	justify-content: center;
	text-align: center;
	flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

a {
	color: #151515;
	text-decoration: underline;
}

a:hover {
	color: #151515;
	text-decoration: none;
}

.offcanvas {
	font-size: 1rem;
}


.bottom ul {
	list-style: none;
	margin: 0;
	padding: 2rem 0 0 0;
}

.bottom ul li {
	font-size: 1rem;
	margin: 0;
}

.bottom a {
	color: #838383;
	text-decoration: none;
}

.bottom a:hover {
	color: #151515;
	text-decoration: underline;
}

.bottom ul li:last-child {
	padding-top: 1rem;
}

.bottom ul li:last-child a {
	color: #212529;
}

@media all and (min-width: 800px) { 
	
	.offcanvas {
		width: 40%;
	}
	
	aside {
		width: 50%;
		height: 100%;
		padding: 0;
	}
	
	
	main {
		width: 50%;
		height: 100%;
		text-align: left;
		position: relative;
	}
	.bottom {
		position: absolute;
		bottom: 5%;
		padding: 0;
	}
	.bottom ul li {
		display: inline-block;
		padding: 0 10px 0 0;
	}
	.bottom ul li:last-child {
		padding-top: 0;
	}
	.bottom ul li:last-child a {
/* 		padding-left: 2rem; */
	}
}