/* 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: "Kbanavoxlost";
    src: url("/fonts/Kbanavoxlost-gajq.ttf") format("truetype");
    font-display: swap;
  } 

  @font-face {
    font-family: "AngWritten";
    src: url("/fonts/AngWriting.ttf") format("truetype");
    font-display: swap;
  } 
  @font-face {
    font-family: "AngWritten";
    src: url("/fonts/AngWriting.ttf") format("truetype");
    font-display: swap;
  } 

    @font-face {
    font-family: "HangingLetters";
    src: url("/fonts/HangingLetters.ttf") format("truetype");
    font-display: swap;
  } 

@font-face {
  font-family: "Playpen Sans", cursive;
  src: url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap');
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

@font-face {
    font-family: "horrors";
         src: url("/fonts/Horrors.ttf") format('truetype');
}

@font-face {
    font-family: "cuteypatchy";
         src: url("/fonts/CuteyPatchy.ttf") format('truetype');
}

@font-face {
    font-family: "bdaycute";
         src: url("/fonts/BirthdayCute.otf") format('truetype');
}

@font-face {
    font-family: "brightchalk";
         src: url("/fonts/BrightChalk.ttf") format('truetype');
}

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

/* universal background color */
body {
  background: #000000;
  /* background: #EEAECA;
background: radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); */
}

.goleft {
  text-align: right;
}

.goright {
  text-align: left;
}

/* #showtime {
  position: relative;
  width: 100%;
  min-width: 1400px;
  height: 100%;
  background-image: url('/img/thecurtains_l.png'), url('/img/thecurtains_r.png'), url('/img/curtaintop.png'), url("/img/bg.png");
  background-repeat: no-repeat, no-repeat, repeat-x, no-repeat;
  background-size: 25%, 25%, 26%, 100% auto;
  background-attachment: scroll, scroll, scroll, scroll;
  background-position: top left, top right, top center, top center;
} */

#showtime {
  position: relative;
  width: 100%;
  min-width: 1400px;
  height: 100%;
  background-image: url("/img/bg.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: scroll;
  background-position: top center;
  z-index: 0;
}

#curtains {
  position: absolute;
  width: 100%;
  min-width: 1400px;
  height: 100%;
  background-image: url('/img/thecurtains_l.png'), url('/img/thecurtains_r.png'), url('/img/curtaintop.png');
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-size: 25%, 25%, 26%;
  background-attachment: scroll, scroll, scroll, scroll;
  background-position: top left, top right, top center;
  z-index: 1;


}

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

/* 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, h3, h4, h5 {
  font-family: "Playpen Sans", cursive;
  font-size: 2rem;
}

h1, h4, h5 {
  font-family: "kbanavoxlost";
  font-size: 4.4rem;
  color: rgb(240, 222, 246); 
  text-shadow: 2px 2px #714d8d;
  padding-top: 25px;
  padding-right: 30px;
  padding-bottom: 33px;
  background:url("../img/whatareu.png");
  background-size: 95%;
  background-position: 40px 0px;
  background-repeat: no-repeat;
}

h2 {
   font-family: "KbanavoxLost", cursive;
  font-size: 4rem;
    letter-spacing: .15rem;
    line-height: .8em;
    color: #564c55;
    text-shadow: 2px 2px 0px #28195b;
}

h6 {
  position: relative;
   font-family: "Playpen Sans", cursive;
   color:#000000;
    background: -webkit-linear-gradient(
        0deg,
        rgba(95, 21, 242, 1) 0%,
        rgba(137, 0, 229, 1) 5%,
        rgb(130, 95, 179) 30%,
         rgba(152, 0, 255, 1) 60%,
        rgb(103, 45, 186) 70%);
                -webkit-text-fill-color: transparent;
                   -webkit-background-clip: text;
                background-clip: text; 
   text-align: left;
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0;
  padding: 0px 0px 0px 10px;
  top: 0;
}
/* body font */
.subPage p, footer, #authorNotes, .archiveTable {
  font-family: 'Playpen Sans', sans-serif;
  font-size: large;
}

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

