/*
Change these options to customize the color scheme and a few layout options of your website.
Most layout options are stored in src/css/style.css. I do not recommend messing with those settings
unless you know what you're doing, or you're willing to spend a lot of time on trial and error.

For any colors, you can represent them in hexadecimal like this (#FF0000 = red)
or use this list of available color names: https://www.w3schools.com/cssref/css_colors.asp
 */
 
* {
	box-sizing: border-box;
}

body {
	font-family: 'PT Sans', sans-serif;  /* The font of all the text on all pages */
	color: black;  /* The color of the font of most of the text on your website */
	background-color: white;  /* The color of the background behind everything */
	background-image: url("background_image.png");  /* The pattern on the background. Delete to change to a solid color
													 or replace with your own image to tile across your background. */
}

a {
	color: maroon;  /* The color of the hyperlinks */
}

div#container {
	background-color: black;  /* The background color of the main box */
	box-shadow: 5px 5px 10px; /* If you change the background color of website, play with this or else it will look bad. */
}

img#banner-img {
	width: 100%;  /* The width of your banner image */
	height: 100%;/* The height of your banner image */
}

a.link-bar-link {
	color: white;  /* The color of the links in your links bar */
	text-decoration: none;  /* Delete this line to put underlining on the links in your links bar */
	font-size: 22pt;
}

div#links-bar {
	background-color: indianred;
	margin-bottom: 15px;
	padding: 5px;
	display: flex;
	justify-content: center;
}

div#links-bar-mobile, .mobileMenu {
	display: none;
}

a.link-bar-link:hover { 
	color: black;
}

div#comic-page {
	width: 100%;  /* The width of your comic page */
	height: auto; /* The height of your comic page */
	margin-top: 15px;
}

a.navigation-button {
	color: indianred;  /* Color of the navigation bar hyperlinks */
	font-size: 24pt;  /* Size of the navigation bar hyperlinks */
	text-decoration: none;  /* Delete this if you want your navigation links to be underlined */
	background-color: #F5EDDF;
	padding-top: 2px;
	margin: 2px;
	border-radius: 14px;
}

.navigation-button.next, .navigation-button.previous {
	color: #2980B9;
}
  
a.navigation-button:hover {
	color: white;
	background-color: #2980B9;
}

a.navigation-button-disabled {
	color: gray;  /* Color of the disabled navigation bar hyperlinks */
	font-size: 24pt;  /* Size of the disabled navigation bar hyperlinks */
	text-decoration: none;  /* Delete this if you want your disabled navigation links to be underlined */
	padding-top: 2px;
	margin: 2px;
}

div#blurb, div#patrons {
	width: 80%;  /* The maximum width of the blurb box. */
	outline: 10px double black;
	outline-offset: -5px;
	background-image: url("papertexture.png");
}

div#patrons {
	max-width: 500px;
}

.patronList, .tiers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

h1#page-title {
	color: maroon;  /* Color of the post title */
	font-size: 24pt;  /* Font size of the post title */
}

#blurb h1#page-title {
	color: maroon;
}

div#post-date {
	font-weight: bold;  /* Delete this to unbold the post date */
}

div#tags {
	font-style: italic;  /* Delete this to unitalicize the tags */
}

h1#page-title {
	color: white;  /* The color of the page title, on pages like archive.html and tagged.html */
	font-size: 50px;  /* The font size of the page title */
	font-family: Dreadful-Regular;
}

div.cast-member {
	background-color: lightgray;  /* The color of the box containing each cast member's entry on the cast page. */
}

img.cast-member-picture {
	border-radius: 10px;  /* Remove this to remove the rounding from the corners of the cast member pictures on the cast page. */
}

div.cast-member-name {
	font-size: 18pt;  /* The font size of the cast member's name in their bio */
	color: maroon;  /* The color of the cast member's name in their bio */
}

div#blurb {
	font-family: 'Pangolin';
	padding: 15px 30px 30px 30px;
}

.volumeBanner {
	margin-top: 15px;
}

div#blurb h2{
	font-weight: bold;
}

div#patrons {
	font-family: 'Pangolin';
	font-weight: bold;
	padding: 6px 30px 18px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
}

.buttons {
	text-align: center;
	display: inline-block;
}

.support {
	padding-bottom: 20px;
}

.link-bar-link, .navigation-button, .navigation-button-disabled, .dropbtn { 
	font-family: Dreadful-Regular;
}

.announcement {
	font-family: 'Pangolin';
	font-size: 45px;
	display: inline-block;
}
  
