header {
	background: #ff2518;
	color: white;
}

h1, h2, .ribbon p, .ribbon a {
	font-family: 'Fira Sans', sans-serif;
}

h3 {
	font-family: 'Reenie Beanie', cursive;
}

h3 {
		font-size: 120%;
}

body, p, a {
	font-family: 'Noto Serif', serif;
	color: black;
}

a, a:active, a:focus {
	color: black;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	font-weight: bold;
        color: #ff2518;
}

#banner-logo {
	display: none;
	background-image: url('../img/serilog.png');
	background-repeat: no-repeat;
}

.pre, code {
	font-family: 'Inconsolata', monospace;
}

.pre {
	background: #444;
	color: white;
	padding: 1rem;
	border-radius: 5px;
	white-space: pre;
	overflow: scroll;
}

.pre .string {
	color: #ff2518;
}

.pre .keyword {
	font-weight: bold;
}

.pre .token {
	font-weight: bold;
}

.pre .number {
	color: #6ED;
}

footer {
	color: #DDD;
	font-style: italic;
	font-size: 80%;
}

.highlight {
	background-color: rgba(47, 237, 111, 1);
	border-radius: 3px;
	padding-left: 0.1rem;
	padding-right: 0.1rem;
}

a.highlight:active, a.highlight:focus {
        color: white;
}

.ribbon {
	background: #EEE;
	text-align: center;
}

.ribbon p {
	font-size: 120%;
}

.ribbon p, .ribbon a {
	color: #999;
}

.pluralsight {
  display: inline-block;
  height: 1.8em;
  margin-bottom: -0.85em;
  margin-left: 0.2em
}

footer {
	text-align: center;
}

@media (min-width: 40rem) {
	h3 { font-size: 140%; }

	#banner-logo {
		display: block;
		width: 267px;
		height: 256px;
		background-size: 267px 256px;
	}

	.pre {
		white-space: pre-wrap;
		overflow: hidden;
	}
}

@media (min-width: 64rem) {
		h3 { font-size: 160%; }
}