/*general*/
.writeDate {
  text-align: right;
   color: rgb(145, 122, 218);
}
.writeDate::before {
  content: "Posted ";
  text-align: right;
   color: rgb(145, 122, 218);
}
.subPage {
  margin-top: -10px;
  margin-bottom: 50px;
  max-width: 1100px;
  width: 100%;
  padding: 10px;
  position: relative;
  background-color: #32007C;
  border-radius: 40px;
  border-style: dashed;
  border-width: 5px;
  border-color: #d3a3ff;
  outline: 10px solid #32007C;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  z-index: 2;
}

/* [.screen {
  width: 98%;
  height: calc(100% + 300px);
  background: #FFFFFF;
  position: relative;
  background-position: 0px 0px;
  background-repeat: repeat-y;
  background-size: 100% auto;  
  position: relative; 
}] */

#um {
  position: relative;
  width: 100%;
  height: 100%;
}

#bgelements {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url("../img/cloudcradle.png");
  background-position: left bottom 40%;
  background-size: contain;
  background-repeat: repeat-x;
  z-index: 0;
}

#bgelementssub {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url("../img/cloudcradle.png");
  background-position: left bottom;
  background-size: contain;
  background-repeat: repeat-x;
  z-index: 0;
}

#contentwrap {
  width: 100%;
  padding-top: 33px;
  max-width: 1250px;
  height: auto;
  position: relative;
  margin: auto;
  z-index: 1;
}

.screen::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 0;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}


.screen {
  background: #000000;
  /* background-image: linear-gradient(0deg,rgb(131, 108, 138) 5%, rgb(145, 61, 209) 90%, rgb(165, 230, 189) 95%); */
  width: 1050px;
  height: 100%;
  margin-top: 40px;
  margin-left: 100px;
  margin-right: 100px; 
  position: absolute;
  z-index: -30;
  pointer-events: none;
}

.omnomsides {
  width: 1250px;
height: 100%;
background: url('../img/omnomeedy.png');
background-size: 100% auto;
background-repeat: repeat-y;
background-position: center;
z-index: 2;

} 

.omnom {
width: 1250px;
height: 100%;
position: relative;
background: url('../img/omnomeedy.png');
background-size: 100% auto;
background-repeat: repeat-y;
background-position: center;
margin-bottom: 352px;
z-index: 10;
} 



.omnom::before {
content: '';  
width: 100%;
position: absolute;
inset: -18px 0px;
background: url('../img/omnomhapee.png');
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top left;
height: 100%; 
opacity: 1;
z-index: 1;
}  

.omnom::after {
      content: '';  
      position: absolute;
      inset: -350px 0;
      width: 100%;
      height: auto;
      background-image: url('../img/omnomcore.png');
      background-size: 100% auto; 
      background-repeat: no-repeat;
      background-position: bottom left;
      opacity: 1; 
      z-index: 2;
} 

.cute {
  padding-top: 235px;
  position: relative;
      width: 100%;
      max-width: 960px;
      height: 100px;
      margin: 0;
      background-color: #693d88;
      background: url("../img/bubblebrowser.png") no-repeat bottom center / 100% auto; 
      border-top-left-radius: 20px;
    }

    
 .baby {
      position: relative;
      background:transparent;
      width: 960px;
      height: auto;
      z-index: 20;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    } 

    #cradle {
      position: relative;
      padding-top: 10px;
      background:transparent;
      width: 960px;
      z-index: 20;
      background-image: url("../img/ck/chocobg4.png");
      background-position: left center;
      background-size: 30% auto;
       border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      
    }

  .carrotbox {
    position: relative;
    max-width: 920px;
    width: 100%;
    background: #fcf2ff;
    padding: 12px 5px 5px 0px;
    margin: 15px 5px 10px 5px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.voicies {
  position: relative;
}


.birthbox {
  width: 90%;
  margin: auto;
  padding-top: 50px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  background: #EAC6F2;
  background-image: url("../img/txtr/notebook.png");
  background-blend-mode:soft-light;
  outline: 7px solid #714ca2;
  border-right: 0px dashed #551ca9;
  position: relative;
  top: -100px;
  z-index: -1;
  border-radius: 60% 4% / 10% 30%;
  -webkit-border-radius: 60% 4% / 10% 30%;
  -moz-border-radius: 60% 4% / 10% 30%;
  -ms-border-radius: 60% 4% / 10% 30%;
  -o-border-radius: 60% 4% / 10% 30%;
}

.chrono {
  z-index: 20;
}

.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: #000000;
    }

