.navbar {
	background-color: #333;
	overflow: hidden;
	height: 46px;
	border-bottom: 1px solid;
}
.navbar a {
	float: left;
	color: #f0f0f0;
	text-align:center;
	padding: 12px 15px;
	text-decoration: none;
	font-size: 22px;
}
.navbar a:hover {
	background-color: #ccc;
	color: black;
}
.navbar a.active {
	background-color: #44aaaa;
	color: white;
}
body {
	background-color: #f0f0f0;
	margin: 0;
	height: 100%;
	width: 100%;
}

.title a:link {
	text-decoration: none;
	color: #335577;
}
.title a:visited {
	color: #aaaadd;
}
.title a:hover {
	color: #bbddff;
}
.title a:active {
	color: #dddddd;
}

.page {
	padding: 10px;
	flex: 1 1 auto;
}
.blog {
	background-color: #e0e0e0;
	width: 1000px;
	padding: 60px;
	margin: auto;
	flex: 1 1 auto;
}
.post { 
	background-color: #ffffff;
	border-style: solid;
	border-color: rgba(0,0,0,0.25);
	border-width: 2px; 
	border-radius: 6px;
	padding: 25px;
	margin: 20px
}
.stepper {
	font-size: 22px;
}
.clickable:hover {
	background-color: #efefef;
}
.sidebar {
	background-color: #c8e9e9;
	display: inline-block;
	position: absolute;
	top: 46px;
	left:70%;
	bottom: 0;
	width: 30%;
	padding: 10px;
}
.title {
	font-size: 28px;
	display: inline-block;
}
.title-date {
	padding-top: 12px;
	float: right;
	display: inline-block;
	color: #00000066;
}
.widget {
	display: inline-block;
	border-radius: 5px;
	background-color: #ffffff;
	padding: 6px;
	margin: 6px;
	float: left;
	max-width: 700px;
	border-style: solid;
	border-color: rgba(0,0,0,0);
	border-width: 2px;
}
.widget:hover {
	border-style: solid;
	border-color: rgba(0,0,0,0.125);
	border-width: 2px;
}
.widget-title {
	border-bottom: 2px solid rgba(0,0,0,0.75);
	align-content: center;
}
.calculation {
	display: inline;
	color: rgb(48,24,24);
}
input {
	max-width: 100%;
}
table, th, td {
	border: 1px solid rgba(0,0,0,0.75);
	border-collapse: collapse;
}
.primary-button {
	background-color: #44aaaa;
	border-color: #00000040;
	padding: 20px;
	margin: 3px;
	border-radius: 10px;
	border: 3px solid #00000080;
	font-size: 50px;
	color: #f0f0f0;
	max-width: 450px;
	text-decoration: none;
}
.primary-button:hover {
	background-color: white;
	color: #0f0f0f;
}
.indigo {
	background-color: #173f5f;
}
.indigo:hover {
	background-color: #173f5f88;
}
.blue {
	background-color: #20639b;
}
.blue:hover {
	background-color: #20639b88;
}
.green {
	background-color: #3caea3;
}
.green:hover {
	background-color: #3caea388;
}
.yellow {
	background-color: #f6d55c;
}
.yellow:hover {
	background-color: #f6d55c88;
}
.red {
	background-color: #ed553b;
}
.red:hover {
	background-color: #ed553b88;
}
.scarlet {
	background-color: #d11141;
}
.scarlet:hover {
	background-color: #d1114188;
}
.forest {
	background-color: #00b159;
}
.forest {
	background-color: #00b15988;
}
.sky {
	background-color: #00aedb;
}
.sky:hover {
	background-color: #00aedb88;
}
.orange {
	background-color: #f478335;
}
.orange:hover {
	background-color: #f4783588;
}
.gold {
	background-color: #ffc425;
}
.gold:hover {
	background-color: #ffc425;
}
.purple {
	background-color: #a200ff;
}
.purple:hover {
	background-color: #a200ff88;
}
.salmon {
	background-color: #f47835;
}
.salmon:hover {
	background-color: #f4783588;
}
.sand {
	background-color: #ffbe4f;
}
.sand:hover {
	background-color: #ffbe4f88;
}
.cyan {
	background-color: #6bd2db;
}
.cyan:hover {
	background-color: #6bd2db88;
}