body {
                font-family: 'Almendra SC';
                margin: 0;
				height:1500;
                background-size: 65px;
                color: white;
                background-image: linear-gradient(#FFFFFF1A, #044734BF), url(https://flabbergastcomic.com/img/pattern3.png);
				background-size: 4%;
				cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur686.cur'), auto;
            }

            * {
                box-sizing: border-box;
            }

           a {
				text-decoration:none;
				color:white;
				cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur683.cur'), auto;
	 
			}
			
			a:visted {
				text-decoration:none;
				cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur683.cur'), auto;
	 
			}

			a:hover {
				color: #fcba03;
				text-decoration:none;
				transform: scale(1.1),rotate(2deg);
				transition:.2s;
			}

			#hover:hover {filter: invert(75%); transition:.2s;}	
	
			h1 { font-size:30px; color:#2b140d; opacity:0.7; letter-spacing:2; }
			
			h3 { font-size:20px; color:#2b140d; opacity:0.7; letter-spacing:1; }
			
			h4 { font-size:20px; color:#2b140d;  letter-spacing:1; }
	
	
	
	
            #container {
                max-width: 1200px;
                margin: 0 auto;
  
            }



            #header {
                width: 100%;
                height: 200px;
            }

            /* navigation section!! */
			
			#navbarmobile {
                height: 40px;
                width: 100%;
				display:none;
				text-shadow:3px 2px 2px #422218;
				color:white;
				font-size:20;
            } 
			
			#navbarmobile ul {
                    flex-wrap: wrap;
					display: flex;
					padding: 0;
					margin: 0;
					list-style-type: none;
					justify-content: space-evenly;
					background-image: url('../img/assets/Menulog.png');
					background-size: 800px;
					background-repeat:no-repeat;
					background-position: center;
            }
				
			#navbarmobile li {
				padding:15;

            }
			
			#navbarmobile li a {
                padding-top: 25px;
				color:white;

            }
			
			
            #navbar {
                height: 120px;
                width: 100%;
				display:block;
				background-image: url('../img/assets/Menulog.png');
				background-size: 1100px;
				background-repeat:no-repeat;
				background-position: center;
            }

            #navbar ul {
                display: flex;
				width:900;
				font-size:35;
                padding: 0;
                margin: 0 auto;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 47px;
				text-shadow:3px 2px 2px #422218;
				text-decoration:none;
            }
			
			#navbar li a {
                color: white;
                font-weight: 800;
                text-decoration: none;
            }

            #navbar li a:hover {
				color: #7ed6d6;
                text-decoration: none;
				transform: scale(1.1);
            }

            #flex {
                display: flex;
				max-width:1000;
				margin: 0 auto;
            }


             aside {
                width: 180px;
                padding: 20px;
				position:relative;
			
            }



            main {
                flex: 1;
                padding: 40px;
                order: 2;
				margin: 0 auto; 
				height:890;
            }
			
			.mid { 
			    background-image: url('../img/assets/paper.png');
				background-repeat:no-repeat;
				background-position: center;
				background-size: 700px;
				height:900;
				width:700;
				margin-left:-74;
				margin-top:-52;
				position:absolute;
				display:block;
				z-index:-1;
			} 
			
			.headercontent {
				display:flex;
				padding-top:30;
				width:1300; 
				height:200; 

				
			}
			
			.headimg { z-index:-100; margin-left:400; margin-top:40; align-self: center;}
			.logo { align-self: center; padding-top:10; margin-left:-40;}
			
			
			.newreaders {height:50; padding-top:20; text-shadow:3px 2px 2px #422218;} 
			.archivenavigation {padding-top:63; opacity:0.8; margin-left:-9;}
			.socialicon { margin-top:-20; margin-left:-5; opacity:0.8;}
			.othersocial { margin-top:50; margin-left:-5; opacity:0.7; color:black; font-family:grenze; line-height:0.9;}
			.friends {margin-left:-18; margin-top:43; }
			.iframes {padding:0; margin-left:-15; margin-top:-8; width:160px; height:130px; overflow:hidden;}
			.promoside {color:black; font-family:grenze; line-height:0.9; margin-top:45px; opacity:0.7;}
			.comicads {margin-left:-10; margin-top:60; width:168; border:4px solid black;}

			.artistsocials h1 { 
			padding:0;
			margin:0;
			margin-left:20; 
			}
			.support h1, h3, h2 { 
			padding:0;
			margin:0;
 
			}
			.affiliates { width:550;}
			.artistsocials { padding-top:10; width:550; height:60; justify-content: space-evenly; font-size:28; display:flex; margin-top:10; background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1) 230px, rgba(0,0,0,0.2) 430px); backdrop-filter: blur(5px);}
			.support { padding-top:10; width:550; height:60; justify-content: space-evenly; font-size:28; display:flex; margin-top:10; background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1) 230px, rgba(0,0,0,0.2) 430px); backdrop-filter: blur(5px);}
			.email { width:550; color:#2b140d; font-family:grenze;}

             #leftSidebar {
                order: 1;
				background-image: url('../img/assets/left2.png');
				background-repeat:no-repeat;
				background-position: top center;
				margin-top:-11;



            }

            #rightSidebar {
                order: 3;
				background-image: url('../img/assets/right.png');
				background-repeat:no-repeat;
				background-position: top center;
				margin-top:-12;
				padding-top:30;
				margin-left:20;
            }

            footer {
                background-image: url('../img/assets/footer.png');
				background-repeat:no-repeat;
				background-position: center;
				background-size:900;
				text-align: center;
				color:#2b140d;
				font-size:15px; 
                width: 100%;
                height: 80px;
                padding: 30px;
                text-align: center;
				margin-top:-17;
                /* this centers the footer text */
            }