a:hover {
      color: #DA5437;
    }

/* HEADER */

header {
  padding-top: 20px;
  z-index: 30;
  width: 1000px;
  position: relative;
  height: 440px;
  z-index: 30;
}

#headercontents {
  position: relative; 
  top: 95px;
  z-index: 100;
}

.headerbg {
 position: relative;
}

#contentwrap::before {
      content: ''; /* Required for pseudo-elements */
      position: absolute;
      inset: -100px;
      left: 100px;
      width: 93%;
      height: 220px;
      background-image: url('../img/rainbutt.png');
      background-size: 90% 130px; /* Adjust as needed */
      background-repeat: no-repeat;
      opacity: 1; /* Adjust for desired transparency (0.0 to 1.0) */
      z-index: 0; /* Places the pseudo-element behind the content */
    }


#mynav {
  background-color: transparent;
  position: relative;
  font-size: 20px;
  max-width: 1000px;
  width: 100%;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  top: -25px;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
}

#mynav a:hover img {
  -webkit-filter: drop-shadow(.03px .03px rgb(255, 233, 213));
          filter: drop-shadow(1px 1px 3px rgb(255, 233, 213));
  transform: rotate(-4deg) scale(1.04);
  -webkit-transform: rotate(-4deg) scale(1.04);
  -moz-transform: rotate(-4deg) scale(1.04);
  -ms-transform: rotate(-4deg) scale(1.04);
  -o-transform: rotate(-4deg) scale(1.04);
  -webkit-filter: drop-shadow(1px 1px 3px rgb(255, 255, 255));
}

#mynav img {
  height: 105px;
  width: auto;
}

/* HOMEPAGE */


/* #comicWrap {
  margin: auto;
  margin-top: 10px;
  max-width: 1000px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EAC6F2;
  border-radius: 40px;
  border-style: dashed;
  border-width: 4px;
  border-color: #7f009f; 
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  z-index: 3;
} */

#comicWrap {
  margin: auto;
  margin-top: 10px;
  max-width: 1000px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EAC6F2;
background-image: url('../img/comptop.png'), url('../img/compsides.png');
  background-repeat: no-repeat, repeat-y;
  background-size: 100% auto, 100% auto;
  background-attachment: scroll, scroll;
  background-position: top center, center;
  z-index: 3;
}


/* style nav button images */

.writeNav {
  position: relative;
  padding: 15px;
}
.comicNav {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 10px 0px;
  height: 105px;
  width: 100%;
}

.first {
  padding: 0;
  margin: 0;
  width: 150px;
  height: 108px;
max-width: 182px;
background-image: url("../img/comicnav/nav_first.png");
background-size: 150px auto;
background-position: center;
background-repeat: no-repeat;
}

.first:hover {
    padding: 0;
  margin: 0;
  height: 108px;
  width: 150px;
background-image: url("../img/comicnav/nav_first.png");
background-size: 150px auto;
background-position: center;
background-repeat: no-repeat;
width: 100%;
}

.next {
  padding: 0;
  margin: 0;
  width: 150px;
  height: 108px;
max-width: 182px;
background-image: url("../img/comicnav/nav_next.png");
background-size: 150px auto;
background-position: center;
background-repeat: no-repeat;
}

.next:hover {
    padding: 0;
  margin: 0;
  height: 108px;
  width: 150px;
background-image: url("../img/comicnav/nav_next.png");
background-size: 150px auto;
background-position: center;
background-repeat: no-repeat;
width: 100%;
}

