* {
	scrollbar-width: thin;
	scrollbar-color: hsl(205, 100%, 15%) hsl(205, 100%, 5%);
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 300;
	background: hsl(205, 10%, 10%);
	min-height: 100vh;
	color: #EEEEEE;
	text-align: justify;
}

a {
	color: inherit;
}

a:hover {
	color: hsl(205, 100%, 50%);
}

.codehilite > pre {
	padding: 10px;
	overflow: overlay;
}

.codehilite {
	border-radius: 7px;
	font-size: 12pt;
}

code {
	padding: .1em;
	border-radius: 5px;
	background: #272822;
}

p {
	font-size: 14pt;
	line-height: 1.5;
}

h1 {
	font-size: 28pt;
	font-weight: 700;
}

h2 {
	font-size: 20pt;
	font-weight: 500;
}

h3 {
	font-size: 16pt;
	font-weight: 500;
}

footer {
	text-align: right;
	font-size: 14pt;
	font-weight: 300;
	padding: 20px;
	padding-bottom: 15px;
	background: linear-gradient(180deg, hsl(205, 100%, 10%), hsl(205, 50%, 5%));
	color: #BBBBBB;
	border-top: medium solid #00A0FF;
}

header {
	height: 30vh;
	min-height: 350px;
	background-image: linear-gradient(45deg, hsl(205, 100%, 15%), hsl(205, 100%, 5%));
	display: flex;
	flex-flow: column;
	border-bottom: 2px solid #00A0FF;
}

main, nav {
	margin: auto;
	max-width: 1000px;
	padding: 0px 20px 0px 20px;
}

nav p {
	color: #bbb;
}

nav > div {
	background-color: hsl(0, 0%, 20%);
	border-radius: 10px;
	padding: 20px 20px 1px 20px;
	margin-block: 0px;
	margin: 60px 0px;
	box-shadow: hsl(0, 0%, 7%) 0px 0px 10px 5px;
	transition: 150ms;
}

nav > div:hover {
	background-color: hsl(0, 0%, 22%);
	margin: 65px 0px 65px 0px;
	box-shadow: hsl(0, 0%, 7%) 0px 0px 10px 10px;
}

nav a {
	text-decoration: none;
}

nav h1 {
	margin-block: inherit;
	text-decoration: underline;
}

.style-social {
	display: flex;
	width: 100%;
	margin: auto;
}

.style-social a {
	width: 50px;
	margin: auto;
}

.style-social a :hover {
	opacity: 0.7;
	transition: .3s;
}


.style-jumbotron {
	text-align: center;
	margin: auto;
	font-family: monospace;
	font-weight: 400;
	font-size: 38pt;
	color: hsl(205, 100%, 50%);
	cursor: url("../images/think.png"), auto;
}

.style-jumbotron:after {
	content: '';
	width: 5px;
	height: 36pt;
	background: hsl(205, 100%, 50%);
	opacity: 0;
	display: inline-block;
	animation: blink 0.5s 3.0s infinite alternate;
	animation-timing-function: step-start;
}

@keyframes blink {
	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}