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;
				padding:0;
				margin:0;
	 
			}
			
			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;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }



            #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;
            }

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
             aside {
                width: 180px;
                padding: 20px;
				position:relative;
			
            }


            /* this is the color of the main content area,
    between the sidebars! */
            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;}

			.about { padding:10px; text-align:left; color:#2b140d; }
			.group1 {width:400px; margin-top:50px; font-family:grenze; line-height:1.1; margin-top:20px; margin-left:auto; margin-right:auto;} 
			.group2 {display:flex; width:490px; margin-left:auto; margin-right:auto;}
			.guys {display:flex; width:490px; margin-left:auto; margin-right:auto; }


             #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;
            }

            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:2100;
				}
				
                #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:-70; 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;}

				.about { width:300; height:1200;padding:10px; text-align:left; color:#2b140d; }
				.group1 {display:none;} 
				.group2 {display:none;}
				.guys {display:none;}


            }