body {
  background-color: #eff1f5;
  color: #4c4f69;
  font-family: sans-serif;
  line-height: 1.75em;
  /*padding: 15%;*/
	margin-left: 20%;
	margin-right: 20%;
	margin-top: 2em;
}
@media only screen and (max-width:50em) {
	body {
		margin-left:  5%;
		margin-right: 5%;
	}
}

.keyword {
  color: #179299; /* teal */
}

.type {
  color: #40a02b; /* green */
}

.comment {
  color: #7c7f93; /* overlay 2 */
}

.string {
  color: #dd7878; /* flamingo */
}

a {
  color: #179299;
}

h2 {
  margin-top: 2em;
}

h4 {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

ul {
  margin: 0.5em;
}
li {
	margin-bottom: 0.5em;
}

hr {
  color: #acb0be;
  background-color: #acb0be;
  border-top: 0.2em solid;
  margin-top: 2em;
}
.bottom-rule {
  margin-bottom: 1em;
}

.head {
  background-color: #e6e9ef;
  text-align: center;
  padding: 2em;
}

.entry {
  background-color: #e6e9ef;
  padding: 1em;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 12em;
}

table {
  width: 100%;
  border-collapse: collapse;
}
thead {
  display: none;
}
tr {
  border-bottom: 2px solid;
  border-color: #ccd0da;
}
tr:last-child {
  border-bottom: none;
}
td {
  height: 2.25em;
  padding: 0.2em;
  width: 20%;
}

pre {
	background-color: #dce0e8;
	overflow: auto;
	padding: 1em;
}

.math {
	line-height: 1em;
}

@media(prefers-color-scheme: dark) {
	body {
	  background-color: #24273a;
	  color: #cad3f5;
	}
	
	a {
	  color: #8bd5ca;
	}
	
	hr {
	  color: #6e738d;
	  background-color: #6e738d;
	}
	
	.head {
	  background-color: #1e2030;
	}
  	.entry {
      background-color: #1e2030;
  	}
  	tr {
      border-color: #363a4f;
    }
	pre {
	  background-color: #181926;
	}

	.keyword {
	  color: #8bd5ca; /* teal */
	}
	
	.type {
	  color: #a6da95; /* green */
	}
	
	.comment {
	  color: #939ab7; /* overlay 2 */
	}
	
	.string {
	  color: #f0c6c6; /* flamingo */
	}
}