.previous {
  padding: 0;
  margin: 0;
  width: 150px;
  height: 108px;
max-width: 182px;
background-image: url("../img/comicnav/nav_previous.png");
background-size: 150px auto;
background-position: center;
background-repeat: no-repeat;
}

.last {
  padding: 0;
  margin: 0;
  width: 150px;
  height: 108px;
max-width: 182px;
background-image: url("../img/comicnav/nav_last.png");
background-size: 150px auto;
background-position: center;
background-repeat: no-repeat;
}


.comicNav img {
  width: 150px;
  height: auto;
}

#cknav {
  position: relative;
  height: 60px;
  max-width: 880px;
  width: 100%;
  display: block;
}

.ckhome {
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 60px;
max-width: 182px;
background-image: url("../img/ck/ck_nav_home.png");
background-size: 176px 58px;
background-position: center;
background-repeat: no-repeat;
}

.ckhome:hover {
  position: relative;
    padding: 0;
  margin: 0;
  display: inline-block;
  height: 60px;
background-image: url("../img/ck/ck_nav_home_hvr.png");
background-size: auto 60px;
background-position: center;
background-repeat: no-repeat;
width: 100%;
}

.ckpeelcarrot {
  display: inline-block;
    padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: 60px;
max-width: 293px;
background-image: url("../img/ck/ck_nav_peelcarrot.png");
background-size: auto 58px;
background-position: center;
background-repeat: no-repeat;
}

.ckpeelcarrot:hover {
  display: inline-block;
    padding: 0;
  margin: 0;
  position: relative;
  height: 60px;
background-image: url("../img/ck/ck_nav_peelcarrot_hvr.png");
background-size: auto 60px;
background-position: center;
background-repeat: no-repeat;
}

.cktv {
  display: inline-block;
    padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: 60px;
max-width: 273px;
background-image: url("../img/ck/ck_nav_tv.png");
background-size: auto 58px;
background-position: center;
background-repeat: no-repeat;
}

.cktv:hover {
  display: inline-block;
    padding: 0;
  margin: 0;
  position: relative;
  height: 60px;
background-image: url("../img/ck/ck_nav_tv.png");
background-size: auto 60px;
background-position: center;
background-repeat: no-repeat;
}

.ckkut {
  display: inline-block;
    padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: 60px;
max-width: 125px;
background-image: url("../img/ck/ck_nav_kut.png");
background-size: auto 58px;
background-position: center;
background-repeat: no-repeat;
}

.ckkut:hover {
  display: inline-block;
    padding: 0;
  margin: 0;
  position: relative;
  height: 60px;
background-image: url("../img/ck/ck_nav_kut.png");
background-size: auto 60px;
background-position: center;
background-repeat: no-repeat;
}

/* .nxtbtn {
  width: 150px;
  height: 105px;
  display: inline-block;
  background-image: url("/img/comicnav/nav_nextz.png");
  background-size: 150px auto;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
  z-index: 50;
} 

.nxtbtn:hover{
  width: 150px;
  height: 105px;
  display: inline-block;
  background-image: url("/img/comicnav/nav_next-hvr.png");
  background-size: 150px auto;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
} */



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

/* style author notes */
#uhoh {
  font-family: "Playpen Sans";
  font-weight: 300;
  color: #e9c3f5;
  position: relative;
 align-self: center;
    text-align: center;
    background-color: rgba(85, 60, 166, 1);
    width: 800px;
    margin: 1rem;
    padding: 1rem;
    border-radius: .5em;
    box-shadow: 4px 4px 0px rgba(33, 32, 72, 0.2);
  
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
    z-index: 30;
}

#uhoh a {
  text-decoration: none;
}

/* #authorNotes {
  color: #e9c3f5;
  position: relative;
 align-self: center;
    text-align: center;
    font-weight: 300;
    background-color: rgba(85, 60, 166, .9);
    width: 930p;
    margin: 1rem;
    padding: 1rem;
    border-radius: .5em;
    box-shadow: 4px 4px 0px rgba(85, 60, 166);
    outline: 2px solid #34236b;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
    z-index: 30;
} */