.welcome {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
  
.archive-thumbnail-page img:hover {
	filter: brightness(120%);
	-webkit-filter: brightness(120%);
}

.archive-section { 
	font-size: 26px;
	margin: 4px;
	margin-top: 15px;
}

 .dropbtn {
	background-color: indianred;
	color: white;
	padding: 16px;
	font-size: 25px;
	border: none;
	cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
	background-color: #2980B9;
}

.dropdown {
	position: relative;
	display: inline-block;
	z-index: 1;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	font-family: 'Pangolin';
}
  
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
 
.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
 
.mainMenu {
	color: white;
	font-family: 'Pangolin';
	font-size: 20px;
}

.ackChibi {
	display: inline-block;
	max-height: 400px;
	border: 4px solid transparent;
	transition: ease.3s;
	border-radius: 25px;
}

.avaChibi {
	display: inline-block;
	max-height: 400px;
	border: 4px solid transparent;
	transition: ease .3s;
	border-radius: 25px;
}

@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

#copy-modal.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#copy-modal {
	visibility: hidden;
	display: table;
	width: 200px;
	border-radius: 0.6em;
	position: fixed;
	z-index: 2;
	bottom: 30px;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
}

.wideWarning {
	display: none;
}

#caught-up-notification {
	color: white;
	font-family: 'Pangolin';
}

.supportButtons {
	padding-left: 10px;
	padding-right: 10px;
}

#copy-info {
	padding: 1em 2em;
	background-color: indianred;
	color: white;
	font-family: 'Pangolin';
}

.imageLeft {
	position: absolute;
	right: 50%;
}


.imageRight{
	position: absolute;
	left: 50%;
}

.blankPage {
	visibility: hidden;
	width: 50vw;
}

.author p, .artist p, .author h1, .artist h1, .author a, .artist a, .additional p, .additional h1, .additional a{
	font-family: 'Pangolin';
	color: white;
}

.about {
	padding: 20px;
}

.artist h2, .author h2, .additional h2{
	line-height: 4px;
	color: maroon;
}

.aboutAuthor, .aboutArtist, .aboutCharlie, .aboutAriya, .aboutRico {
	display: grid;
	grid-template-areas: "links text";
}

.artistPhoto {
	width: 365px;
}

.artistText, .authorText, .editorText {
	grid-area: text;
	color: white;
	font-family: 'Pangolin';
	padding-left: 30px;
	padding-right: 30px;
	display: table;
}

.tiers span {
	padding: 10px;
	flex: 1;
}

.authorText p, .artistText p, .editorText p {
	font-size: 18px;
}

.editorText p {
	display: table-cell;
	vertical-align: middle;
}

.artistLinks, .authorLinks {
	grid-area: links;
	color: white;
	font-family: 'Pangolin';
	align-self: center;
}

.authorPhoto {
	width: 365px;
}

.ackChibi:hover {
	border-color: orange;
}

.avaChibi:hover {
	border-color: lightblue;
}

.patreon {
	color: white;
	display: inline-block;
	font-weight: bold;
	padding: 10px 20px;
	border-radius: 1.2em;
	transition: ease 0.2s;
	background-color: #F35E36;
	font-family: 'Rubik', sans-serif;
	text-decoration: none;
}

#patreon-button {
	grid-area: patreon;
}

#kofi-button {
	grid-area:kofi;
}
 
#share-button {
	grid-area: share;
}

.kofi {
	color: white;
	display: inline-block;
	font-weight: bold;
	padding: 10px 20px;
	border-radius: 1.2em;
	transition: ease 0.2s;
	background-color: #29ABE0;
	font-family: 'Rubik', sans-serif;
	text-decoration: none;
}

.share {
	color: white;
	display: inline-block;
	font-weight: bold;
	padding: 10px 20px;
	border-radius: 1.2em;
	transition: ease 0.2s;
	background-color: #68ad43;
	font-family: 'Rubik', sans-serif;
	text-decoration: none;
}

.patreon:hover {
	background-color: #052D49;
}

.kofi:hover {
	background-color: #FBAA19;
}

.share:hover {
	background-color: #E33E2A;
	cursor: pointer;
}

.summary {
	width: 50%;
	padding-left: 4px;
	padding-right: 4px;
}

.patronList {
	padding-top: 20px;
}

.tiers {
	width: 100%;
}

.separate {
	border-bottom: 3px solid black;
}

.column {
	padding-left: 20px;
	padding-right: 20px;
}

.patrons {
	margin: auto;
	width: 80%;
}

.avaTier {
	color: blue;
}

