/* 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." */

@font-face {
  font-family: 'skeirs';
  src: url('skeirs.tff') format('truetype'), url('fonts/skeirs.woff2') format('woff2'), url('fonts/skeirs.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Page Code */
#p1 {display:none}
#p1:target {display:block}
#p2 {display:none}
#p2:target {display:block}
#p3 {display:none}
#p3:target {display:block}
#p4 {display:none}
#p4:target {display:block}
#p5 {display:none}
#p5:target {display:block}
#p6 {display:none}
#p6:target {display:block}
#p7 {display:none}
#p7:target {display:block}
#p8 {display:none}
#p8:target {display:block}
#p9 {display:none}
#p9:target {display:block}
#p10 {display:none}
#p10:target {display:block}
#p11 {display:none}
#p11:target {display:block}
#p12 {display:none}
#p12:target {display:block}
#p13 {display:none}
#p13:target {display:block}
#p14 {display:none}
#p14:target {display:block}
#p15 {display:none}
#p15:target {display:block}
#p16 {display:none}
#p16:target {display:block}
#p17 {display:none}
#p17:target {display:block}
#p18 {display:none}
#p18:target {display:block}


textlog {
  display: block;
  border: 1px dashed #111;
  padding: 5px;
  text-align: left;
}

gothic {
  font-family: 'skeirs', sans-serif;
}

.comicInner {
  background-color: #000; padding-bottom: 20px
}

.div1 {
  border: 4px solid white;
  border-radius: 4px;
  background: #E41010;
  background: linear-gradient(#fff 1%, #e93f3f 6%, #e41010 100%);
  color: white;
  text-shadow: 1px 1px 1px #555; 
  height: 132px;
}

.txtShadow  {
  text-shadow: 1px, 1px, rgba(0, 0, 0, 0.4); 
}

.margin {
  margin-left: 10px;
}

.marginMedium {
  margin-left: 20px; 
}

.smallheader {
  font-size: 0.8em;
  text-align: center;
}

.mainBody {
  /* background-image: linear-gradient(#d8d8d8, #f9f9f9 75%); */
  background-color: #f4f4f4;
  padding-top: 4px;
  padding-bottom: 4px;
}

.imgFrameDark {
  background-image: linear-gradient(#000, #111);
  padding: 4px;
}

.imgCenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.darkMainBody {
    background-image: linear-gradient(rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 1)), url("https://file.garden/YynAZ9X23DJlLOB3/New%20Melisa%20Folder/site%20stuff%2C%20headers%20%26%20promo/backgroundmspfa7.png");
    padding: 20px;
}

.darkBody {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  background-image: linear-gradient(#000, #111);
  padding: 10px;
  color: #fff;
  text-align: center;
}

.courier {
 font-family: "Courier New", monospace; 
 font-weight: 600;
}

.smallBody {
  padding-left: 10px;
  border: 2px solid #ccc;
  background-image: linear-gradient(#ccc,  #f4f4f4 75%);  
}

.smallHeader {
 padding-left: 10px;
 border: 2px solid #ccc;
}

.smallBodyMargin {
  margin-left: 20px; 
  padding: 4px;
}

.imgFrame {
  background-image: linear-gradient(#7e777e, #ccc);
  padding: 4px;
}

.mainFrameMargin {
  margin: 50px;
}

.preDefault {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

pre {
  font-family: georgia;
  white-space: pre;
}

h3 {
  font-weight: normal;
  font-size: 1.4em;
  display: block;
  height: 10px;
  text-decoration: underline;
}

h2 {
 height: 16px;
 font-family: "cambria", serif;
}


body {
  background-color: white;
  color: black;
  font-family: georgia;
}

/* Char Text Colours*/

.melisa {
  color: #00d8ff;
}

.juanju {
  color: #186b42;
}  

.korinne {
  color: #f11010;
}

.kaylenna {
  color: #ad0436;
}

.mihail {
  color: #e10225;
}