.givepieNotes {
  position: relative; 
  color: #1f002f;
  margin: auto;
  padding-top: 0px;
  text-align: left;
  font-size: 1rem;
  width: 100%;
  z-index: 34;
  
}

#jellee {
   position: relative; 
   min-height: 295px;
   top: 50px;
   height: 100%;
   width: 1250px;
   background-image: url('../img/jellom.png');
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center;
   padding-bottom: 160px;
   padding-top: 130px;
      z-index: 10;
}
#jellee::after {
  position: absolute;
  background-image: url('../img/jellobutt.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
  content: ''; 
  inset: 0;
  width: 1250px;
  height: 100%;
  top: 100px;
  left: 20px;
  opacity: 1;
  z-index: 20;
}

#jellee::before {
  position: absolute;
  background-image: url('../img/jellotop.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  content: ''; 
  inset: 0;
  z-index: 12;
  width: 1250px;
  top: -160px;
  left: 0px;
  height: 100%;
  opacity: 1;
}

#pielovesu {
  position: relative;
  margin-top: -10px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  width: 97%;
  height: 100%;
  min-height: 75px;
  background: #E8B8FF;
  padding: 15px 22px 22px 22px;
  border-radius: 40px;
  color: FFFFFF;
  font-size: 1.2rem;
  font-family: "Playpen Sans", cursive;
  z-index: 40;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
}
/* 
#pielovesu::after {
  content: '';
  position: absolute;
  background-image: url('/img/piep.png');
  background-size: 75px auto;
  background-repeat: no-repeat;
  background-position: bottom right;
  width: 100%; 
  height: 100%;
  min-height: 75px;
    opacity: 1;
    inset: 0;
  top: 74px;
  left: 20px;
} */


#dacommentsz {
  position: relative;
  margin: auto;
  width: 800px;
  background: rgba(161, 21, 239, .65);
  border: 0px solid #59257e;
  min-height: 300px;
  padding: 30px 60px 60px 30px;
  height: auto;
  z-index: 33;
  border-radius: 10% 30% / 30% 20%;
  -webkit-border-radius: 10% 30% / 30% 20%;
  -moz-border-radius: 10% 30% / 30% 20%;
  -ms-border-radius: 10% 30% / 30% 20%;
  -o-border-radius: 10% 30% / 30% 20%;
} 


#praisemeh {
  margin-top: 100px;
  position: relative;
  width: 97%;
  height: auto;
   font-size: 1rem;
  font-family: "Playpen Sans", cursive;
  background: #E8B8FF;
  padding: 20px;
  border-radius: 20px;
  z-index: 34;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

#praisemeh a {
  color: #49007e; 
  text-decoration: none;
  padding-right: 12px;
 
}

#praisemeh a:hover {
  text-decoration: none;
  color: #849488;
 
}

#praisemeh::before {
  content: '';
  position: absolute;
  background-image: url('/img/praisemeh.png');
  background-size: auto 100px;
  background-repeat: no-repeat;
  background-position: top left;
  width: 100%; 
  height: 100%;
  min-height: 100px;
    opacity: 1;
    inset: 0;
  top: -65px;
  left: 12px;
  z-index: -1;
}


/* REAL COMMENTS */
#sluts {
  position: relative;
  min-height: 450px;
  max-width: 100%;
  margin-top: 10px;
  background-image: url("../img/curtainofhandparty.png"), linear-gradient(0deg,rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 0) 100%);
  background-position: bottom center;
  background-repeat: repeat-x;
  background-size: auto 450px;
  z-index: 5;
}

#happybirthday {
  position: relative;
  height: 300px;
  width: 100%;
  background-image: url("../img/happybirthday.png"), linear-gradient(0deg,rgba(0, 0, 0, 1) 70%, rgba(255, 0, 0, 0) 100%);
  background-position: bottom center;
  background-repeat: repeat-x;
  background-size: auto 250px;
  z-index: 5;

}

