/* Background and text */
body {
	background-repeat: repeat;
	background-size: auto;
	background-attachment: fixed;
	background-color: #63639f;
	background-image: url('files/images/purpmarb.jpg');
	image-rendering: high-quality;
	font-family: monospace;
	font-size: 16px;
	line-height: 1.6;
	color: #e1e1e1;
	text-shadow: 1px 1px 3px #444;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
	text-align: center;
}

/* Links */
a {
	color: #ffffff;
	word-wrap: break-word;
	text-shadow: 1px 1px 3px #9b63cc;
}

a:hover {
	animation: link 1.3s infinite;
}

/* Paragraphs */
p {
	width: 74%;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

/* Lists */
ol, ul, li, details {
	text-align: left;
	width: 84%;
	margin-right: auto;
	margin-left: auto;
	padding: 0%;
}

details p {
	margin-left: 0;
	width: auto;
}

/* Code */
code {
	background-color: rgba(48, 48, 77, 0.9);
	padding: 1px;
}

/* Quote blocks */
blockquote {
	text-align: left;
	width: 71%;
	margin-right: auto;
	margin-left: auto;
	padding: 0.65em;
	border-width: 5px;
	border-style: none none none solid;
	border-color: #8585bf;
}

hr {
	width: 95%;
}

/* Images */
img {
	max-width: 74%;
	text-align: center;
}

/* Tables */
table, th, td {
	margin-left: auto;
	margin-right: auto;
	border: 1px none #8585bf;
	border-radius: 20px;
	padding: 5px;
	border-spacing: 0;
}

table {
	padding: 0px;
}

th {
	background: rgba(48, 48, 77, 0.9);
}

/* Preformatted text */
pre {
	white-space: pre-wrap;
	width: 72%;
	margin-left: auto;
	margin-right: auto;
	padding: 0.65em;
	background: rgba(48, 48, 77, 0.9);
	border: 1px solid #8585bf;
	border-radius: 5px;
	text-align: left;
	overflow: auto;
}

nav {
	padding: 0.36em;
}

/* Custom Classes */

/* Center-aligned text */
.center {
	text-align: center;
}

/* Background and Menu */
.bg, .menu {
	background: rgba(48, 48, 77, 0.9);
	text-align: center;
	border: 1px solid #8585bf;
	border-spacing: 0;
	border-radius: 10px;
}

.bg {
	margin-bottom: 1%;
}

/* Table */
.table {
	border: 1px solid #8585bf;
	border-radius: 5px;
}

.table th, .table td {
	border-radius: 0px;
	padding: 10px;
}

/* Menu links */
.menu a {
	margin-right: 0.6em;
	margin-left: 0.6em;
}

/* Center image */
.center-img img:hover {
	animation: img-spin 2s linear;
}

.title img {
	animation-name: title-animation-rev;
	animation-duration: 0.25s;
	animation-time-function: ease-out;
}

.title img:hover {
	animation-name: title-animation;
	animation-duration: 0.25s;
	animation-time-function: ease-out;
	animation-fill-mode: forwards;
}

.index {
	border-style: hidden;
}

.index p {
	width: 100%;
}

.index img {
	max-width: none;
	text-align: left;
	animation-name: enby-shadow-rev;
	animation-duration: 0.5s;
	animation-time-function: ease-out;
}

.index img:hover {
	animation-name: enby-shadow;
	animation-duration: 0.25s;
	animation-time-function: ease-out;
	animation-fill-mode: forwards;
}

/* Center image animation */
@keyframes img-spin {
	100% { transform: rotate(0deg); }
	0% { transform: rotate(360deg); }
}

@keyframes title-animation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(-2deg); }
}

@keyframes title-animation-rev {
	0% { transform: rotate(-2deg); }
	100% { transform: rotate(0deg); }
}

@keyframes enby-shadow {
	0% { filter: drop-shadow(0px 0px 0px #000); }
	100%{ filter: drop-shadow(2px 2px 0px #fff433) drop-shadow(2px 2px 0px #ffffff) drop-shadow(2px 2px 0px #9b59d0) drop-shadow(2px 2px 0px #2d2d2d); }
}

@keyframes enby-shadow-rev {
	0%{ filter: drop-shadow(2px 2px 0px #fff433) drop-shadow(2px 2px 0px #ffffff) drop-shadow(2px 2px 0px #9b59d0) drop-shadow(2px 2px 0px #2d2d2d); }
	100% { filter: drop-shadow(0px 0px 0px #000); }
}

/* Hovered link animation */

@keyframes link {
	0% { color: #ffffff; }
	50% { color: #c27cff; }
	100% { color: #ffffff; }
}

/* Responsive design */
@media screen and (max-width: 600px) {
	.menu {
		float: none;
	}

	.menu a {
		padding: 0.25em;
		display: block;
	}
}

@media screen and (max-width: 960px) {
	#index-image {
		display: none;
	}
	.index p {
		margin: 0px;
	}
}

@media screen and (orientation: portrait) {
	#index-image {
		display: none;
	}
	.index p {
		margin: 0px;
	}
}