/*//////////////////////////////////////RAREBIT CSS////////////////////////////////////*/

clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#showComic, header, h1, h2, h3, h4, h5 {
  font-family: 'Almendra SC';
  width:550;
  margin-left:auto;
  margin-right:auto;
  margin-top:-50;

}

.subPage p, footer, #authorNotes, .archiveTable {
  font-family: 'Open Sans', sans-serif;
  font-size: large;
}

.subPage {
  width: 850px;
  background-color: #640F0F54;
  border-radius: 25px;
  max-width: 98%;
  margin: auto;
  margin-bottom: 10px;
  padding: 0px 12px 12px;
}

.subPage:not(.archivePage) {
  text-align: center;
}

/* for pictures displayed to the left */
.leftPic {
  clear: left;
  float:right;
  margin-left:20px;
}

/* for pictures displayed to the left */
.rightPic {
  clear: right;
  float:left;
  margin-left:20px;
}

/* specific to Characters */
.charTable .charTable td { 
  width: 100%;
  padding:20px;
  background-color: rgba(10, 177, 137, 0.34);


}

.comicNav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 10px 0px;
    font-size:33px;
}
.comicNav img {
  width: 100px;
  max-width: 98%;


}

.comicNav a {
  width: 100px;
  max-width: 98%;
  padding-right: 30px;
  text-decoration:none;
  color:white;

}

/* style comic page image */
.comicPage img {
  width: 640px;
  max-width: 98%;
  border:solid black 5px;
}



/* ARCHIVE PAGE */

/* style table in which archive is displayed */
.archiveTable {
  width: 90%;
  border-collapse:collapse;
}

/* style archive table cells */
.archiveTable td {
  padding: 3px;
  vertical-align: center;
  
}

/* style table cell in which page title is displayed */
.archiveCellTitle:not(.leftAlignTableText) {
  max-width: 300px;
  text-align: center;
}

.archiveCellDate {
  text-align: right;
  min-width: 120px;
}

.archiveCellNum {
  text-align: center;
  min-width: 30px;
}

/* style the thumbnails on the archive page */
.archiveCellThumb {
    width: 500px;
    max-width: 60px;
}
.archiveCellThumb img{
    max-width: 100%;
  }