/* 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: 100px;
}
.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;
}

/* FOOTER */
footer {
  position: relative;
  color: #c164ff;
  font-size: 1.1rem;
  padding: 10px;
  z-index: 1;
}

.piepurple {
  font-weight: 600;
  color: rgb(255, 255, 255);
  font-family: "Playpen Sans";
  background: linear-gradient(
        90deg,
        rgb(169, 21, 255) 0%,
         rgb(126, 0, 229) 40%,
         rgb(124, 40, 250) 70%,
        rgb(133, 122, 143) 100%);
                -webkit-text-fill-color: transparent;
                   -webkit-background-clip: text;
                background-clip: text; 
}

footer p {
  margin: auto;
}

footer a {
  color: #8e8e8e;
}

footer a:hover {
  color: #ababab;
}

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

/* #curtainkisses {
  width: 100%;
  height: 250px;
  background-image: url("/img/curtainofhands.png");
  background-position: bottom center;
  background-repeat: repeat-x;
  background-size: auto 100%;
} */

.secret{
  background-color: inherit;
  border-bottom: 2px solid #d393e1;
  z-index: 100;
  color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.secret:hover{
  background-color: transparent;
  color: inherit;
}


#underthefloorboards {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 100px;
  padding-bottom: 250px;
  min-width: 1250px;
  background: #000000;
  background-image: linear-gradient(180deg,rgba(0, 0, 0, 1) 10%, rgba(255, 255, 255, 0) 25%), url("../img/starttheshowbg.png"), url("../img/starttheshowbg2.png");
  background-size: 100% 30%, 70% auto, 70% auto;
  background-position: top center, bottom left, bottom left;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: scroll, fixed, fixed;
}
/* 
#sugarcubez {
  max-width: 1400px;
  width: 100%;
  min-width: 1250px;
  padding-top: 380px;
  background-image: url("../img/underdastage.png");
  background-position: center top;
  background-size: 100%;
  background-repeat: no-repeat;
} */

#sugarcubez {
  max-width: 1400px;
  width: 100%;
  min-width: 1250px;
  padding-top: 20px;
}
.studio {
   margin: 50px;
   max-width: 950px;
   width: 100%;
   padding: 10px;
   position: relative;
   background: #090017;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   z-index: 20;
} 

.studio img {
  max-width: 920px;
  width: 100%;
}

.studioz {
   
   max-width: 920px;
   width: 100%;
   padding: 10px 50px 50px 50px;
   position: relative;
    background: #40288c;
    background-image: url('../img/bgwood.png');
    background-size: 50% auto;
    background-position: top left;
    background-attachment: scroll;
    text-align: center;
    box-sizing: border-box;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    z-index: 30;
} 

#melting {
    width: 920px;
    aspect-ratio: 4 / 1;
    background-image: url('../img/melting.png');
    background-size: 50% auto;
    background-position: top left;
    background-attachment: scroll;
    background-repeat: repeat-x;

}

#supportbox {
margin: auto;
    max-width: 85%;
    font-size: 1rem;
    text-align: center;
    z-index: 50;
}

#supportall {
    width: 100%;
    max-width: 500px;
    padding-top: 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
    
}

#supportbox a {
  font-family: "Playpen Sans";
}

.support {
  font-weight: 500;
  background-color: #1d1637;
  box-shadow: 2px 2px 0 #42347c;
  margin: 6px;
  font-size: .95rem;
  color: #cdcdd1;
  padding: 9px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 1.3em;
   transition: 0.3s;
  -webkit-border-radius: 1.3em;
  -moz-border-radius: 1.3em;
  -ms-border-radius: 1.3em;
  -o-border-radius: 1.3em;
}

.support:hover, .support:active {
  background-color: #bba4c3;
  color: #ffffff;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 #04010c;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
}

