/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
  HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body, div, main, section, article {
  box-sizing: border-box; 
}

/* universal background color */
body {
-webkit-mask: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url(https://rottenplastic.neocities.org/media/music/bg.gif);
background-position: top;
 background-size: cover;
  background-attachment: fixed;   
color: #111;
font-family: 'Courier New', monospace;
}

.writePageTitle{
  color: #ffffff;
font-family: 'Bokor', sans-serif;
  font-size: 0px;
  margin-top: 0;

margin-bottom: -61;
  

}

/* header image */
header img {
  max-width: 98%;
  margin: auto;
  -webkit-box-shadow:0px 0px 14px 11px rgba(0,62,247,1);
-moz-box-shadow: 0px 0px 14px 11px rgba(0,62,247,1);
box-shadow: 0px 0px 10px 5px rgba(0,62,247,1);
}

/* clearfix hack to prevent image overflow. check out the W3Schools page on it. */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*FONTS*/

/* header font */
#showComic, header{
    padding-top: 5px;

  font-family: 'Courier New';
 font-weight:bold;
}

#showComic, h1, h2, h3, h4, h5 {
font-family: 'Bokor', sans-serif !important ;
}

/* body font */
.subPage p, footer, #authorNotes, .archiveTable {
  font-family: 'Courier New', sans-serif;
  font-size: 15px;
}

#authorNotes {
    text-align: center;
}


.subPage a {
  color: #000000
}

/*Paragraph styles*/

.about{
  padding: 4px 168px 6px;
}

/* STYLING FOR SUBPAGES (about, characters, etc) */

/*general*/

.subPage {
  width: 752px;
  max-width: 98%;
  background-color: #e8e7ed;
  outline: 1px solid #000000;
  margin: auto;
  margin-bottom: 10px;
  padding: 4px 38px 25px;
}

.subPageC {
  width: 752px;
  max-width: 98%;
  background-color: #e8e7ed;
  outline: 1px solid #000000;
  margin: auto;
  margin-bottom: 10px;
  padding: 4px 38px 25px;
}

.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%;
}

/* link colors */
a {
      color: #ffffff;
    }

a:hover {
      color: #6159ff;
    }

/* HEADER */
header #nav {
width: 100%;
font-size: 17px;
text-align: center;
padding: 0.5rem 0 1rem 0;
  color: #ffffff;
}

/* HOMEPAGE */

/* style nav button images */
.comicNav {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
  padding: 5px 0px;
}
.comicNav img {
  width: 49px;
  max-width: 98%;
    height:100%;
  padding-right: 5px;
}

/* style comic page image */
.comicPage img {
  width: 900px;
  max-width: 98%;
  outline: 1px solid #000000;
}

/* style author notes */
#authorNotes {
  background-color:#e8e7ed;
  outline: 3px inset #000000;
  margin: auto;
  padding: 20px;
  padding-top: 15px;
  width: 900px;
  max-width: 98%;
}

/* ARCHIVE PAGE */

/* style table in which archive is displayed */
.archiveTable {
  width: 62%;
  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;
font-family: 'Bokor', sans-serif;
}

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

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

/* style the thumbnails on the archive page */
.archiveCellThumb {
    width: 500px;
    max-width: 43px;
}
.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: #90a9ff;
  color:#fff;
  cursor: pointer;
}

/* FOOTER */
footer {
  color: #476fff;
  padding-top: 11px;
  margin-top: 12px;
  margin-bottom: 15px;
  float: left;
  width: 100%;
  font-size: 12px;
}

footer p {
  margin: auto;
}

footer a {
  color: #c8d32b
}

footer a:hover {
  color: #476fff
}

/* take away margins from the edges of the screen */
html, body {
  margin: 0;
}

.profile {

  max-width: 22%;
  height: auto;
      border:solid;
    border-width: 1px;
        filter: drop-shadow(0 0 0.34rem rgba(29,85,255,1));
  margin: 4px;
}

.profile2 {

  max-width: 22%;
  height: auto;
      border:solid;
    border-width: 1px;
          filter: drop-shadow(0 0 0.34rem rgb(255, 29, 185));

  

}


.content2{
      display:block;
      align-content: center;
      text-align: left;
  padding: 4px 12px 25px;
  gap: 1rem;
  word-wrap: break-word;}
  
  .content3{
      display:block;
      align-content: center;
      text-align: right;
  padding: 4px 12px 25px;
  gap: 1rem;
    word-wrap: break-word;}
    
  .content4{
      display:block;
      align-content: center;
      text-align: left;
  padding: 4px 12px 25px;
  gap: 1rem;
  word-wrap: break-word;}

  .content5{
      display:block;
      text-align: center;
  padding: 4px 12px 25px;
  gap: 1rem;
  word-wrap: break-word;}

  .bold{
    font-family: "Bokor";
    font-size: 30px;
    text-align: center;
margin: -16px;
}

.content5{
      display:inline-block;
      text-align: center; 
  padding:  0%;
  gap: 0rem;
  max-width: 100%;
      height: auto;
  word-wrap: break-word;
}

#image
{max-width: 100%;
height:auto;
}
.link-bottom {
  font-weight: bold;
  color: blue;
}