html {
  font-family: "Georgia", serif;
  color: #cccccc;
	text-decoration: none;
  justify-content: center;
  align-items: center;
}

pre {
	font-size: 125%;
	font-family: monospace;
	margin: 5% 0 5% 0;
}

body {
  margin: 20vh auto 10vh auto;
  font-size: 110%;
  width: 40%;
  background-color: #333333;
}

h1, h2, h3 {
  font-family: "Helvetica", sans-serif;
	font-weight: bold;
	text-align: left;
}

h1 {
  font-size: 300%;
  margin: 10% 0 3% 0;
}

h2 {
	font-size: 200%;
  margin: 5% 0 3% 0;
}

h3 {
	font-size: 150%;
	margin: 2% 0 2% 0;
}

p {
	margin: 0 0 2% 0;
}

p.date {
  font-family: "Courier-new", monospace;
  margin: 0 0 5vh 0;
}

p.menu {
	font-size: 125%;
	font-family: monospace;
	margin: 8% 0 0 0;
}

ul, ol {
	padding-left: 2em;
	padding-right: 1em;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}

table {
  margin: 5% auto 5% auto;
  width: 96%;
  text-align: center;
  border: 1px solid #5da048;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #5da048;
}

figure {
  float: center;
  width: 100%;
  margin: 5% auto 5% auto;
}

figcaption {
  text-align: center;
  font-family: "Helvetica", sans-serif;
  font-size: 90%;
}

img {
	width: 100%
}

a {
  text-decoration: none;
}
a:link {
  color: #7ceb59;
}
a:visited{
  color: #727be0;
}
a:hover {
  color: #727be0;
}

@media screen and (max-width: 1600px) {
  body {
    width: 60%;
  }
}

@media screen and (max-width: 1024px) {
  body {
    width: 80%;
  }
}

@media screen and (max-width: 600px) {
  body {
    width: 90%;
  }
  h1 {
    font-size: 200%;
  }
  h2 {
    font-size: 150%;
  }
  h3 {
    font-size: 125%;
  }
}