/* CSS is how you can add style to your website, btch 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: Monogram;
  src: url(fonts/monogram/ttf/monogram.ttf) format('truetype');
  font-style:normal;
}

@font-face {
  font-family: Monogram;
  src:url(fonts/monogram/ttf/monogram-extended.ttf) format('truetype');
  font-stretch:expanded;
}

@font-face {
  font-family: Monogram-italics;
  src: url(fonts/monogram/ttf/monogram-extended-italic.ttf) format('truetype');
  font-style:italic;
  font-style:normal;
}

@font-face {
  font-family: EastSeaDokdo;
  src: url(fonts/East_Sea_Dokdo/EastSeaDokdo-Regular.ttf) format('truetype');
}

.east-sea-dokdo-regular p {
  font-family: "East Sea Dokdo", sans-serif;
  font-weight: 400;
  font-style: normal;
}

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

/* universal background color */
body {
  background-color:#5c61bc;
}

/* header image */
header img {
  width: 400px;
  max-width: 98%;
}

header {
    background-color: #5c61bc;
}

h2 {
    color: #5c61bc;
}

h2 {
    color: #5c61bc;
}

/* ANIMATION CLASSES AND FUN EFFECTS AND STUFF*/

div.shake {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 1s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

div.strong-hover-shake:hover {
  animation: tilt-shaking 0.15s infinite;
}

div.gentle-hover-shake:hover {
  animation: tilt-shaking 0.25s infinite;
}

div.gentle-tilt-move-shake:hover {
  animation: tilt-n-move-shaking 0.25s infinite;
}

div.strong-tilt-move-shake:hover {
  animation: tilt-n-move-shaking 0.15s infinite;
}

div.constant-tilt-shake {
  animation: tilt-shaking 0.3s infinite;
}

div.vertical-shake {
  animation: vertical-shaking 0.35s infinite;
}

div.horizontal-shake {
  animation: horizontal-shaking 0.35s infinite;
}

div.rise-shake {
  animation: jump-shaking 0.83s infinite;
}

div.skew-shake-x {
  animation: skew-x-shake 1.3s infinite;
}

div.skew-shake-y {
  animation: skew-y-shake 1.3s infinite;
}

div.both-shake {
  animation: both-shaking 0.35s infinite;
}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes vertical-shaking {
  0% { transform: translateY(0) }
  25% { transform: translateY(5px) }
  50% { transform: translateY(-5px) }
  75% { transform: translateY(5px) }
  100% { transform: translateY(0) }
}

@keyframes both-shaking {
 0% { transform: translateX(2) }
 30% { transform: translateX(1px) translateY(2px)}
 50% { transform: translateX(-2px) translateY(-1px) }
 80% { transform: translateX(1px) translateY(2px) }
 100% { transform: translateX(2) translateY(-1) }
}

@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}

@keyframes jump-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateY(-1px) }
  35% { transform: translateY(-1px) rotate(2deg) }
  55% { transform: translateY(-1px) rotate(-2deg) }
  65% { transform: translateY(-1px) rotate(2deg) }
  75% { transform: translateY(-1px) rotate(-2deg) }
  100% { transform: translateY(0) rotate(0) }
}

@keyframes skew-x-shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}

@keyframes skew-y-shake {
  0% { transform: skewY(-15deg); }
  5% { transform: skewY(15deg); }
  10% { transform: skewY(-15deg); }
  15% { transform: skewY(15deg); }
  20% { transform: skewY(0deg); }
  100% { transform: skewY(0deg); }  
}

/* MAIN CONTENT*/

#MainContent {
 background-image: linear-gradient(to top, #322c52, #241c31);
  color:#ffffff;
  padding:30px;
}


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


.spinprism2 {
    width: 50px;
    height: 50px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    flex-shrink: 0;
}

.spinprism {
    width: 50px;
    height: 50px;
    margin-left:15px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    flex-shrink: 0;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/*FONTS*/

/* header font */
#showComic, header, h1, h2, h3, h4, h5 {
  font-family: sans-serif;
}

/* body font */
.subPage p, footer, #authorNotes, .archiveTable {
  font-family: 'Open Sans', sans-serif;
  font-size: large;
  text-align: center;
}

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

/*general*/
hr.nijline {
  border-top: 1px solid #5c61bc;
  width:100%;
}


.subPage {
  width: 1000px;
  max-width: 98%;
  background-color: #ffffff;
  /*outline: 3px solid #000000;*/
  margin-bottom: 10px;
  border-radius: 25px;
  margin: auto;
  padding: 50px;
  padding-top: 1px;
}