.ackerleyTier {
	color: brown;
}
  
.apprenticeTier {
	color: red;
}
  
.bearerTier {
	color: magenta;
}

.castBorder {
	border: 6px solid white;
}

.castpage {
	width: 100%;
	color: white;
	font-family: 'Pangolin';
}

.image{
	width: 30%;
	background-image: url("papertexture.png");
}

.description {
	padding: 25px;
	background-image: url("papertexture.png");
}
  
.description p {
	font-weight: normal;
}

.ref {
	font-family: 'Pangolin';
	font-size: 20px;
	text-decoration: none;
}
 
.info {
	padding-right: 40px;
	border-right: none;
}

.castImage {
	width: 95%;
	margin: 0 auto;
	display: block;
	box-sizing: border-box;
}

.castpage h2 {
	line-height: 4px;
	color: maroon;
}
 
.castpage p {
	line-height: 20px;
	color: black;
	font-size: 20px;
}

.summaryMobile {
	display: none;
}

div#container {
	width: 90%;
	max-width: 1060px;
}

.zoomCursor {
	cursor: zoom-in;
}
  
.zoomImage {
	cursor: zoom-out;
	position: absolute;
	left: 50%;
	margin-left: -1000px;
	width: 2000px;
}

.blankPageWide {
	width: 100vw;
	display: none;
	visibility: hidden;
}
  
.blankPageAppear {
	display: block;
}
  
.spread {
	display: inline-block;
	max-width: 50%
}
  
.nextPage {
	pointer-events: none;
}
  
  @media only screen and (max-width: 2000px) {
	  .zoomImage {
		margin-left:0px;
		left: 0;
		width: 2000px;
		max-width: 100%;
	  }
  }
  
  @media only screen and (max-width: 1000px) {
	.mainMenu {
		font-size: 15px;
	}
	  
	.announcement {
		font-size: 28px;
	}
}
  
@media only screen and (max-width: 900px) {
	.aboutAuthor, .aboutArtist, .aboutCharlie, .aboutAriya, .aboutRico {
		display: block;
	}
	  
	.artistPhoto, .authorPhoto, .artistText, .authorText, .editorText {
		padding-bottom: 20px;
	}
	 
	.archive-section { 
		font-size: 22px;
	}
	  
	.mainMenu {
		font-size: 20px;
	}
	  
	.announcement {
		font-size: 45px;
	}
	  
	.authorLinks, .artistLinks {
		padding-bottom: 20px;
	}
	  
	div#container {
		width: 95%;
		padding: 20px;
		margin: 0px;
	}
  
	.pageLinks {
		width: 50%;
	}
		  
	.summaryMobile {
		display: block;
	}
  
	.holdsBar {
		position: relative;
	}
  
	.wideWarning {
		position: absolute;
		max-width: 600px;
		height: 145px;
		background-color: indianred;
		color: white;
		width: 95%;
		z-index: 1;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 100px;
		display: block;
		text-align: center;
		font-family: 'Pangolin';
		font-weight: bold;
		font-size: 20px;
		padding: 15px;
		border: solid 5px black;
	}
	  
	#thankYou{
		width: 148px;
		height: 47px;
		background-color: white;
		margin-top: 5px;
		padding-top: 10px;
		margin-left: auto;
		margin-right: auto;
		color: black;
	}
	
	#thankYou:hover {
		background-color: blue;
		cursor: pointer;
		color: white;
	}
	
	.hideBox {
		display: none;
	}
  
	.summary {
		display: none;
	}
	  
	a.link-bar-link {
		color: white;  
		text-decoration: none; 
		font-size: 20pt;
	}
}
  
