@media only screen and (max-width: 768px) {

	/* SECTION:
	 *  Page Content Elements
	 * */

	body {
		overflow: hidden;

		font-family: Sans-serif;
		font-size: 1.0em;
	}

	.page-content {
		margin: 1vh auto;
		min-width: 96vw;
		height: 98vh;

		position: relative;

		box-shadow: 0px 0px 4px 4px #000000ff;
		border-radius: 0.5em;

		animation-name: slideFadeIn;
		animation-duration: 2s;
	}

	#header,
	#footer {
		padding: 16px;
		width: calc(100% - 32px);
		height: calc(1.4em);
	}


	#header {
		position: absolute;
		top: 0px;
		
		display: flex;
		justify-content: space-between;
	}

	#footer {
		position: absolute;
		bottom: 0px;
		
		display: block;
		justify-content: center;
	}

	#content {
		padding: 16px;
		width: calc(100% - 32px);

		position: absolute;
		top: calc(1.4em + 32px);
		bottom: calc(1.4em + 32px);

		overflow-x: hidden;
		overflow-y: auto;

		text-align: left;
		word-wrap: break-word;
	}

	/* SECTION:
	 *  HTML DOM Elements
	 * */

	a:link, a:visited {
		text-decoration: underline;
		font-weight: bold;

		color: #444444ff;
	}

	#a-nav {
		margin: 0px 4px;
		text-decoration: none;
		font-size: 1.4em;
	}

	h1, h2, h3 {
		padding: 0px;
		margin: 0px;
	}

	h1 { font-size: 1.2em; color: #222222ff; }
	h2 { font-size: 1.1em; color: #444444ff; }
	h3 { font-size: 1.1em; color: #888888ff; }

	p {
		color: #444444ff;
	}

	pre {
		font-family: monospace;
		font-size: 1.0em;
		
		margin: 0px auto;
		padding: 16px;
		width: 90%;
		max-width: 90%;

		overflow-x: auto;
		overflow-y: hidden;

		border-radius: 0.2em;

		color: #fafafaff;
		background: #444444ff;
	}

	/* SECTION:
	 *  HTML Class Elements
	 * */

	.div-left {
		width: 50%;
		left: 0px;
		text-align: left;
	}

	.div-right {
		width: 50%;
		right: 0px;
		text-align: right;
	}

	.div-center {
		text-align: center;
	}

	/* SECTION:
	 *  HTML CSS Animations
	 * */

	@keyframes slideFadeIn {
		0% {
			transform: translateY(10%);
			opacity: 0;
		}

		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
}