/* FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100..900&display=swap');

@import url('https://fonts.cdnfonts.com/css/starborn');
@import url('https://fonts.cdnfonts.com/css/hey-elsie');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');


@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

@font-face {
  font-family: 'NDS BIOS';
  src: url('https://justjennie.neocities.org/fonts/ndsbios.eot'); /* IE9 Compat Modes */
  src: url('https://justjennie.neocities.org/fonts/ndsbios.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://justjennie.neocities.org/fonts/ndsbios.ttf') format('truetype'); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  image-rendering: pixelated;
  text-rendering: geometricPrecision;
}

@font-face {
  font-family: 'Nineteen93';
  src: url('https://justjennie.neocities.org/fonts/NineteenNinetyThree.eot'); /* IE9 Compat Modes */
  src: url('https://justjennie.neocities.org/fonts/NineteenNinetyThree.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://justjennie.neocities.org/fonts/NineteenNinetyThree.ttf') format('truetype'); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  image-rendering: pixelated;
  text-rendering: geometricPrecision;
}

@font-face {
  font-family: 'PixelOperator';
  src: url('https://justjennie.neocities.org/fonts/PixelOperator.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  image-rendering: pixelated;
  text-rendering: geometricPrecision;
}

@font-face {
  font-family: 'PixelOperator';
  src: url('https://justjennie.neocities.org/fonts/PixelOperator-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  image-rendering: pixelated;
  text-rendering: geometricPrecision;
}





/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #ffffff00;
  --content-background-color: #ffffff;
  --sidebar-background-color: #ffffff;

  /* Text Colors: */
  --text-color: #000000;
  --sidebar-text-color: #000000;
  --link-color: #d984af;
  --link-color-hover: #f7a9d1;

  /* Text: */
  --font: 'PixelOperator', sans-serif;
  --heading-font: 'PixelOperator', sans-serif;
  --font-size: 16px;

  /* Other Settings: */
  --margin: 10px;
  --padding: 20px;
  --border: 2px solid #FFE8F3;
  --round-borders: 0px;
  --sidebar-width: 250px;
  --boxshadow: 5px 5px 0px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("https://64.media.tumblr.com/7bdf9e6e09f825fd325c6e27492124bc/tumblr_inline_miqn3dMemA1qz4rgp.png");
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: geometricPrecision;
  cursor: url(./images/starcursor.png), auto !important;
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px var(--link-color);
  background-color: inherit;
  color: var(--text-color);
}

/* Links: */
a {
  text-decoration: underline dashed #5FE1E8;
  text-decoration-thickness: 1px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: #000;
  background-color: #FFFFC0;
  text-decoration: none;
  text-shadow:0 2px 0 #AAF9FD,0 2px 0 #AAF9FD,0 2px 0 #AAF9FD,0 2px 0 #AAF9FD,0 2px 0 #AAF9FD;
  cursor: url(./images/starhand.png), auto !important;

}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
  width: 1000px;
  display: grid;
  grid-gap: var(--margin);
  grid-template: "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(--sidebar-width) auto var(--sidebar-width);
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  border-radius: var(--round-borders);
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
  grid-area: header;
  font-size: 1.2em;
  /*border: var(--border);*/
  border-radius: var(--round-borders);
  background: none;
}

.header-content {
  padding: var(--padding);
}

.header-title {
  text-align: center;
  font-family: 'Hey Elsie';
  font-size: 5em;
  color: #f7a9d1;
  text-shadow:0 3px 0 #AAF9FD,0 4px 0 #AAF9FD,0 5px 0 #AAF9FD,0 6px 0 #AAF9FD,0 7px 0 #AAF9FD;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  letter-spacing: 2px;
}

.header-image img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside {
  grid-area: aside;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
}

.left-sidebar {
  grid-area: leftSidebar;
}

.right-sidebar {
  grid-area: rightSidebar;
}

.sidebar-title {
  font-family: 'Hey Elsie';
  font-size: 1.5em;
  color: #f7a9d1;
  text-shadow:0 1px 0 #AAF9FD,0 2px 0 #AAF9FD,0 2px 0 #AAF9FD,0 3px 0 #AAF9FD,0 4px 0 #AAF9FD;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  letter-spacing: 2px;
}