.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: black;
      /*background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
      background-clip: text;
      -webkit-background-clip: text;*/
    }

a:hover {
  color: #5c61bc;
  /*color: transparent;
  transition: 500ms ease; */   
    }

/* HEADER */
header #nav {
  /*background-color: #ffffff;*/
   /*outline: 3px solid #000000;*/
  font-size: 20px;
  width: 98%;
  margin: auto;
  padding-top: 20px;
}

.writeNav img{
  width:80px;
  height:80px;
  padding-right:10px;
}

#pageSelect {
  font-size: 1rem;
  padding: 0.4rem 0.6rem;
  margin: 0 0.5rem;
}

.writeNav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin:2rem 0;
}

/*ARCHIVE PAGE*/
.prologue {
  border-radius:25px;
  outline: 2px solid #5c61bc;
  padding-left:30px;
  padding-right:30px;
  padding-top: 10px;
  padding-bottom: 30px;
  margin: 20px;
}

.chapter1 {
  border-radius:25px;
  outline: 2px solid #5c61bc;
  padding-left:30px;
  padding-right:30px;
  padding-top: 10px;
  padding-bottom: 30px;
  margin: 20px;
}

.archiveCellTitle{
  margin-left:auto;
}

.archiveCellDate{
  margin-left:auto;
}

.archiveRow {
  font-family:monogram;
  font-size:xx-large;
  color: black;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.25rem;
  text-decoration: none;
  width: 100%;
}

.nav-links{
  padding-bottom: 15px;
  padding-top: 15px;
  display: flex;
  justify-content: center;
}

header a {
    text-decoration: none;
}

.menubuttons{
  background-color: white;
  border-radius: 15px;
  text-align: center;
  font-weight: bold;
  margin: .5%;
  align-content: center;
}

.menubuttons a {
  display:block;
  width:100%;
  height:100%;
  padding: 15px;
  text-align: center;
  box-sizing:border-box;
}
/* Main Content */

#pagetitle {
  color:white !important;
}

#pagetitle h1 {
  /*font-family:monogram;
  font-size:xxx-large;*/
  color:white !important;
}

.borderbox{
  display:flex;
  outline: 2px solid #5c61bc;
  padding-left:15px;
  padding-right:15px;
  background-color: rgba(92, 97, 188, 0.11);
  margin:10px;
  text-align: center;
  
}

h1 {
  padding-top:30px;
}

#pagetitle h1 {
  display:inline-block;
 border: 2px solid #5c61bc;
  border-radius: 55px;
  padding-left:30px;
  padding-right:30px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.dialoguebox {
 color:white;
  margin: 60px;
  padding: 10px;
  border-radius: 25px;
  width: 50%;
  max-width: 650px;
  text-align: left;
  background-color: rgba(0,0,0,0.5);
}

.dialogueboxnij {
 color:white;
  margin: 60px;
  padding: 10px;
  border-radius: 25px;
  width: 50%;
  outline: #5c61bc solid 1px;
  max-width: 650px;
  text-align: left;
  background-color: rgba(0,0,0,0.5);
}

.dialogueboxkino {
 color:white;
  margin: 60px;
  padding: 10px;
  border-radius: 25px;
  width: 50%;
  outline: #ff4459 solid 1px;
  max-width: 650px;
  text-align: left;
  background-color: rgba(0,0,0,0.5);
}

.dialogueboxnova {
 color:white;
  margin: 60px;
  padding: 10px;
  border-radius: 25px;
  width: 50%;
  outline: #ff3b00 solid 1px;
  max-width: 650px;
  text-align: left;
  background-color: rgba(0,0,0,0.5);
}

.dialogueboxibs {
 color:white;
  margin: 60px;
  padding: 10px;
  border-radius: 25px;
  width: 50%;
  outline: #76dd1d solid 1px;
  max-width: 650px;
  text-align: left;
  background-color: rgba(0,0,0,0.5);
}

.dialogueboxsherb {
 color:white;
  margin: 60px;
  padding: 10px;
  border-radius: 25px;
  width: 50%;
  outline: #ff7ed2 solid 1px;
  max-width: 650px;
  text-align: left;
  background-color: rgba(0,0,0,0.5);
}

.dialogueboxnofill {
 color:white;
  font-family: 'monogram';
  font-size:x-large;
  font-stretch:expanded;
  margin: 60px;
  padding: 10px;
  border-radius: 25px;
  width: 50%;
  max-width: 650px;
}

