* {
  font-family: sans-serif;
  font-size: 32px;
}

body {
  margin: 0;
}

pre {
  background-color: #333;
  color: #fefefe;
  padding: 1em;
}

code {
  font-family: monospace;
}

.wrapper {
  display: flex;
  justify-content: center; /* Horizontally centers the child elements */
  align-items: center; /* Vertically centers the child elements */
}

article {
  width: 80%;
}

.footer {
  background-color: #333;
  margin: 0;
  margin-top: 5em;
  padding: 5em;
}

.footer .home {
  padding: 5em;
  text-align: center;
}

.footer ul {
  display: block;
}

.footer li {
  display: block;
}

.footer a {
  color: #fff;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}


@media only screen and (max-width: 600px) {
	* {
		font-size: 24px;
	}
	h1 {
		margin-top: 1em;
		margin-bottom: 0;
	}
	article { 
		width: 90%;
	}
	article h1 {
		font-size: 32px;
		border-bottom: 1px solid black;
	}
	pre,code {
		font-size: 12pt;
		white-space: pre-wrap;
		overflow-wrap: break-word;
	}
	.footer {
		padding: 0.1em;
		margin-top: 1em;
	}
	.footer li {
		margin-top: 1em;
	}
	.footer .date {
		display: block;
	}
}