@font-face {
  font-family: firacode;
  src: url(font/firacode/FiraCodeNerdFont-Regular.ttf);
}
body{
  background-color: #182029;
  color: #C5D9CA;
  text-align: center;
  font-family: firacode;
  font-size: 1em;
}
a, a:visited, a:link{
  cursor:hover;
  color: #B0DAE0;
}
a:hover, a:active {
  color: #D0F0FF;
}
#header{
  text-align: center;
  margin: 10px auto;
  margin-top: 50px;
  font-size: 1vw;
  color: #80F0FA;
}
#navigation {
  font-size: 1.15em;
  color: #C5D9CA;
  border-collapse: collapse;
}
@media all and (max-device-width: 80em) {
#header {
  font-size: 2.25vw;
}
}
td {
  background: #182029;
  padding-left: 1.5em;
}
tr {
  padding: 0px;
}
label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  margin-top: 1em;
  font-size: 1.1em;
}
label:before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 10px;
  position: absolute;
  left: 0;
  background-color: #2a373c;
  transition: all 0.3s;
  font-size: 1.0em;
}

input[type=checkbox] {
  display: none;
}
.checkbox label:before {
  border-radius: 3px;
}
input[type=checkbox]:checked + label:before {
  content: "\2713";
  color: #fff;
  text-align: center;
  vertical-align: sub;
  background-color: #556071;
}
.info_table {
  padding: 2px;
  border-radius: 4px;
  background: #2a373c;
}
.info_table td{
  background: #2a373c;
}
.spacer{
  display: block;
  height: 15em;
}
.sym{
  display: inline;
  font-size: 1.5em;
}
#footer{
  position: fixed;
  bottom: 0px;
  background-color: #050505;
  width: 100%;
  left: 0px;
  height: 30px;
  color: #B5B5B5;
  padding-top: 5px;
}
.content {
  max-width: 100em;
  text-align: left;
  margin-top: 5em;
  margin-left: 5em;
  padding-bottom: 2em;
  font-size: 1.2em;
}
@media all and (max-device-width: 80em) {
.content {
  margin-left: 1em;
  max-width: 70em;
}
}
h3, h4{
  text-decoration: underline;
}
#statusline {
  position: fixed;
  bottom: 35px;
  left: 0px;
  text-align:left;
  padding-left: 10px;
  color: #B5B5B5;
  width: 100%;
  background-color: #161825;
}
.blog_card{
  display:block; 
  margin-bottom:3em;
  padding: 0.5em 1em;
  padding-top:0.1em;
  padding-bottom: 1em;
  border: 2px solid #55808A;
  max-width:70em;
}
button {
  border-radius: 0.6em;
  border: 1px solid #509080;
  background-color: #305050;
  color: #fff;
  background-color: transparent;
  transition: all 0.5s;
  padding: 1em 2em;
  cursor: pointer;
  color: #C5D9CA;
  font-weight: bold;
  margin-left: 1.5em;
  margin-right: 1.5em;
  margin-top: 1.0em;
  margin-bottom: 1.0em;
}
button:hover {
  background-color: #509080;
}
input[type=text] {
  border-radius: 0.6em;
  border: 1px solid #509080;
  background-color: #203030;
  padding: 0.5em 0.2em;
  color: white;
  transition: all 0.2s;
  outline: none;
}
input[type=text]:focus {
  background-color: #102525;
  border: 2px solid #508070;
  outline: none;
}
code {
	padding: 0.2em 0.5em;
	background-color: #050809;
	border: 2px solid #76B5C9;
	border-radius: 1em;
}
pre code {
	display: inline-block;
	padding: 1em 1.5em;

}
.hljs-title {
	color: #D090D0;
}
.hljs-type {
	color: #D9B0A0;
}
.hljs-string {
	color: #90D0B0;
}
.hljs-built_in {
	color: #9FBFDF;
}
.hljs-keyword {
	color: #9FBFDF;
}
.hljs-number {
	color: #9090FF;
}
.hljs-comment {
    color: #809990;
}

.hljs-variable {
	color: #D0C050;
}