/* for left aligning the text in a table cell */
.leftAlignTableText td {
  text-align: left;
}

/* highlight a table row and make pointer into hand when moused over */
.archiveRow:hover {
  background-color: #DA5437;
  cursor: pointer;
}




            /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */
	
	 @media only screen and (max-width: 810px) {
				
				body {
					height:1800;
				}
				
                #flex {
                    flex-wrap: wrap;
                }
				
				#header {
					width: 100%;
					height: 200px;
				}

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

				.mid { 
					display:none;
				}

                #leftSidebar {
                    order: 2;
					background-image:none;
                }

                #rightSidebar {
                    order: 3;
					background-image:none;
                }

                #navbar {
                    display:none;
                }
				
				#navbarmobile {
					display:block;
					
                }
				
				#navbarmobile ul {
                    flex-wrap: wrap;
                }
				
				#logs { width:300;
				}
				
				.headimg { display:none;}
				.logo { width:350; margin:0 auto; margin-top:-30; }
				
				
				.newreaders {height:50; margin-top:0; text-shadow:3px 2px 2px #422218; background-image: url('../img/assets/Menulog.png'); background-size: 1400px; background-position: center;} 
				.archivenavigation {padding-top:10; margin-left:-9; }
				.socialicon {margin-top:-40; padding:10; background-image: url('../img/assets/Menulog.png'); background-size: 1400px; background-position: center;}
				.othersocial {margin-top:10; margin-left:-10; opacity:0.7;}
				.friends {display:none;}
				.iframes {width:300; margin:0 auto; overflow:scroll;}
				.updates {margin-top:-80; background-color:#7e5145;}
				.promoside {color:black; font-family:grenze; line-height:0.9; margin-top:45px; opacity:0.7;}
				.comicads {margin:0 auto; margin-top:50;}
				.ads {display:none;}
				.kofi {margin:0 auto;}

			
			
				.headercontent {
					display:flex;
					width:100%; 
					height:150; 

				}
				footer {
					display:none;
            }
            }
	
	
	
	

            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
                main {
                    order: 1;

                }
				.mid { 
					display:none;
				}
                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar {
                    display:none;
                }
				
				#navbarmobile {
					display:block;
					
                }
				
				#navbarmobile ul {
                    flex-wrap: wrap;
                }
				
				#showComic, header, h1, h2, h3, h4, h5 {
					font-family: 'Almendra SC';
					width:300;
					margin-left:auto;
					margin-right:auto;
					margin-top:-30;
				}
				
				.newreaders {height:50; margin-top:-370; text-shadow:3px 2px 2px #422218; background-image: url('../img/assets/Menulog.png'); background-size: 1400px; background-position: center;} 
				.archivenavigation {padding-top:10; margin-left:-9; }
				.socialicon {margin-top:-40; padding:10; background-image: url('../img/assets/Menulog.png'); background-size: 1400px; background-position: center;}
				.othersocial {margin-top:10; margin-left:-10; opacity:0.7;}
				.friends {display:none;}
				.iframes {width:300; margin:0 auto; overflow:scroll;}
				.updates {margin-top:-80; background-color:#7e5145;}
				.promoside {color:black; font-family:grenze; line-height:0.9; margin-top:45px; opacity:0.7;}

				.artistsocials { padding-top:10; width:300; height:60; justify-content: space-evenly; font-size:18; display:flex; margin-top:10; background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1) 230px, rgba(0,0,0,0.2) 430px); backdrop-filter: blur(5px);}
				.support { padding-top:10; width:300; height:60; font-size:18; justify-content: space-evenly; font-size:28; display:flex; margin-top:10; background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1) 230px, rgba(0,0,0,0.2) 430px); backdrop-filter: blur(5px);}
				.email {width:300;}
				.mirrors { display:none;}
				.affiliates { width:300;}
			
			.artistsocials h1 { 
			padding:0;
			margin:0;
			margin-left:20;
			font-size:18;			
			}
						.support h1, h3, h2 { 
			padding:0;
			margin:0;
			font-size:18;
 
			}

            }