.sidebar-section:not(:last-child) {
  margin-bottom: 2em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

/* Sidebar Blockquote: */

.sidebar-section blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
}



/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: center;
}

footer a,
footer a:visited {
  color: var(--link-color);
}

footer a:hover,
footer a:focus {
  color: var(--link-color-hover);
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

.sidebar-nav {
  margin-bottom: 20px;
  background: #FFFFC0;
  border: 1px dashed #e8a5c2;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 5px #fcd6e8;
  font-family: 'hey elsie';
  -webkit-text-stroke-width: 0.8px;
  -webkit-text-stroke-color: black;
  text-shadow:0 1px 0 #fff,0 1px 0 #fff,0 2px 0 #fff,0 2px 0 #fff,0 2px 0 #fff;

  font-size: 20px;
}

.sidebar-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav ul li {
  margin-bottom: 0.5em;
}

.sidebar-nav ul li a {
  display: block;
  padding: 3px 12px;
  background-color: #ffeaf4;
  border: 1px solid #f7c1d9;
  border-radius: 6px;
  color: #F7A9D1;
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: 3px;
}

.sidebar-nav ul li a:hover,
.sidebar-nav ul li a:focus {
  background-color: #fcd6e8;
  letter-spacing: 6px;
  box-shadow: 0 0 5px #fcd6e8;
  -webkit-text-stroke-width: 0.8px;
  -webkit-text-stroke-color: black;
  text-shadow:0 1px 0 #AAF9FD,0 1px 0 #AAF9FD,0 2px 0 #AAF9FD,0 2px 0 #AAF9FD,0 2px 0 #AAF9FD;
    cursor: url(./images/starhand.png), auto !important;
}


.sidebar-nav ul li a span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.sidebar-nav ul li a:hover span,
.sidebar-nav ul li a:focus span {
  animation: wiggle 0.4s linear infinite;
    cursor: url(./images/starhand.png), auto !important;

}



/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

main {
  line-height: 1.5;
}



main p,
main .image,
main .full-width-image,
main .two-columns {
  margin: 0.75em 0;
}

main ol,
main ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

main ol li,
main ul li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

main ol {
  padding-left: 2em;
}

main blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
}

main pre {
  margin: 1em 0 1.5em;
}

main code {
  text-transform: none;
}

main center {
  margin: 1em 0;
  padding: 0 1em;
}

main hr {
  border: 0;
  border-top: var(--border);
  margin: 1.5em 0;
}

/* HEADINGS: */

main h1,
main h2,
main h3,
main h5,
main h6 {
  font-family: 'Hey Elsie';
  color: #f7a9d1;
  text-shadow:0 1px 0 #AAF9FD,0 2px 0 #AAF9FD,0 2px 0 #AAF9FD,0 3px 0 #AAF9FD,0 4px 0 #AAF9FD;
  -webkit-text-stroke-width: 0.7px;
  -webkit-text-stroke-color: black;
  letter-spacing: 2px;
  margin-bottom: 0;
  line-height: 1.5;
  
}

h4 {
  font-family: 'nineteen93';
  font-size: 9px;
  letter-spacing: 2px;
  margin-bottom: 4px;
  margin-top: 4px !important;
  padding-left: 4px;
  line-height: 1.5;
  background-color: #FFFFC0;
  font-weight: normal !important;
}

main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 1.8em;
}

main h2 {
  font-size: 1.8em;
}

main h3 {
  font-size: 1.4em;
}

/*main h4 {
  font-size: 1.3em;
}*/

main h5 {
  font-size: 1.2em;
}

main h6 {
  font-size: 1.1em;
}

/* COLUMNS: */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}

/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
}

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
}

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
  overflow: hidden;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */

/* please do not remove this. */

#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */

/* CSS Code for devices < 800px */
@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .layout {
    width: 100%;
    grid-template: "header" auto  "leftSidebar" auto "main" auto "footer" auto / 1fr;
    /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
  }

  
  .right-sidebar { 
    display: none;
  }

  aside {
    border-bottom: 1px solid;
    padding: 9px;
    font-size: 0.9em;
  }

  
  nav {
    padding: 0;
  }

  nav > ul {
    padding-top: 0.5em;
  }

  nav > ul li > a,
  nav > ul li > details summary,
  nav > ul li > strong {
    padding: 0.5em;
  }

  main {
    max-height: none;
    padding: 15px;
  }

  .images {
    flex-wrap: wrap;
  }

  .images img {
    width: 100%;
  }

  #skip-to-content-link {
    font-size: 1rem;
  }
}


