/* ------------------- PAGE FORMAT --------------------- */
  /* Format the page to put the bottom bar at the      */
  /* bottom of the page at all times.                  */
.html-page {
    min-height: 100%;
    position: relative;
    display: block;
    padding-bottom: 245px;
}
/* -------------------- BOTTOM BAR --------------------- */
  /* In my case, this will have the about section and  */
  /* the copyright area for the bottom of the page.    */
.bottombar {
	width: 100%;
	position: absolute;
	left: 0;
	height: auto;
	min-height: 225px;
	padding-bottom: 20px;
	background: rgb(50,50,50);
	font-family: 'Calibri', 'CalibriBackup', sans-serif;
	min-width: 275px;
	bottom: 0;
}
	.bottombar .desc a {
		transition: 0.15s;
		color: rgb(255, 255, 255);
		text-decoration: none;
	}

	.bottombar .desc a:hover {
		color: rgb(230, 230, 230);
		background: transparent;
		text-decoration: underline;
	}

	.bottombar .copyright {
		padding: 3px 0;
		width: 100%;
		font-size: 15px;
		color: rgb(170,170,170);
		bottom: 0;
		position: absolute;
		display: block;
		text-align: center;
		background: rgb(40,40,40);
	}
	.bottombar .copyright a {
		text-decoration: none;
		color: rgb(200,200,205);
		transition: .15s;
		cursor: pointer;
	}
	.bottombar .copyright a:hover {
		color: rgb(255,255,255);
	}
	.bottombar .contentbox {
		display: flex;
		padding: 15px 20px 25px 20px;
		width: 100%;
		max-width: 1040px;
		margin: 0 auto;
		height: 100%;
	}
		.bottombar .contentbox .profile-picture {
			height: 175px;
			border-radius: 50%;
			margin-top: 9px;
		}
		.bottombar .contentbox .about {
			display: inline-block;
			padding: 0 0 0 20px;
		}
		.bottombar .contentbox .title {
			font-size: 21.5px;
			color: rgb(248,248,248);
		}
		.bottombar .contentbox .title hr {
			flex: 1 1;
			display: block;
			border: 0;
			height: 2px;
			background: rgb(190,190,190);
			margin-left: 10px;
		}
		.bottombar .contentbox .desc {
			width: 100%;
			font-size: 17px;
			color: rgb(180,180,180);
			padding-bottom: 20px;
		}
/* ------------------------------------------------------ */
/* ------------------ RESPONSIVE DESIGN ----------------- */
/* ------------------------------------------------------ */
@media screen and (max-width: 885px){
	.bottombar {
		min-height: 165px;
	}
		.bottombar .contentbox .profile-picture {
			height: 125px;
			margin-top: 4px;
		}
		.bottombar .contentbox .about {
			padding: 0 0 0 20px;
		}
}
@media screen and (max-width: 650px){
	.html-page {
		padding-bottom: 310px;
	}
	.bottombar {
		min-height: 165px;
		padding-bottom: 0;
	}
	.bottombar .contentbox {
		flex-direction: column;
	}
		.bottombar .contentbox .profile-picture {
			position: relative;
			height: 75px;
			margin: 0 auto 10px auto;
		}
		.bottombar .contentbox .about {
			padding: 0 0 0 0;
		}
	.bottombar .copyright {
		padding: 3px 7px;
		position: relative;
		text-align: center;
	}
}
@media screen and (max-width: 570px){
	.html-page {
		padding-bottom: 350px;
	}
	.bottombar .contentbox {
		padding: 4px 7px 0 7px;
	}
}
@media screen and (max-width: 460px){
	.html-page {
		padding-bottom: 390px;
	}
}
@media screen and (max-width: 420px){
	.html-page {
		padding-bottom: 400px;
	}
}
@media screen and (max-width: 360px){
	.html-page {
		padding-bottom: 445px;
	}
}
@media screen and (max-width: 310px){
	.html-page {
		padding-bottom: 470px;
	}
}