.dialogueboxthink {
 color:white;
  margin: 60px;
  padding: 10px;
  border-radius: 25px;
  outline: #949aff dashed 1px;
  border-width:thin;
  width: 50%;
  max-width: 650px;
  background-color: rgba(0,0,0,00);
}

.textindabox {
  position:relative;
  top: -10px;
  text-align: left;
  left: -20px;
}

.narration {
  font-family: 'monogram';
  font-size:x-large;
  font-stretch:expanded;
  width: 50%;
  max-width: 500px;
}

.endingcontainer {
  display:inline-flex;
  align-items:center;
  padding-bottom:40px;
}

.endingcontainerRIGHT {
  display:relative;
  align-items:right;
  float: right;
}

.endingnarration  {
  flex: 1;
  font-family: 'monogram';
  font-size:X-large;
  font-stretch:expanded;
  color:white;
}

.illustration {
  position: relative;
  margin: 80px;
}

.illustration img {
  border-radius: 25px;
  width: 100%;
  max-width: 900px;
  border: solid #787fff;
}

.illustrationirregular {
  position: relative;
  margin: 80px;
}

.animatedgif {
  position: relative !important;
  display: inline-block !important;
  width: fit-content !important;
  margin: 50px;
}

.click-gif{
  display:block;
  max-width: 100%;
  height: auto;
  border-radius: 25px;
  
}

.charactericon {
  position:relative;
  top: -50px;
  left: -50px;
  float:left;
}

.charactername {
 font-size:large;
 font-family:monogram;
 display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
}

.charactername H4 {
 /*font-size:large;
 font-family:monogram;*/
 display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
}

.charactertext {
 font-size: Medium;
  font-family:Arial;
  display: flex;
  justify-content: left;
  align-items: left;
  text-align: left;
}

.charactertextmonster p {
 font-size: Medium;
  font-family: EastSeaDokdo;
  font-style: normal;
  display: flex;
  justify-content: left;
  align-items: left;
}

/* HOMEPAGE */

/* style nav button images */
.comicNav {
  display: flex;
  background-color:#5d5fc3;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 10px 10px;
}
.comicNav img {
  width: 80px;
  max-width: 98%;
  padding-right: 30px;
}

/* ABOUT PAGE */

.aboutimgleft {
  border-radius: 30px;
  padding:20px;
  float:left;
  width:350px;
}

.aboutimgcenter {
  border-radius: 30px;
  padding:20px;
  width:700px;
}

.aboutblock {
  padding-left:60px;
  padding-right:60px;
  padding-top:40px;
  padding-bottom:40px;
  margin:10px;
}

#authorBlurb {
  padding:20px;
  margin:30px;
}

#authorBlurb p{
  padding-right:370px;
}

.aboutimgnoalign{
  border-radius: 40px;
  padding:25px;
  width:300px;
  float:right;
}

#socialmediabox {
  display:inline-block;
}

.endofupdate {
  background:#271f3c;
  text-align:left;
  align-content: center;
  padding:10px;
  padding-left:10%;
  padding-right:10%;
}

.endofupdatea{
  float: left;
  width:50%;
}

.endofupdatea img {
  float: left;
  width:300px;
  position:absolute;
}

.peek-anchor {
  width:300px;
  height:222px;
  padding-top:105px;
  padding-right:30%;
  overflow:hidden;
  position:relative;
}

 .stage {
  float:right;
   display:flex;
   padding-right:5%;

    }
    .box {
        align-self: flex-end;
        animation-duration: 2s;
        animation-iteration-count: 1;
        height: 200px;
        margin: 0 auto 0 auto;
        transform-origin: bottom;
        width: 200px;
    }

    .bounce-3 {
        animation-name: bounce-3;
        animation-timing-function: ease;
      animation-fill-mode: forwards;
    }
    @keyframes bounce-3 {
        0%   { transform: translateY(100px); }
        30%  { transform: translateY(-85px); }
        50%  { transform: translateY(-75px); }
        80% { transform: translateY(-80px); }
        100% { transform: translateY(-80px); }
    }

.endofupdatetext {
  color: white;
  font-size:xx-large;
  font-family:monogram;
  text-align:left;
}

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

/* style author notes */
#authorNotes {
  background-color:#ffffff;
  /*outline: 3px solid #000000;*/
  border-radius: 25px;
  margin: auto;
  padding: 30px;
  padding-top: 1px;
  width: 900px;
  max-width: 98%;
}