/* Microblog Posts */
.microblog {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post {
  padding: 10px;
  background: #fff1f8;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

/* Date Stamp */
.post time {
  display: inline;
  font-size: 9px;
  font-family: nineteen93;
  color: #000;
  margin-bottom: 0.5rem;
  text-shadow:0 2px 0 #AAF9FD;
  background: #FFFFC0;
}

.post p {
  margin-top: 0.5rem;
  margin-bottom: 0px;
}

/* Sparkle Animation */
@keyframes sparkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
.post::after {
  content: '✧';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2rem;
  color: #f7a9d1;
  animation: sparkle 2s infinite ease-in-out;
}

.like-btn {
  border: 1px dotted #f7a9d1;
  background: #facde4;
  border-radius: 10px;
  font-family: 'nineteen93';
  font-size: 9px;
  color: #ffffff;
  float: right;
  margin-right: 20px;
}

.like-btn span {
  color: #000;
}

.like-btn:disabled {
  border: 1px dotted #919090;
  background: #cfcfcf;
  border-radius: 10px;
  font-family: 'nineteen93';
  font-size: 9px;
  color: #919090;
}

.like-btn.liked {
  border: 1px dotted #f7a9d1;
  background: #facde4;
  border-radius: 10px;
  font-family: 'nineteen93';
  font-size: 9px;
  color: #f980be;        /* or any visual cue */
  cursor: default;
}

b {
  color: #f980be;
}

i {
  color: #000;
  text-shadow:0 1px 0 #AAF9FD,0 1px 0 #AAF9FD,0 2px 0 #AAF9FD,0 2px 0 #AAF9FD,0 2px 0 #AAF9FD;
}

em {
  color: #000;
  text-shadow:0 1px 0 #FFFFC0,0 1px 0 #FFFFC0,0 2px 0 #FFFFC0,0 2px 0 #FFFFC0,0 2px 0 #FFFFC0;
  font-style: normal;
}

strong {
  color: #000;
  background-color: #FFFFC0;
  text-shadow:0 1px 0 #AAF9FD,0 1px 0 #AAF9FD,0 2px 0 #AAF9FD,0 2px 0 #AAF9FD,0 2px 0 #AAF9FD;
  font-style: bold;
}

summary::marker {
  color: #5FE1E8;
}


#status-date {
  font-family: 'Nineteen93';
  font-size: 9px;
  margin-bottom: 3px !important;
  color: #606060;
}

.mini-text {
  font-family: 'Nineteen93';
  font-size: 9px;
  margin-bottom: 3px !important;
  color: #606060;
}

/* Site Button: */

.site-button-wrapper {
  display: flex;
  gap: 0.5em; /* space between buttons */
  justify-content: center; /* optional: center them */
  flex-wrap: wrap; /* allows wrapping on smaller screens */
}

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.site-button textarea {
  font-family: monospace;
  font-size: 0.5em;
  width: 88px;
  height: 30px;
}

.site-button textarea.mini32 {
  font-family: monospace;
  font-size: 0.5em;
  width: 32px;
  height: 30px;
}

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  position: relative;
}

.marquee-content {
  display: inline-block;
  animation: scroll-left 20s linear infinite;
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}



.scroll-shelf {
  max-height: 125px; /* Adjust height to fit 3 rows of buttons */
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.scroll-shelf::-webkit-scrollbar {
  display: none;             /* Chrome, Safari */
}


.button-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
}
.button-wrapper a img {
  width: 88px;
  height: auto;
}

.pixel-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
}

.pixel-wrapper a img {
  width: auto;
  height: auto;
  display: block;
}


img {
  image-rendering: crisp-edges; /* Works in Firefox */
  image-rendering: pixelated;   /* Works in Chrome, Edge, Safari */
}




#HCB_comment_box textarea {
  
}

/* the entire html comment box container. applies to everything */
#HCB_comment_box {
  font-family: 'PixelOperator' !important;
  
  
  }
  
  .hcb-comment-body {
    font-size: 16px !important;
  }
  
  #HCB_comment_box .date {
  font-size: 9px !important;
  font-family: 'nineteen93' !important;
  }