/* #studio {
    max-width: 1050px;
  width: 100%;
  padding: 30px;
  position: relative;
  background-color: #32007C;
  border-radius: 40px;
  border-style: dashed;
  border-width: 5px;
  border-color: #d3a3ff;
  outline: 10px solid #32007C;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
} */



/* #studio {
  position: relative;
  margin: auto;
  width: 100%;
  background: #000000;
  padding: 20px;
  z-index: 1;
} */

#benice {
  position: relative;
  max-width: 1600px;
  width: 100%;
  height: auto;
}

/* #cloud {
  max-width: 1100px;
  width: 100%;
  padding: 10px;
  position: relative;
  background-color: #32007C;
  border-radius: 40px;
  border-style: dashed;
  border-width: 5px;
  border-color: #d3a3ff;
  outline: 10px solid #32007C;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
} */

#cloud {
  position: relative;
  top: 250px;
  background-image: url("../img/dopem.png");
background-size: 100% auto;
background-position: center;
background-repeat: repeat-y;
  margin: auto;
  width: 100%;
  max-width: 1100px;
  z-index: 1;
}
#cloud::after {
  position: absolute;
  background-image: url('../img/dopebottom.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
  content: ''; 
  inset: 0;
  width: 1100px;
  height: 100%;
  top: 100px;
  opacity: 1;
  z-index: 20;
  left: 1px;
}

#cloud::before {
  position: absolute;
  background-image: url('../img/dopetop.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  content: ''; 
  inset: 0;
  z-index: 12;
  width: 1100px;
  top: -260px;
  left: 1px;
  height: 100%;
  opacity: 1;
}



#cloudbox {
  width: 100%;
  height: auto;
  margin: 0;
 padding-left: 150px;
  padding-right: 150px;
  padding-top: 0px;
  position: relative;
   color: rgb(59, 59, 59);
  font-size: 1.5rem;
  z-index: 40;
  } 


/* #cloud {
  position: relative;
  top: 250px;
  background-image: url("../img/dopem.png");
background-size: 100% auto;
background-position: center;
background-repeat: repeat-y;
  margin: auto;
  width: 100%;
  max-width: 1100px;
  z-index: 1;
}
#cloud::after {
  position: absolute;
  background-image: url('../img/dopebottom.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
  content: ''; 
  inset: 0;
  width: 1100px;
  height: 100%;
  top: 150px;
  opacity: 1;
  z-index: 20;
  left: 1px;
}

#cloud::before {
  position: absolute;
  background-image: url('../img/dopetop.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  content: ''; 
  inset: 0;
  z-index: 12;
  width: 1100px;
  top: -260px;
  left: 1px;
  height: 100%;
  opacity: 1;
}



#cloudbox {
  width: 100%;
  height: auto;
  margin: 0;
 padding-left: 150px;
  padding-right: 150px;
  padding-top: 0px;
  position: relative;
   color: rgb(59, 59, 59);
  font-size: 1.5rem;
  z-index: 40;
  }  */


.closet {
  font-size: 1.1rem;
  font-weight: 600;
  font-family: "Playpen Sans";
  background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
}

.writeFooterBigSis {
  position: relative;
}

.purplez {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgb(255, 255, 255);
  font-family: "Playpen Sans";
  background: linear-gradient(
        90deg,
        rgba(137, 0, 229, 1) 0%,
        rgba(152, 0, 255, 1) 10%,
        rgba(185, 2, 254, 1) 20%,
        rgba(165, 119, 229, 1) 30%,
        rgba(164, 151, 173, 1) 40%,
        rgba(188, 181, 194, 1) 50%,
        rgba(212, 207, 216, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%);
                -webkit-text-fill-color: transparent;
                   -webkit-background-clip: text;
                background-clip: text; 
}

.rotateimg1 {
  position: relative;
  left: 15px;
  top: 16px;
  width: 420px;
  transform: rotate(8deg);
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  -o-transform: rotate(8deg);
}

@media screen and (max-width: 1600px) {
        /* CSS rules for screens up to 768px wide */
        #studio img {
          max-width: 100%;
          width: 890px;
          
        }
   
    }