@media only screen and (max-width: 800px) {
	  
	.linkCursor {
		cursor: pointer;
	}
	  
	.nextPage {
		pointer-events: all;
	}
  
	div#patrons {
		width: 88%;
	}
  
	.zoomImage {
		cursor: auto;
		position: relative;
	}
	  
	.zoomCursor {
		cursor: auto;
	}
  
	.blankPageAppear {
		display: none;
	}
	  
	.supportButtons {
		display: grid;
		grid-template-areas: "patreon" "kofi" "share";
	}
  
	.buttons{
		margin: 4px;
	}
  
	.mainMenu p {
		padding-left: 20px;
		padding-right: 20px;
	}
  
	div#container {
		width: 100%;
		padding: 0;
	}
  
	body {
		margin: 0;
	}
  
	div#blurb {
	  padding: 32px;
	}
  
	.archive-section { 
		font-size: 17px;
	}
  
	div#blurb {
		width: 88%;
	}
  
	.announcement {
		font-size: 34px;
	}
  
	.mainMenu {
		font-size: 17px;
	}
  
	div#links-bar {
		display: none;
	}
  
	.menuHide {
		display: none;
	}
  
	.wideWarning {
		font-size: 16px;
	}
  
	div#links-bar-mobile {
		background-color: indianred;
		margin-bottom: 15px;
		display: flex;
		justify-content: center;
		position: absolute;
		width: 100%;
		z-index: 2;
	}
  
	.mobileMenu {
		background-color: indianred;
		display: flex;
		justify-content: center;
	}
  
	.mobileMenu {
		color: white;
		text-decoration: none;
		font-size: 24pt;
		font-family: Dreadful-Regular;
		height: 45px;
		padding-top: 9px;
	}
  
	#thankYou {
		font-size: 20px;
	}
  
	.mobileMenu:hover, #links-menu li:hover {
		background-color: white;
		color: black;
		cursor: pointer;
	}
  
	#links-menu li:hover a {
		color: black;
	}
  
	#links-menu li {
		width: 100%;
		list-style-type: none;
		height: 45px;
		padding: 9px;
	}
  
	#links-menu {
		padding: 0;
		list-style-type: none;
		width: 100%;
		margin: 0;
	}
  
	.description {
		width: 100%;
		background-image: url("papertexture.png");
		display: flex;
		flex-direction: column;
	}
  
	.menuToggled {
		background-color: white;
		color: black;
		content: "Hide Menu";
	}

<<<<<<< Updated upstream
  
=======

.buttons{
	margin: 4px;
}

.mainMenu p {
	padding-left: 20px;
    padding-right: 20px;
}
	
div#container {
	width: 100%;
	padding: 0;
}

body {
	margin: 0;
}
	
div#blurb {
padding: 32px;
}
	
.archive-section { 
	font-size: 17px;
}
	
div#blurb {
	width: 88%;
}
	
.announcement {
	font-size: 34px;
}

.mainMenu {
	font-size: 17px;
}
	
div#links-bar {
	display: none;
}

.menuHide {
	display: none;
}

.wideWarning {
	font-size: 16px;
}

div#links-bar-mobile {
    background-color: indianred;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
	position: absolute;
	width: 100%;
	z-index: 2;
}

.mobileMenu {
    background-color: indianred;
    display: flex;
    justify-content: center;
}

.mobileMenu {
	color: black;
	text-decoration: none;
	font-size: 22pt;
	font-family: Dreadful-Regular;
	height: 45px;
	padding-top: 9px;
}

#thankYou {
	font-size: 20px;
}

.mobileMenu:hover, #links-menu li:hover {
	background-color: white;
	color: black;
	cursor: pointer;
}

#links-menu li:hover a {
	color: black;
}

#links-menu li {
	width: 100%;
	list-style-type: none;
	height: 45px;
	padding: 9px;
}

#links-menu {
	padding: 0;
    list-style-type: none;
	width: 100%;
	margin: 0;
}

.description {
	width: 100%;
	background-image: url("papertexture.png");
	display: flex;
	flex-direction: column;
}

.menuToggled {
	background-color: white;
	color: black;
	content: "Hide Menu";
}
}

>>>>>>> Stashed changes
@media only screen and (max-width: 500px) {
	div#navigation-bar {
		display: grid;
		margin: 0 auto 20px auto;
		font-weight: bold;
		justify-content: center;
		grid-template-areas: "previous next" "first last";
	}

	.mobileMenu {
		color: white;
		text-decoration: none;
		font-size: 22pt;
		font-family: Dreadful-Regular;
		height: 45px;
		padding-top: 9px;
	}
}
  
.next {
	grid-area: next;
}
  
.previous {
	grid-area: previous;
}
  
.first {
	grid-area: first;
}
  
.last {
	grid-area: last;
}

@media only screen and (max-width: 450px) {
	.about h1 {
		font-size: 20px;
	}
	  
	.artistText, .authorText, .editorText {
		padding-left: 20px;
		padding-right: 20px;
	}
  
	.column span, .tiers span {
		font-size: small;
		font-weight: normal;
	}
}
  
@media only screen and (max-width: 359px) {
	.kofi {
		margin-top: 10px;
	}
  
	.wideWarning {
		font-size: 14px;
	}

	.mobileMenu {
		color: white;
		text-decoration: none;
		font-size: 18pt;
		font-family: Dreadful-Regular;
		height: 45px;
		padding-top: 12px;
	}
}