#HCB_comment_box .hcb-comment-tb button {
  font-size: 9px !important;
  font-family: 'nineteen93' !important;
}

#HCB_comment_box .hcb-icon {
  display: none;
}
#HCB_comment_box p.error {
  border: 4px solid #f88;
  background-color: #fee;
  color: #800;
}

#HCB_comment_box #hcb_form .btn, #HCB_comment_box #HCB_comment_form_box .btn {
  font-family: 'PixelOperator' !important;
  font-size: 16px !important;
}

#hcb_submit:hover{
  background-color: #f7a9d1 !important;
  border: 1px solid #f7a9d1 !important;
  cursor: url(./images/starhand.png), auto !important;

}

.btn-secondary:hover {
  border: 1px solid #f7a9d1 !important;
  color: #f7a9d1 !important;
  cursor: url(./images/starhand.png), auto !important;

}

#HCB_comment_box #hcb_form textarea, #HCB_comment_box #hcb_form #hcb_form_name {
  font-family: 'PixelOperator' !important;
  font-size: 16px !important;
}

.home-desc {
  display:none;
  font-family: 'Nineteen93' !important;
  font-size: 9px !important;
  color: #000 !important;
}

#HCB_comment_box textarea, #HCB_comment_box input.text {
  border: 1px solid #ddd;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  background: url(bg.png) repeat-x;
}

#HCB_comment_box .hcb-wrapper-half {
  display:block;
  width:50%;
  float:left;
}
#HCB_comment_box .hcb-wrapper {
  clear:both;
  margin-bottom:0.5em;
}
#HCB_comment_box input.text {
  display:block;
  width:97%;
  
}

#HCB_comment_box h3 {
  display: none;
}
/* the submit button */
#HCB_comment_box input.submit {
    margin:0 7px 3px 0;
    background-color:#f5f5f5;
    border:1px solid #ccc;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    font-family:"PixelOperator", Tahoma, Arial, Verdana, sans-serif;
    font-size:16px;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
#HCB_comment_box input.submit:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
  cursor: url(./images/starhand.png), auto !important;

}

#HCB_comment_box span.home-desc {
  opacity:0.4;
}

/* the individual comment display containers */
#HCB_comment_box div.comment {
  border-top:1px solid #eee;
  margin-bottom:0.5em;
}

/* the moderator message */
.hcb-mod  b{
  color:darkblue;
}

/* next, prev, ok and x link style */
.hcb-link {
  color:blue;
  text-decoration:underline;
}


.msg {
  font-family: "nineteen93" !important;
  font-size: 9px !important;
}

summary {
  list-style: none; /* removes the default triangle */
}

summary::-webkit-details-marker {
  display: none; /* hides the marker in WebKit browsers */
}

summary::before {
  content: "▶"; /* right-pointing arrow */
  display: inline-block;
  margin-right: 8px;
  color: black;
  transition: transform 0.2s ease;
  font-size: 10px;
}

details[open] summary::before {
  transform: rotate(90deg); /* points down when open */
}


.gallery summary {
  font-family: 'PixelOperator', sans-serif;
  font-size: 16px;
  padding: 0px 3px;
  background: linear-gradient(to right, #AAF9FD, #FFFFC0, #F7A9D1);
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 8px;
  box-shadow: 0 0 0 1px #f7a9d1;
}

.gallery details[open] summary {
  font-weight: bold;
}

.gallery-group {
  column-count: 2;
  column-gap: 10px;
}

.gallery-group img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  display: block;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #f7a9d1;
  image-rendering: pixelated;
}



