@font-face {
    font-family: ComicRV;
    src: url(Comic_rv_esp-Regular.ttf);
}

body {
	font-family: comicRV, "Comic Sans MS", "Comic Sans", sans-serif;
	background-color: #C0B2A4;
    color: #000000;
}

header {
    background-color: #000000;
    display: flex;
}

header img {
    width: 300px;
    max-width: 98%;
}

header #nav {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
    background-color: transparent;
    padding-right: 80px;
}

#nav div {
	margin-top: 5px;
	text-align: center;
}

#nav div:nth-child(1) {
    width: 240px;
}
#nav div:nth-child(2) {
    width: 200px;
}
#nav div:nth-child(3) {
    width: 300px;
}

a {
    color: #FFFFFF;
	text-decoration: none; 
}

a:hover {
    color: #FFFFFF;
}

#nav div a {
	font-size: 40px;
	transition: all 0.15s ease;
}
#nav div a:hover {
	font-size: 50px;
}

#authorNotes {
	font-family:comicRV;
    color: #000000;
    padding: 10px;
}

#authorNotes p {
    margin: 10px;
	font-size: 30px;
}

#authorNotes a {
    color: #000000;
	font-size: 30px;
}

#authorNotes a:hover {
    font-size: 50px;
}

.comicNav {
    margin: 5px;
}
.comicNav img {
    height: 40px;
    width: 40px;
}

h1 {
	font-family: ComicRV, "Comic Sans MS", "Comic Sans", sans-serif;
	color: black;
	font-size: 60px;
	padding-top: 20px;
}
h2 {
	font-family: ComicRV, "Comic Sans MS", "Comic Sans", sans-serif;
	color: black;
	font-size: 40px;
	padding-top: 20px;
}

.comic-archive strong {
	font-family: ComicRV, "Comic Sans MS", "Comic Sans", sans-serif;
	color: black;
	font-size: 30px;
}

.archiveTable {
	border-collapse: separate !important;
	border-spacing: 0px 0px;
}

.writeAuthorNotes a {
	transition: all 0.15s ease;
}

.writePageTitle h1 {
	color: #FFFFFF;
}

.clearfix img {
	max-width: 300px;
	width: 25vw;
	margin: 0px 30px;
}

.charTable h2 {
	font-size: 40px;
}

.charTable p {
	text-align: justify;
	margin: 15px 30px;
}

.charTable span {
	font-family: comicRV, "Comic Sans MS", "Comic Sans", sans-serif;
	font-weight: bold;
	font-size: 20px;
}

.about-div {
	text-align: justify;
	margin: 0px 30px;
}

@media only screen and (max-width: 800px) {
	header {
		flex-wrap: wrap;
	}
	header img {
		width: 95%;
	}
	header #nav {
		flex-direction: column;
		padding-right: 0px;
	}
	header #nav div {
		margin: 8px;
	}	
	h1 {
		font-size: 40px;
	}
	.archiveTable {
		border-spacing: 0px 10px;
	}
	
	#support-button {	
		position: static !important;
		width: 100%;
		text-align: center;
	}
}

#numviews {
	color:white;
	font-size: 40px;
	font-family: comicRV, "Comic Sans MS", "Comic Sans", sans-serif;
}

#support-button {	
	position: fixed;
	right: 20px;
	bottom: 20px;
}
#support-button a img {
	width: 270px;
	height: 270px;
	transition: all 0.15s ease;
}
#support-button a:hover img {
	width: 300px;
	height: 300px;
	margin-right: -10px;
	margin-bottom: -10px;
}

/* April Fool's Day 
body {
	background-image: url(../img/RAM-BG.png);
	background-repeat: repeat;
	background-position: left -90px top -30px;
}
.writePageTitle h1 {
	color: #FFFFFF;
	text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
}
#numviews {
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
.comicNav img {
	filter: drop-shadow(1px 1px 0 black) 
		  drop-shadow(1px -1px 0 black)
		  drop-shadow(-1px 1px 0 black)
		  drop-shadow(-1px -1px 0 black)
		  drop-shadow(0px 1px 0 black)
		  drop-shadow(0px -1px 0 black)
		  drop-shadow(1px 0px 0 black)
		  drop-shadow(-1px 0px 0 black);
}




#banner {
        text-align: center;
        width: 100vw;
        margin-top: 50px;
}
#banner  img {
    width: 800px;
}

*/