/* CAST PAGE */
.charcontainer {
  margin-left:60px;
  background:white;
  margin-right:60px;
  margin-top:10px;
  margin-bottom:50px;
  border-radius: 25px;
  box-shadow: 10px 10px #5c61bc;
  border: 3px solid #5c61bc;
}

.charcontaineribs {
  margin-left:60px;
  margin-right:60px;
  margin-top:10px;
  margin-bottom:10px;
  border-radius: 25px;
  border: 3px solid #00bf34;
  text-align: left;
}

.charcontainernova {
  margin-left:60px;
  margin-right:60px;
  margin-top:10px;
  margin-bottom:10px;
  border-radius: 25px;
  border: 3px solid #e60000;
}

.charcontainerkinoOLD {
 margin-left:60px;
  margin-right:60px;
  margin-top:10px;
  margin-bottom:10px;
  border: double 4px transparent;
  border-radius: 25px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #ff3d3d,#5252ff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  
}

.charcontainersherb {
  margin-left:60px;
  margin-right:60px;
  margin-top:10px;
  margin-bottom:10px;
  border-radius: 25px;
  border: 3px solid #fa87ff;
}

.chartextbox {
  margin:45px;
  padding-left:270px;
  text-align: left;
}

.chartextbox p {
  text-align: left;
}

.grad1 {
    background: linear-gradient(to right, Red , Red, Orange, Cyan, blue, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 60px;
}

.charcontainerkino {
  /* rotation angle for the conic gradient */
  margin-left:60px;
  margin-right:60px;
  margin-top:10px;
  margin-bottom:10px;
  --angle: 0turn;
  /* Layout */
  border-radius: 25px;
  border: 4px solid transparent; /* border thickness */
  background:white;

  /* Two backgrounds: inner solid, outer conic rainbow */
  background:
    linear-gradient(#FFFF, #FFFF) padding-box,
    conic-gradient(from var(--angle),
      hsl(4 82% 66%), hsl(11 86% 66%), hsl(40 90% 68%),
      hsl(161 33% 60%), hsl(208 48% 60%), hsl(283 30% 68%), hsl(4 82% 66%)
    ) border-box;
}

/*.charcontainerkino:where(:hover, :focus-visible) {
  background:
    linear-gradient(hsl(199 61% 22%), hsl(199 61% 22%)) padding-box,
    conic-gradient(
      hsl(4 82% 66%), hsl(11 86% 66%), hsl(40 90% 68%),
      hsl(161 33% 60%), hsl(208 48% 60%), hsl(283 30% 68%), hsl(4 82% 66%)
    ) border-box;
}*/

.charcontainerkino:active {
  background:
    linear-gradient(#FFFF, #FFFF) padding-box,
    conic-gradient(
      hsl(4 82% 66%), hsl(11 86% 66%), hsl(40 90% 68%),
      hsl(161 33% 60%), hsl(208 48% 60%), hsl(283 30% 68%), hsl(4 82% 66%)
    ) border-box;
}

/* SPLASH PAGE */

#demo {
  Color:white;
  align-content: center;
  text-align: center;
  width:100%;
  display: block;
  margin: auto;
  font-size:x-large;
  font-family:sans-serif;
    border-radius: 100px;
  text-shadow:0 0 10px #11133d;
  /*font-family:monogram;*/
}
.splashpageContent {
  
  align-content: center;
  padding:40px;
  background: #000000;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(93, 95, 195, 1) 100%);
}

.splashpageContent img {
  width: 70%;
  max-width: 500px;
  align-content: center;
  display: block;
  margin: auto;
}

.splashpagetext h1 {
  text-align: center;
  padding-top:50px;
  color:white;
  width:450px;
  height:50px;
  margin: auto;
  border-radius: 100px;
  text-shadow:0 0 10px #11133d;
}
.splashpagetext2 {
  text-align: center;
  color:white;
  align-content: center;
  text-shadow:0 0 10px #11133d;
}

/*This is for spinprism2 btw*/
.splashpagetext2 img{
  width:50px;
  height:50px;
  display:inline-flex;
}

#Splashpagevideo iframe {
  width: 100%;
  max-width: 900px;
  border-radius: 30px;
  align-content: center;
  display: block;
  margin: auto;
  box-shadow: 10px 10px 2px black;
}

/* 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: rgb(175, 179, 255);
  cursor: pointer;
}

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

.poweredby {
  font-size:x-large;
  font-family:monogram;

}

.icons img{
  height: 30px; 
}

footer p {
  margin: auto;
}

footer a {
  color: #c8d32b
}

footer a:hover {
  color: #868d26
}

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