/*
    Below you will be able to freely customize every aspect of the comment widget.
    Most aspects of the widget are 100% able to be customized in CSS, but for strong structural changes,
    you may have to edit the JavaScript file.

    These are all the classes and IDs at your disposal!
    Classes have a c- at the start and IDs have a c_
    You don't need every single one for a good theme, but I tried to give as many options as possible!
*/
/*
    Containers:
        #c_widget - The container <div> for the entire widget
        #c_inputArea - The wrapper <div> around the form
        #c_container - The wrapper <div> around all the comments

    The input form:
        #c_form - The whole input <form>
        #c_widgetTitle - The <h2> title at the top of the form

        .c-inputWrapper- All <div> wrappers for each label/input pair
        .c-label - All <label>s
        .c-input - All <input>s

        #c_nameWrapper - The wrapper <div> for the name field
        .c-nameLabel - The <label> for the name field
        .c-nameInput - The <input> for the name field

        #c_websiteWrapper - The wrapper <div> for the website field
        .c-websiteLabel - The <label> for the website field
        .c-websiteInput - The <input> for the website field

        #c_textWrapper - The wrapper <div> for the text field
        .c-textLabel - The <label> for the text field
        .c-textInput - The <input> for the text field

        #c_submitButton - The submit button (It's an <input> element with a type of "submit")
        #c_replyingText - The text <span> that displays when a user is replying to a comment

    The comment section:
        .c-comment - All comment <div>s
        .c-reply - All reply <div>s (contained within parent comment <div>s)
        .c-name - The name of the person submitting the comment/reply (an <h3> element)
        .c-timestamp - The timestamp of when the comment/reply was made (a <span> element)
        .c-site - The website linked at the top of the comment/reply (an <a> element)
        .c-text - The actual text body of the comment/reply (a <p> element)
        .c-replyButton - All reply <button>s
        .c-expandButton - The <button>s to reveal/hide replies (These only show if s_collapsedReplies is set to true in the JS)
        
        #c_pagination - The <div> wrapper for the pagination at the bottom (Only shows if there's more than one page)
        .c-paginationButton - Both left and right directional <button>s
        #c_leftButton - The left <button>
        #c_rightButton - The right <button>
*/

/* Main */
#c_widget {
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    background-attachment: fixed;
    font-family: 'PixelOperator';
    font-size: 16px;
    color: #211F24;
}

#c_widget button, #c_widget input[type=submit] {
    padding: 4px;
    text-decoration: none;
	text-transform: lowercase;
	text-align: center;
    background-color: white;
    color: #CE98FB;
    border: 1px solid #CE98FB;
    border-radius: 5px;
}
#c_widget button:hover, #c_widget input[type=submit]:hover {
    background-color: #FB96D8;
    color: white;
    border: 1px solid #FB96D8;
}
#c_widget button:disabled, #c_widget input[type=submit]:disabled {opacity: 60%;}
#c_widget button:disabled:hover, #c_widget input[type=submit]:disabled:hover {
    background-color: white;
    color: #CE98FB;
    border: 1px solid #CE98FB;
}

/* Input section */
#c_inputDiv {
    padding: 10px;
    text-transform: lowercase;
    background-color: rgba(255, 255, 255, .8);
}
#c_container {margin-top: 10px;}

#c_widgetTitle {
    margin: 0;
    padding: 0;
    font-style: italic;
    text-decoration: underline;
}

.c-inputWrapper {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}
.c-input {
    padding: 4px;
    color: #5E2C49;
    border-radius: 4px;
    border: 1px solid #CE98FB;
	outline: none;
}
.c-input:focus {border: 1px solid #FB96D8;}

.c-textInput {
    width: calc(100% - 10px);
    max-width: 900px;
    resize: none;
}
#c_submitButton {
  display: block;
  font-family: 'PixelOperator';
  font-size: 16px;
}
#c_replyingText {color: #5E2C49;}

/* Comment section */
.c-comment {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: rgba(255, 255, 255, .75);
}
.c-reply {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px dashed #CE98FB;
    border-radius: 4px;
}
.c-reply:last-child {margin-bottom: 0;}

.c-name {
    display: inline-block;
    margin: 0;
    margin-right: 10px;
    padding: 0;
    text-decoration: underline;
}
.c-site {
    text-transform: lowercase;
    color: #CE98FB;
}
.c-site:hover {color: #211F24;}
.c-timestamp {
    float: right;
    opacity: 60%;
}
.c-text {
    margin: 0;
    margin-top: 10px;
    padding: 0;
    text-align: justify;
    color: #5E2C49;
}

/* Pagination */
#c_pagination {text-align: center;}
.c-replyButton {
  margin-top: 10px;
    font-family: 'PixelOperator';
  font-size: 16px;
  
}
.c-expandButton {
    float: right;
    margin-top: 10px;
      font-family: 'PixelOperator';
  font-size: 16px;
}
.c-paginationButton {
    margin-right: 4px;
    margin-left: 4px;
}