footer {
	position: fixed;
	bottom: 0;
	width: 100vw;
	background: #191970;
	color: #fff;

	a {
		color: #add8e6;

		&:active,
		&:hover {
			color: #e6adad;
		}

		&:visited {
			color: #fd94ff;
		}
	}

	#footer-logo {
		width: 148px;
	}

	#footer-name {
		font-size: 50px;
		display: inline-block;
		vertical-align: middle;
		text-align: initial;
		font-family: "Courier New", Courier, monospace;
	}

	#footer-links {
		width: 50%;
		position: absolute;
		bottom: 20px;
		left: 50%;
		font-size: 32px;
		text-align: center;
	}
}

h1,
h2 {
	margin: 0 auto 10px;
	text-align: center;
}

.notBold {
	font-weight: 100;
}

//IMPROVE the below clode for the icons. Here is some minifed code that will only work once lesss/less.js#3053 is added
/*.html,.css,.js,.php,.mysql,.jquery,.txt,.java{font-weight:900;font-family:'Font Awesome 5 Free','Trebuchet MS','Lucida Sans Unicode','Lucida Grande','Lucida Sans',Arial,sans-serif;list-style:none;padding-right:5px;@html:'\f2d0';@css:'\f034';@js:'\f121';@php:'\f120';@mysql:'\f1c0';@jquery:'\f78c';@java:'\f11b';@txt:'\f15c';&::before{content+_:@&;content+_:'\a0';}}.txt::before{padding-right:7px;}*/

.txt::before {
	padding-right: 7px;
}

.html::before {
	content: "\f2d0\a0";
}

.css::before {
	content: "\f034\a0";
}

.js::before {
	content: "\f121\a0";
}

.php::before {
	content: "\f120\a0";
}

.mysql::before {
	content: "\f1c0\a0";
}

.jquery::before {
	content: "\f78c\a0";
}

.java::before {
	content: "\f11b\a0";
}

.txt::before {
	padding-right: 7px;
	content: "\f15c\a0";
}

.html,
.css,
.js,
.php,
.mysql,
.jquery,
.txt,
.java {
	font-weight: 900;
	font-family: "Font Awesome 5 Free", "Trebuchet MS", "Lucida Sans Unicode",
		"Lucida Grande", "Lucida Sans", Arial, sans-serif;
	list-style: none;
	padding-right: 5px;
}

.column:extend(#content) {
	display: table-cell;
	width: 50vw;
}

#content {
	height: 100vh;
	padding-bottom: 148px;
}

#right {
	background: #81b2e5;

	a {
		color: #002c5c;

		&:visited {
			color: hsl(0, 0%, 0%);
		}

		&:active,
		&:hover,
		&:focus {
			color: #5c0000;
		}
	}
}

.code {
	padding: 10px;
	font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas",
		"Liberation Mono", "Courier New", "Courier", monospace;
	word-wrap: normal;
	white-space: pre-wrap;
}

#left {
	background: #000116;
	color: #fff;
	padding: 10px;

	a {
		color: hsl(237, 66%, 84%);

		&:visited {
			color: hsl(26, 34%, 66%);
		}

		&:active,
		&:hover,
		&:focus {
			color: hsl(26, 66%, 84%);
		}
	}
}

body,
html {
	margin: 0;
	overflow-x: hidden;
	width: 100vw;
	padding: 0;
	font-display: swap;
}

hr {
	width: 100%;
	background: linear-gradient(45deg, rgb(238 238 238), #9a9a9a);
	border: 3.5px outset rgb(238, 238, 238);
}