@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://ne0nbandit.art/achievements.css);
@font-face { font-family: 'DTM-sans'; src: url("/assets/fonts/DTM-Sans.ttf") format("truetype"); }
@font-face { font-family: 'PixelOperator'; src: url("/assets/fonts/PixelOperator.ttf") format("truetype"); }
@font-face { font-family: 'Deltarune'; src: url("/assets/fonts/Deltarune.ttf") format("truetype"); }
@font-face { font-family: 'DotumChe'; src: url("/assets/fonts/DotumChe-Pixel.ttf") format("truetype"); }
@font-face { font-family: 'Mercy'; src: url("/assets/fonts/MERCY.ttf") format("truetype"); }
@font-face { font-family: 'Pixelham-Bold'; src: url("/assets/fonts/Pixelham-Bold.ttf") format("truetype"); }
@font-face { font-family: 'Pixelham'; src: url("/assets/fonts/Pixelham-Regular.ttf") format("truetype"); }
@font-face { font-family: 'Earthbound'; src: url("/assets/fonts/Earth%20Momma.ttf") format("truetype"); }

/* ===== Main Theme ===== */
:root {
  --bg-color: #6b0043; /* Dark Purple from menus, back buttons, etc. */
  --bg-color-opacity1: #6b0043FC; /* From navbar & Autoplay */
  --bg-color-opacity2: #6b0043CF;
  --innerbox-color1: ##defff4CC; /* Main Boxes */
  --innerbox-color2: #FFFFFFBF;
  --accentbox-color: #E0D7F596;
  --accentbox-border: #4e34e338;
  --dark-gradient: linear-gradient(180deg, var(--bg-color-opacity1) 40%, var(--bg-color-opacity2));

  /* Text*/
  --title-color: #27248F;
  --text-color: #5040AE; /* Purple */
  --light-text: #FFFFFF; /* White text on dark backgrounds */
  --link-color: #746AE6;
  --link-hover: #FF00FF;
  --link-visited: #AF65D3;
  --text-shadow: #5040AE60; /* Text color with opacity */
  --primary-font: 'PixelOperator', monospace;
  --secondary-font: 'DTM-sans', monospace;  
  --deltarune-font: 'Deltarune', monospace;
  --text-effect: 1px 1px var(--shadow-color1), -1px -1px var(--shadow-color2);
  --border-effect: 1px 1px var(--border-color1), -1px -1px var(--border-color2);
  --border-hover: 2px 0px var(--border-color1), -2px -0px var(--border-color2);
  --coolbutton-border: 3px -3px var(--border-color1), -3px 3px var(--border-color2);
  --coolbutton-hover: 4px 0px var(--border-color1), -4px 0px var(--border-color2);

  /* Boxes */
  --shadow-color1: #FF00FF99; /* This webbed site can fit so many box shadows*/
  --shadow-color2: #00FFFF99;
  --border-color1: #FF00FF;
  --border-color2: #00FFFF;

  /* Misc */
  --bg-img: url("https://ne0nbandit.github.io/assets/img/decor/bg_main.png");
  --wavey-gif: url("https://ne0nbandit.github.io/assets/img/decor/waveybg.gif");
  --rainy-bg: url("https://ne0nbandit.github.io/assets/img/decor/RainyBG.gif");
  --cursor-main: url(/assets/cursors/HotlineBlack.png), auto;
  --cursor-pointer: url(/assets/cursors/HotlineWhitePointer.png), auto;
  --selection-bg: #82FFFFFF;
  --selection-text: #B969FF;
  --btn-hover: #372d67; /* Buttons use bg-color */
  --box-gradient1: linear-gradient(180deg, #FF00FF26, #00FFFF26); /* 25% Opacity */
  --box-gradient2: linear-gradient(#FF00FF40 0%, #00FFFF40 100%); /* 15% Opacity */
  --coolbox-gradient: linear-gradient(transparent 50%, #FF00FF40 0%, #00FFFF40 100%);
  --h4-gradient: -webkit-linear-gradient(#C400FF, #2500FF);
  --decorhue: hue-rotate(0deg);

  /* Images */
  --jayheart-img: url("https://ne0nbandit.github.io/assets/art/jay/JayHeart.png");
  --nblogo-img: url("https://ne0nbandit.github.io/assets/art/jay/nblogoblack.png");
  --jaybody-img: url("https://ne0nbandit.github.io/assets/art/jay/JayBody.png");
  --jaytail-img: url("https://ne0nbandit.github.io/assets/art/jay/JayTail.png");  
  --jaysay-head: url("https://ne0nbandit.github.io/assets/art/jay/jsay_head.png");
  --jaysay-arms: url("https://ne0nbandit.github.io/assets/art/jay/jsay_arms.png");
  --jaysay-body: url("https://ne0nbandit.github.io/assets/art/jay/jsay_body.png");

  --arrowL-img: url("https://ne0nbandit.github.io/assets/img/decor/ArrowL.gif");
  --arrowR-img: url("https://ne0nbandit.github.io/assets/img/decor/ArrowR.gif");

  /* Homepage Slideshow */
  --slideshow-img1: url(https://ne0nbandit.github.io/assets/img/slideshow/mh.gif);
  --slideshow-title1: "Welcome to the Backstage";
  --slideshow-caption1: "Now open to visitors!";  

  --slideshow-img2: url(https://ne0nbandit.github.io/assets/art/jay/tres.png);
  --slideshow-title2: "NEØNbandit Street turns 3 years old";
  --slideshow-caption2: "WHO GIVE A DAMN!!!";

  --slideshow-img3: url(https://i.imgur.com/gtS89up.gif/RedFlags.gif);
  --slideshow-title3: "Red Flags Animation";
  --slideshow-caption3: "Feat Rouxls Kaard and Klieg Lights (Deltarune OC)";

  --slideshow-img4: url(https://i.imgur.com/691okLd.gif/TennaBloodpop.gif);
  --slideshow-title4: "Bloodpop Animation Meme";
  --slideshow-caption4: "Feat Tenna (Deltarune OC)";

  --slideshow-img5: url(https://piclog.blue/uploads/1347/wh.jpg);
  --slideshow-title5: "Placeholder Title";
  --slideshow-caption5: "Nothing's going on, idk what to tell you";
}

/* THEMES */

.default {
  --bg-color: #090033; /* Dark Purple from menus, back buttons, etc. */
  --bg-color-opacity1: #090033FC; /* From navbar & Autoplay */
  --bg-color-opacity2: #090033CF;
  --innerbox-color1: #FFFFFFCC; /* Main Boxes */
  --innerbox-color2: #FFFFFFBF;
  --accentbox-color: #E0D7F596;
  --accentbox-border: #4e34e338;
  --dark-gradient: linear-gradient(180deg, var(--bg-color-opacity1) 40%, var(--bg-color-opacity2));

  /* Text*/
  --title-color: #27248F;
  --text-color: #5040AE; /* Purple */
  --light-text: #FFFFFF; /* White text on dark backgrounds */
  --link-color: #746AE6;
  --link-hover: #FF00FF;
  --link-visited: #AF65D3;
  --text-shadow: #5040AE60; /* Text color with opacity */
  --primary-font: 'PixelOperator', monospace;
  --secondary-font: 'DTM-sans', monospace;  
  --deltarune-font: 'Deltarune', monospace;
  --text-effect: 1px 1px var(--shadow-color1), -1px -1px var(--shadow-color2);
  --border-effect: 1px 1px var(--border-color1), -1px -1px var(--border-color2);
  --border-hover: 2px 0px var(--border-color1), -2px -0px var(--border-color2);
  --coolbutton-border: 3px -3px var(--border-color1), -3px 3px var(--border-color2);
  --coolbutton-hover: 4px 0px var(--border-color1), -4px 0px var(--border-color2);

  /* Boxes */
  --shadow-color1: #FF00FF99; /* This webbed site can fit so many box shadows*/
  --shadow-color2: #00FFFF99;
  --border-color1: #FF00FF;
  --border-color2: #00FFFF;

  /* Misc */
  --bg-img: url("https://ne0nbandit.github.io/assets/img/decor/bg_main.png");
  --wavey-gif: url("https://ne0nbandit.github.io/assets/img/decor/waveybg.gif");
  --rainy-bg: url("https://ne0nbandit.github.io/assets/img/decor/RainyBG.gif");
  --cursor-main: url(/assets/cursors/HotlineBlack.png), auto;
  --cursor-pointer: url(/assets/cursors/HotlineWhitePointer.png), auto;
  --selection-bg: #82FFFFFF;
  --selection-text: #B969FF;
  --btn-hover: #372d67; /* Buttons use bg-color */
  --box-gradient1: linear-gradient(180deg, #FF00FF26, #00FFFF26); /* 25% Opacity */
  --box-gradient2: linear-gradient(#FF00FF40 0%, #00FFFF40 100%); /* 15% Opacity */
  --coolbox-gradient: linear-gradient(transparent 50%, #FF00FF40 0%, #00FFFF40 100%);
  --h4-gradient: -webkit-linear-gradient(#C400FF, #2500FF);
  --decorhue: hue-rotate(0deg);

  /* Images */
  --jayheart-img: url("https://ne0nbandit.github.io/assets/art/jay/JayHeart.png");
  --nblogo-img: url("https://ne0nbandit.github.io/assets/art/jay/nblogoblack.png");
  --jaybody-img: url("https://ne0nbandit.github.io/assets/art/jay/JayBody.png");
  --jaytail-img: url("https://ne0nbandit.github.io/assets/art/jay/JayTail.png");  
  --jaysay-head: url("https://ne0nbandit.github.io/assets/art/jay/jsay_head.png");
  --jaysay-arms: url("https://ne0nbandit.github.io/assets/art/jay/jsay_arms.png");
  --jaysay-body: url("https://ne0nbandit.github.io/assets/art/jay/jsay_body.png");
}

.christmas {
  --bg-color: #001406;
  --bg-color-opacity1: #011600fc;
  --bg-color-opacity2: #023300cf;
  --innerbox-color1: #045300cc;
  --innerbox-color2: #d5ff88c7;
  --accentbox-color: #f3f5d796;
  --accentbox-border: #34e36138;
  /* Text*/
  --title-color: #004924;
  --text-color: #1f6f00;
  --light-text: #FFFFFF;
  --link-color: #ff3333;
  --link-hover: #00b72a;
  --link-visited: #ff0000;
  --text-shadow: #24549b60;
  --primary-font: 'PixelOperator', monospace;
  --secondary-font: 'DTM-sans', monospace;
  --deltarune-font: 'Deltarune', monospace;
  /* Boxes */
  --shadow-color1: #ff000099;
  --shadow-color2: #00ff1599;
  --border-color1: #ff0000;
  --border-color2: #00c710;
  /* Misc */
  --bg-img: url("https://ne0nbandit.github.io/assets/holiday/xmas/chbg.png");
  --wavey-gif: url("https://ne0nbandit.github.io/assets/holiday/xmas/waveych.gif");
  --rainy-bg: url("https://ne0nbandit.github.io/assets/holiday/xmas/RainyCH.gif");
  --cursor-main: url(/assets/cursors/HotlineBlack.png), auto;
  --cursor-pointer: url(/assets/cursors/HotlineWhitePointer.png), auto;
  --selection-bg: #ddff82;
  --selection-text: #ff6969;
  --btn-hover: #1f5034;
  --box-gradient1: linear-gradient(180deg, #FFBFBF, #BFF1C3); /* 25% Opacity */
  --box-gradient2: linear-gradient(180deg, #FFDBDB, #DBF7DE); /* 15% Opacity */
  --coolbox-gradient: linear-gradient(transparent 50%, #ebff9d99 0%, #d9000099 100%);
  --h4-gradient: -webkit-linear-gradient(#FF0000, #065b00);
  --decorhue: hue-rotate(160deg);
  /* Images */
  --jayheart-img: url("https://ne0nbandit.github.io/assets/holiday/xmas/JayHeartCH.png");
  --nblogo-img: url("https://ne0nbandit.github.io/assets/holiday/xmas/nblogoch.png");
  --jaybody-img: url("https://ne0nbandit.github.io/assets/holiday/xmas/JayBodyCH.png");
  --jaytail-img: url("https://ne0nbandit.github.io/assets/holiday/xmas/JayTailCH.png");  
  --jaysay-head: url("https://ne0nbandit.github.io/assets/holiday/xmas/jsay_head.png");
  --jaysay-arms: url("https://ne0nbandit.github.io/assets/holiday/xmas/jsay_arms.png");
  --jaysay-body: url("https://ne0nbandit.github.io/assets/holiday/xmas/jsay_body.png");
}

.halloween { /* WIP */
--bg-color: #090033;
--bg-color-opacity1: #090033FC;
--bg-color-opacity2: #090033CF;
--innerbox-color1: #6d1500d9;
--innerbox-color2: #00000080;
--accentbox-color: #8b355096;
--accentbox-border: #4e34e338;  
/* Text*/
--title-color: #ffca00;
--text-color: #ffb300;
--light-text: #FFFFFF;
--link-color: #ffff00;
--link-hover: #FF00FF;
--link-visited: #ffff00;
--text-shadow: #9b245b60;
--primary-font: 'PixelOperator', monospace;
--secondary-font: 'DTM-sans', monospace;
/* Boxes */
--shadow-color1: #FF00FF99;
--shadow-color2: #FFFF0099;
--border-color1: #FF00FF;
--border-color2: #FFFF00;
/* Misc */
--bg-img: url("https://ne0nbandit.github.io/assets/holiday/halloween/hwbg.png");
--wavey-gif: url("https://ne0nbandit.github.io/assets/holiday/halloween/waveyhw.gif");
--rainy-bg: url("https://ne0nbandit.github.io/assets/holiday/xmas/RainyCH.gif");
--cursor-main: url(/assets/cursors/HotlineBlack.png), auto;
--cursor-pointer: url(/assets/cursors/HotlineWhitePointer.png), auto;
--selection-bg: #ffec5a;
--selection-text: #b969ff;
--btn-hover: #372d67;
--box-gradient1: linear-gradient(180deg, #8d006b, #b16900);
--box-gradient2: linear-gradient(180deg, #d125a8, #ff9c0c);
--coolbox-gradient: linear-gradient(transparent 50%, #ebff9d99 0%, #d9000099 100%);
--h4-gradient: -webkit-linear-gradient(#ff00d0, #ffc500);
--decorhue: hue-rotate(40deg);
/* Images */
--jayheart-img: url("https://ne0nbandit.github.io/assets/holiday/halloween/JayHeartHW.png");
--nblogo-img: url("https://ne0nbandit.github.io/assets/holiday/halloween/nblogohw.png");
--jaybody-img: url("https://ne0nbandit.github.io/assets/holiday/halloween/JayBodyHW.png");
--jaytail-img: url("https://ne0nbandit.github.io/assets/holiday/halloween/JayTailHW.png");
--jaysay-head: url("https://ne0nbandit.github.io/assets/holiday/halloween/jsay_head.png");
--jaysay-arms: url("https://ne0nbandit.github.io/assets/holiday/halloween/jsay_arms.png");
--jaysay-body: url("https://ne0nbandit.github.io/assets/holiday/halloween/jsay_body.png");
}

/* ===== ANIMATIONS ===== */
/* === Floating === */
.floating { animation-iteration-count: infinite; animation-name: floatingani; animation-duration: 5s; position: relative; bottom: 5px; }
@keyframes floatingani { 50% { transform: translateY(10px); } }

.floatingrotate { animation-iteration-count: infinite; animation-name: floatingrotate; animation-duration: 5s; position: relative; bottom: 5px; }
@keyframes floatingrotate { 50%  { transform: translateY(10px); transform: rotate(5deg); } }
@keyframes rotation       { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }

/* ===== Shake . ===== */
.shake:hover { animation: shake 0.5s; 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); }
}

/* ===== SHAKING LETTERS.THAT TOOK ME FOREVER TO MAKE ===== */
.shakeletter1 { display: inline-block; animation: shakeletter1 300ms linear 0ms infinite normal forwards; }
.shakeletter2 { display: inline-block; animation: shakeletter1 299ms linear 0ms infinite reverse backwards; }
.shakeletter3 { display: inline-block; animation: shakeletter1 301ms linear 0ms infinite alternate both; }
@keyframes shakeletter1 {
  0%   { transform: translate(0);	}
  20%  { transform: translate(-1px, 1px); }
  40%  { transform: translate(-1px, -1px); }
  60%  { transform: translate(1px, 1px); }
  80%  { transform: translate(1px, -1px); }
  100% { transform: translate(0); }
}

/* ===== Body and other main structure junk ===== */
body { background: var(--bg-img) no-repeat fixed var(--bg-color); background-size: cover; font-family: var(--primary-font); color: var(--text-color); margin: 0; cursor: var(--cursor-main); font-weight: 100; }
*    { box-sizing: border-box; } /* Still don't know what this does. Still keeping it because things will break otherwise */

*::-webkit-scrollbar { width: 7px; }
*::-webkit-scrollbar-track { background: var(--bg-color); border: 1px solid var(--bg-color); border-radius: 7px; }
*::-webkit-scrollbar-thumb { border: 1px solid var(--bg-color); background: linear-gradient(180deg, var(--border-color1), var(--border-color2)); border-radius: 7px; }
::-moz-selection { color: var(--selection-text); background: var(--selection-bg); } 
::selection      { color: var(--selection-text); background: var(--selection-bg); }

/* === TEXT THINGS === */
p    { font-size: 18px; margin: 12px 0px; line-height: 16.5px}
a, b { font-family: var(--secondary-font); font-weight: 100; letter-spacing: 0.5px; font-size: 15.5px; }
a         { color: var(--link-color); text-decoration: none; cursor: var(--cursor-pointer); transition: 0.2s; }
a:visited { color: var(--link-visited); }
a:hover   { color: var(--link-hover); }
b { text-shadow: var(--text-effect); }
h1, h2, h3, h4 { text-shadow: var(--text-effect); color: var(--title-color); font-weight: 100; }
h1 { font-family: var(--secondary-font); margin: 10px 0; font-size: 2.5em; letter-spacing: 1px;  }
h2 { font-family: var(--deltarune-font); font-size: 27px;  }  
h3 { font-family: var(--secondary-font); font-size: 23px; margin: 10px 0; }
h4 { font-family: var(--secondary-font); font-size: 17px; margin: 8px 0px; }

/* === Misc Basic tags === */
hr { background-image: linear-gradient(90deg, transparent, var(--shadow-color2), var(--shadow-color1), var(--shadow-color2), transparent); border: none; height: 2px; }
td { vertical-align: top; padding: 3px; }
.fiftywidthtd { width: 50%; }

textarea { text-shadow: 1px 1px white, -1px -1px white, -1px 1px white, 1px -1px white; border: var(--link-color) dashed 1px; font-family: var(--primary-font); background: var(--box-gradient1); color: var(--title-color); border-radius: 5px; padding: 2px 5px; font-size: 16px; width: 190px; height: 50px; }

/* === Buttons === */
button { box-shadow: var(--border-effect); text-shadow: 1px 1px var(--text-color); font-family: var(--secondary-font); border: none; cursor: var(--cursor-pointer); background: var(--bg-color); color: var(--light-text); padding: 5px 10px 3px; border-radius: 10px; font-size: 16px; transition: 0.2s; }
button:hover { box-shadow: var(--border-hover); background: var(--btn-hover); letter-spacing: 0.5px; }
.backbtn { text-shadow: 0px 1px var(--border-color1), 0px -1px var(--border-color2); box-shadow: 2px -2px var(--border-color1), -2px 2px var(--border-color2); font-family: var(--deltarune-font); background: var(--bg-color); color: var(--light-text) !important; padding: 7px 10px 3px 0; border-radius: 15px; font-size: 20px; display: flex; align-items: center; height: 30px; width: fit-content; margin: 0 0 10px; }
.backbtn:hover { letter-spacing: 1.5px; box-shadow: 2px 0px var(--border-color1), -2px 0px var(--border-color2); }
.backbtn img   { content: var(--arrowL-img); filter: var(--decorhue) drop-shadow(0px -2px 0px var(--border-color1)) drop-shadow(0px 2px 0px var(--border-color2)); margin-right: 5px; }
.coolbutton   { background: var(--bg-color); box-shadow: var(--coolbutton-border); width: fit-content; padding: 2px 15px; margin: auto; border-radius: 15px; transition: 0.2s; text-shadow: var(--text-effect); }
.coolbutton a { letter-spacing: 0px; color: var(--light-text); font-family: var(--deltarune-font); font-size: 24px; }
.coolbutton:hover   { box-shadow: var(--coolbutton-hover); text-shadow: 2px 1px var(--shadow-color1), -2px -1px var(--shadow-color2); }
.coolbutton:hover a { letter-spacing: 1px; }      

/* ===== LISTS ===== */
li { padding-left: 5px; }
ul li::marker { content: "*"; font-family: 'DTM-sans'; }
ol li { counter-increment: item; display: flex; padding-bottom: 5px; }
ol li:before {
  content: counter(item);
  border-radius: 100%;    
  min-width: 1rem;
  padding: 0 0.125rem;
  box-shadow: 1px 1px var(--border-color1), -1px -1px var(--border-color2);
  background-color: var(--bg-color);
  color: var(--light-text);
  margin: 0 10px 0 0;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  height: 20px;
}

/* === General Layout === */
.sidebar-group   { align-items: flex-start; padding: 0 1%; display: flex; margin: 35px auto; width: 100%; justify-content: center; gap: 20px; }
.sidebar-content { padding: 15px 10px 15px 10px; border: 1px solid var(--bg-color); box-shadow: 3px 0px var(--border-color1), -3px 1px var(--border-color2); background: var(--box-gradient2); background-color: white; }
.innerbox { box-shadow: var(--border-effect); background-color: var(--innerbox-color2); border-radius: 0.8rem; text-align: center; padding: 20px; height: 100%; /* For WebGarden */ }
.solo-sidebar { margin: 25px auto; width: 50%; min-width: 900px; }
.solo-sidebar .innerbox { padding: 10px; }
.abouttabs { background: var(--bg-color); width: fit-content; box-shadow: -3px -3px var(--border-color2); border-radius: 30px 30px 0 0; }
.abouttabs button:first-child { border-radius: 30px 30px 0 0; box-shadow: 3px 0px var(--border-color1), -3px 0px var(--border-color2), 4px 0px var(--border-color1); }
.abouttabs button { border-radius: 0 30px 0 0; padding: 15px 20px 0 20px; font-family: var(--deltarune-font); font-size: 27px; box-shadow: 3px 0px var(--border-color1), 0px -3px var(--border-color2), 4px 0px var(--border-color1); position: relative; z-index: 1; }
.coolheader { background: var(--bg-color); margin: 0; color: var(--light-text); font-family: var(--deltarune-font); border-radius: 15px 15px 0 0; box-shadow: 3px -3px var(--border-color1), -3px 0px var(--border-color2); font-size: 30px; padding: 15px 0 10px; display: flex; align-items: center; justify-content: center; text-shadow: 2px 1px var(--shadow-color1), -1px -1px var(--shadow-color2); line-height: 15px; }
.coolfooter { background: var(--bg-color); border-radius: 0 0 15px 15px; text-align: center; box-shadow: 3px 0px var(--border-color2), -3px 0px var(--border-color1), 0 3px var(--border-color1); margin-bottom: 15px; height: 20px; }
.coolfooter a { color: white; }
.aboutheader { filter: drop-shadow(0px 3px 0px #09003350); border-radius: 0 30px 0 0 !important; }
.aboutfooter { filter: drop-shadow(0px -25px 30px #00ffff50); }
.namebox { width: 100%; background: var(--box-gradient1); border-radius: 50px; padding: 0px 15px; position: relative; max-width: 550px; margin: 10px auto; }              
.namebox p:first-child { font-family: var(--deltarune-font); color: var(--title-color); font-size: 45px; text-shadow: 2px -2px var(--shadow-color1), -2px 2px var(--shadow-color2); text-align: left; }
.namebox p { font-size: 21px; text-align: right; font-family: var(--secondary-font); text-shadow: var(--text-effect); margin: 10px 0 0 0; }
.taglist p { font-family: var(--secondary-font); background: var(--coolbox-gradient); border-radius: 50px; font-size: 19px; text-shadow: var(--text-effect); color: var(--title-color); }
.taglist a { font-size: larger; letter-spacing: 1px; }

/* ===== PAGE-SPECIFIC CSS ===== */
/* ===== /index ===== */
#jaybody, #jaytail, #streetsign { pointer-events: none; position: fixed; height: 70%; }
#jaybody, #jaytail { filter: drop-shadow(2px 4px 0px var(--border-color1)) drop-shadow(-2px -4px 0px var(--border-color2)); margin: 0% auto; right: 0%; left: 0%; }
#jaybody { top: 150px; z-index: 3; content: var(--jaybody-img); }  
#jaytail { top: 140px; z-index: 2; content: var(--jaytail-img); }
#streetsign { top: -50px; z-index: 1; transform: rotate(-10deg); filter: var(--decorhue) drop-shadow(2px 4px 0px var(--border-color1)) drop-shadow(-2px -4px 0px var(--border-color2)) drop-shadow(2px 4px 6px var(--border-color1)); right: 47%; }  
#CreditAudioNote { text-shadow: 1px 1px var(--link-color), -1px -1px var(--border-color1), 1px -1px var(--link-color), -1px 1px var(--link-color); color: var(--light-text); position: fixed; max-width: 314px; bottom: 40px; left: 19px; z-index: 3; letter-spacing: 1px; }  
#CreditAudioNote p { filter: drop-shadow(1px 1px 0px var(--bg-color)); margin: 10px 0; }
.warningbox { width: 100%; max-width: 374px; margin: auto 34%; background: var(--bg-color); border-radius: 15px; top: 200px; position: relative; z-index: 2; box-shadow: 2px 1px var(--border-color1), -2px -1px var(--border-color2); filter: drop-shadow(7px 6px 0px #5040AE60); animation-duration: 15s; }
.warningcontent { background: var(--wavey-gif); margin: 0px 0px 15px; padding: 10px 15px; display: flex; flex-direction: column; align-items: center; }
.warningbox ul { border-radius: 5px; padding: 10px 5px 10px 15px; filter: drop-shadow(-2px 0px 0px var(--shadow-color1)) drop-shadow(2px 0px 0px var(--shadow-color2)) drop-shadow(0px 2px 0px var(--shadow-color2)) drop-shadow(0px -2px 0px var(--shadow-color1)) drop-shadow(3px 3px 0px #09003350); background: var(--box-gradient1); background-color: white; text-shadow: var(--text-effect); font-size: 18px; font-family: var(--secondary-font); letter-spacing: 1px; line-height: 25px; margin: auto; list-style-position: inside; overflow: auto; max-height: 150px; }
.warningcontent p:first-child { font-family: 'Deltarune'; margin: 0 0 5px; }
.chromatic { text-shadow: 4px -4px var(--shadow-color1), -4px 4px var(--shadow-color2); color: var(--title-color); font-size: 23px; }
.enter { display: flex; justify-content: center; padding-bottom: 5px; }
.enter a { color: var(--light-text); font-family: var(--deltarune-font); font-size: 50px; text-shadow: 5px 5px var(--shadow-color1), -5px -5px var(--shadow-color2); letter-spacing: 2px; }
.enter a:hover { text-shadow: 2px 2px var(--shadow-color1), -2px -2px var(--shadow-color2); letter-spacing: 0px; font-size: 48px; } 
#brokenlayout { background: #00000080; text-align: right; position: fixed; width: 100%; bottom: 0; }  
#brokenlayout p { padding: 1px 5px; margin: 0; letter-spacing: -1px; }
#brokenlayout p, #brokenlayout a { color: #e1d2ff; } 
.imgaura { filter: blur(2px) opacity(0.2); }

/* ==== /home ==== */
#center-sidebar { width: 100%; max-width: 950px; }
#left-sidebar   { width: 100%; max-width: 430px; }
#right-sidebar  { width: 100%; max-width: 430px; }
#chatdiv { filter: drop-shadow(3px 3px 0px var(--border-color1)) drop-shadow(-3px -3px 0px var(--border-color2)); }
#chatdiv .coolheader { filter: drop-shadow(0px 3px 0px #09003350); box-shadow: none; font-size: 23px; justify-content: flex-start; padding: 12px 10px 5px; }
.chatcontainer { width: 100%; min-height: 400px; padding: 0 1px 3px 1px; background: var(--bg-color); border-radius: 0 0 10px 10px; }
#kofibtn { background: var(--text-color); box-shadow: var(--coolbutton-border); width: fit-content; padding: 3px 15px 1px; margin: 10px auto 0; border-radius: 15px; transition-duration: 0.2s; text-shadow: 1px 0px var(--shadow-color1), -1px -0px var(--shadow-color2); word-spacing: -5px; letter-spacing: 0px; font-family: 'dotumche'; }
#kofibtn:hover   { box-shadow: var(--coolbutton-hover); text-shadow: 2px 0px var(--shadow-color1), -2px -0px var(--shadow-color2); }
#kofibtn:hover a { letter-spacing: 1px; }
#kofibtn a { text-decoration: none; color: var(--light-text); font-family: 'dotumche'; font-size: 14px; }
#kofibtn i { font-size: 16px; }
.socialmedia img       { image-rendering: pixelated; height: 46px; transition: 0.2s; }
.socialmedia img:hover { filter: hue-rotate(40deg) contrast(1.1) saturate(2.5); }
.jayheartdiv { background: var(--box-gradient1); border-radius: 100px; max-width: 100px; float: right; padding: 5px; }
#jayheart { filter: drop-shadow(2px -2px 0px var(--border-color1)) drop-shadow(-2px -4px 0px var(--border-color2)); padding: 5px; content: var(--jayheart-img); width: 100%; max-width: 100px; }
#palmtree { filter: var(--decorhue) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 6px var(--border-color1)); top: -35px; pointer-events: none; position: absolute; width: 150px; content: url(https://ne0nbandit.github.io/assets/img/decor/palmtree.png); }
#fishies  { float: right;filter: var(--decorhue) drop-shadow(2px 4px 0px var(--border-color1)) drop-shadow(-2px -4px 0px var(--border-color2));  content: url(https://ne0nbandit.github.io/assets/img/decor/fishies.png); padding: 0 5px;}
#palmtreespin { float: left; filter: var(--decorhue) drop-shadow(1px 1px 0px var(--border-color1)) drop-shadow(-1px -1px 0px var(--border-color2)) }
#nblogo { width: 121px; filter: drop-shadow(2px 2px 1px var(--innerbox-color1)); content: var(--nblogo-img); }
.portugal { background: linear-gradient(90deg, #006600, #006600 40%, #ff0000 40%); height: 31px; width: 88px; box-shadow: inset 1px 1px 0px 0px #0000002b, inset -1px -1px 0px 0px #0000002b, var(--text-effect); pointer-events: none; }
.portugalcircle { background: url(https://ne0nbandit.github.io/assets/img/misc/portugal.png) no-repeat center; height: 31px; background-size: 100%; }

/* === /home - Slideshow Gallery === */
#slideshowbox { filter: drop-shadow(3px 3px var(--border-color1)) drop-shadow(-3px -3px var(--border-color2)); }
#slideshowbox > .coolheader { max-width: 670px; margin: auto; box-shadow: none; }
.slideshow { border-radius: 0 0 10px 10px; position: relative; max-width: 670px; overflow: hidden; height: 350px; margin: auto; padding: 0 1px; background: var(--bg-color); }

.mySlides { display: none; height: 350px; overflow: hidden; }
.mySlides img { width: 100%; height: 100%; object-fit: cover; }

.mySlides:nth-child(1) img { content: var(--slideshow-img1); }
.column:nth-child(1)   img { content: var(--slideshow-img1); }
.mySlides:nth-child(1) h3:after { content: var(--slideshow-title1); }
.mySlides:nth-child(1) p:after  { content: var(--slideshow-caption1); }

.mySlides:nth-child(2) img { content: var(--slideshow-img2); }
.column:nth-child(2)   img { content: var(--slideshow-img2); }
.mySlides:nth-child(2) h3:after { content: var(--slideshow-title2); }
.mySlides:nth-child(2) p:after  { content: var(--slideshow-caption2); }

.mySlides:nth-child(3) img { content: var(--slideshow-img3); }
.column:nth-child(3)   img { content: var(--slideshow-img3); }
.mySlides:nth-child(3) h3:after { content: var(--slideshow-title3); }
.mySlides:nth-child(3) p:after  { content: var(--slideshow-caption3); }

.mySlides:nth-child(4) img { content: var(--slideshow-img4); }
.column:nth-child(4)   img { content: var(--slideshow-img4); }
.mySlides:nth-child(4) h3:after { content: var(--slideshow-title4); }
.mySlides:nth-child(4) p:after  { content: var(--slideshow-caption4); }

.mySlides:nth-child(5) img { content: var(--slideshow-img5); }
.column:nth-child(5)   img { content: var(--slideshow-img5); }
.mySlides:nth-child(5) h3:after { content: var(--slideshow-title5); }
.mySlides:nth-child(5) p:after  { content: var(--slideshow-caption5); }

.prev, .next { filter: drop-shadow(0px 0px 6px var(--title-color)); transition-property: left,right,opacity; transition-duration: .3s; position: absolute; width: auto; opacity: 0; top: 50%; }
.next { right: 0%; }
.prev { left: 0%; }
.prev img { content: var(--arrowL-img); }
.next img { content: var(--arrowR-img); }
.slideshow:hover > .next, .slideshow:hover > .prev { opacity: 1; }
.slideshow:hover > .prev { left: 1%; }
.slideshow:hover > .next { right: 1%; }

.slideshow:hover .galleryNav { bottom: 50px; }
.slideshow:hover .captiondiv { bottom: 0px; }
.column { padding: 0px 4px; }
.column img { box-shadow: 2px 1px var(--shadow-color1), -2px -1px var(--shadow-color2); cursor: var(--cursor-pointer); border-radius: 5px; object-fit: cover; max-height: 50px; max-width: 64px; height: 100%; }
.row { display: flex; align-items: stretch; justify-content: center; height: 100%; }
.thumb { width: 100%; opacity: 0.7; transition: 0.3s; }
.activethumb, .thumb:hover { opacity: 1; }

.galleryNav { background-color: var(--bg-color-opacity2); backdrop-filter: blur(2px); transition: bottom .3s; position: relative; bottom: 0; height: 100%; }
.captiondiv { position: absolute; bottom: -50px; width: 100%; text-align: left; background-color: var(--bg-color-opacity2); backdrop-filter: blur(2px); padding: 5px; transition: bottom .3s; height: 100px; }
.captiondiv h3, .captiondiv p { color: var(--light-text); text-shadow: none; margin: 0 5px; }
.captiondiv h3 { font-size: 18px; }
.captiondiv p  { font-size: 14px; font-family: var(--primary-font); }

/* ==== /guestbook ==== */
.scrolldiv  { max-height: 720px; overflow: auto; } /* Currently used in the Guestbook page */

/* ===== /sitemap ===== */
.sitemap { text-align: left; columns: 3; }
.sitemap img { content: url(https://ne0nbandit.github.io/assets/img/decor/new.png); image-rendering: pixelated; filter: var(--decorhue); }
.sitemap a, .title { background: var(--coolbox-gradient); font-family: var(--deltarune-font); }
.sitemap a { font-size: 20px; padding: 0px 10px; border-radius: 10px; line-height: 22px; }
.sitemap .subpage a { font-family: var(--primary-font); font-size: 18px; background: none; padding: 0; letter-spacing: 0.5px; }
.title { color: var(--title-color); font-size: 22px; width: fit-content; padding: 0px 10px; margin: 5px 0 5px -10px; border-radius: 10px; }
.subpage .title a { font-family: var(--deltarune-font); font-size: 22px; }
.title::marker { content: "" !important; }
#kmsface { width: 100%; max-width: 100px; margin: 0; float: right; }

/* ==== /commissions ==== */
.checklist li::marker { content: "✓"; }
.crosslist li::marker { content: "⨯"; }

.twodivwrapcenter .centeredlist {
  text-align: left;
  background: var(--box-gradient1);
  margin: 0;
  padding: 10px 25px;
  border-radius: 0 0 20px 20px;
  box-shadow: var(--border-effect);
}

/* ==== /about ==== */
.aboutbox { border-radius: 15px 5px 5px 15px; background: var(--box-gradient1); padding: 0 10px 0 15px; box-shadow: var(--border-effect); max-width: 550px; margin: auto; overflow: auto; max-height: 300px; text-align: justify; position: relative; background-color: white; }
.aboutbox p { margin: 8px 0px; }
.aboutbox p:first-child { font-size: 22px; font-family: var(--deltarune-font); color: var(--title-color); margin: 15px 0 0px; }
.aboutdiv { display: flex; justify-content: space-around; align-items: center; }
.sona     { background: var(--box-gradient1); border-radius: 500px; width: 350px; display: flex; justify-content: center; margin-left: 50px; }
.sona img { filter: drop-shadow(2px 4px 0px var(--border-color1)) drop-shadow(-2px -4px 0px var(--border-color2)); pointer-events: none; }
.likesbox    { display: flex; justify-content: space-evenly; margin: 0 15px; }
.likesdiv    { background: var(--box-gradient1); width: 100%; margin: 5px; border-radius: 15px; box-shadow: var(--text-effect); text-align: left; }
.likesdiv ul { font-family: var(--secondary-font); font-size: 18px; letter-spacing: 1px; margin: 5px; overflow: auto; max-height: 250px; padding-bottom: 5px; padding-left: 20px; }
.likesdiv li { margin: 5px 0; }
.flaggroup    { image-rendering: pixelated; display: flex; justify-content: space-evenly; }
.groupbuttons { display: flex; margin: 15px 0; }
#cubepng { width: 100%; max-width: 100px; filter: drop-shadow(3px 3px 0px var(--shadow-color1)) drop-shadow(-3px -3px 0px var(--shadow-color2)); pointer-events: none; padding: 5px; }
.pkmnteam       { image-rendering: pixelated; display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; flex-wrap: wrap; }
.pkmnteam > div { background: var(--box-gradient1); width: 100%; display: flex; justify-content: space-evenly; align-items: flex-end; border-radius: 100px; max-width: 110px; min-height: 110px; }
.pkmnteam img   { filter: drop-shadow(1px 1px 0px var(--shadow-color1)) drop-shadow(-1px -1px 0px var(--shadow-color2)); pointer-events: none; }
.faq button { width: 100%; text-align: left; margin: 10px 0; }
.faqtitle   { font-size: 30px; text-align: left; font-family: var(--deltarune-font); text-shadow: var(--text-effect); margin: 10px 0 0 15px; color: var(--title-color); }
.twodivwrap { display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; }

/* ==== Character Profiles ==== */
.quotebox    { margin: 5px 0px; border-radius: 10px; background-size: cover; padding: 10px; }
.quotebox h3 { margin: 5px; }
.infobox   { overflow: auto; height: 325px; border-radius: 10px; padding: 0px 7px; }    
.infobox b { font-size: 18px; letter-spacing: 1px; color: var(--title-color); }
.CharacterRelationships { margin: 0 5px; }
.CharacterRelationships > div { display: flex; gap: 15px; width: 100%; }
.CharacterRelationships > div > div { display: flex; gap: 15px; width: 100%; align-items: center; }
.CharacterRelationships div > h3 { text-align: left; font-family: 'Pixelham-Bold'; margin: 5px 0; }
.CharacterRelationships p { text-align: left; }
.CharacterRelationships h3 > i { font-family: 'Pixelham'; font-size: 27px; }
.CharacterRelationships img { max-width: 150px; filter: drop-shadow(-2px -2px 0px white) drop-shadow(2px -1px 0px white) drop-shadow(0px 2px 0px white) drop-shadow(4px 4px 0px var(--blue4)); }
.RelationshipSolo { text-align: left; max-width: 700px; margin: auto; }

.CharacterInfo { display: flex; gap: 15px; }
.CharacterInfo > div { width: 50%; }
#LikesDislikes > div { display: flex; }
#LikesDislikes > div > div { width: 100%; }
.MoodboardNew > div { display: flex; gap: 5px; }
.MoodboardNew img { width: 50%; margin-bottom: 5px; }

/* ===== NAVBAR & FOOTER STUFF ===== */
.topnav          { background: linear-gradient(180deg, var(--bg-color-opacity1) 50%, var(--bg-color-opacity2) 75%, #ff00ff21); box-shadow: 0px 5px var(--border-color1), 0px -5px var(--border-color2); margin: 16px 0 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.topnav a        { box-shadow: 1px 0px var(--btn-hover), -1px 0px var(--btn-hover); text-shadow: 1px 1px var(--link-color); background: var(--bg-color); color: var(--light-text); font-family: var(--deltarune-font); border-radius: 5px; padding: 5px 8px; margin: 5px 3px; font-size: 17px; transition: 0.2s; }
.topnav a:hover  { box-shadow: 2px 0px var(--shadow-color1), -2px 0px var(--shadow-color2); text-shadow: 2px 2px var(--shadow-color1), -1px -1px var(--shadow-color2); }
.topnav a:active { box-shadow: 3px 1px var(--shadow-color1), -3px -1px var(--shadow-color2); text-shadow: 3px 0px var(--shadow-color1), -3px 0px var(--shadow-color2); }
#sitename       { text-shadow: var(--text-effect); padding: 15px; font-family: var(--deltarune-font);  filter: drop-shadow(0px 0px 6px var(--border-color1)); }
#sitename:hover { text-shadow: 1px 1px var(--border-color2), -1px -1px var(--border-color1); transition: 0.2s;}
#sitename span  { color: var(--light-text); font-weight: bold; font-size: 27px; }
footer   { background: var(--dark-gradient); box-shadow: 0px 5px var(--border-color1), 0px -5px var(--border-color2); margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; padding: 10px 0; }
footer p { color: var(--link-color); margin: 1px; }
footer a { text-shadow: 0px 1px var(--border-color1), 0px -1px var(--border-color2); background: var(--coolbox-gradient); color: var(--light-text) !important; border-radius: 10px; padding: 1px 5px; } 
#footer img { image-rendering: pixelated; }
.buttonwrap { display: flex; justify-content: center; flex-wrap: wrap; }

/* ===== CONTENT BAR THINGS ===== */
.solobar-content {
  box-shadow: 5px 5px var(--border-color1), -5px -5px var(--border-color2);
  background-color: var(--innerbox-color1);
  border: 2px dotted var(--border-color1);
  padding: 15px 10px 15px 10px;
  border-radius: 1.3rem;
  margin: 25px 10px;
}

.soloinnerbox {
  box-shadow: var(--border-effect);
  background-color: var(--innerbox-color2);
  border: 2px dotted var(--border-color1);
  border-radius: 1.3rem;
  text-align: center;
  margin: 10px 0px;
  overflow: auto;
  padding: 20px;  
}

/* ===== Misc ===== */
/* Images */
.zoom       { transition: transform .5s; }
.zoom:hover { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
.imgcontainer     { display: flex; align-items: center; flex-direction: column; }
.imgcontainer img { max-width: 100%; object-fit: contain; }
.imgdecor { position: relative; }
.hueshift { filter: var(--decorhue); }
.frame { border-radius: 10px; width: 100%; }
.imgframe { border-radius: 5px; box-shadow: var(--text-effect); }
.dividergif { box-shadow: var(--text-effect); filter: var(--decorhue); border-radius: 5px; margin: 5px 0; height: 25px; width: 100%; content: url(https://ne0nbandit.github.io/assets/img/decor/divider.gif); }
.cardecordiv   { display: flex; align-items: center; }
.cardecordiv p { margin: 12px 7px; }
.cardecordiv div:first-child, .cardecordiv div:last-child { box-shadow: var(--text-effect); filter: var(--decorhue) contrast(1.5); border-radius: 1.3rem; height: 150px; margin: auto; }
.cardecordiv div:first-child { content: url(https://ne0nbandit.github.io/assets/img/decor/car_left.gif); }
.cardecordiv div:last-child  { content: url(https://ne0nbandit.github.io/assets/img/decor/car_right.gif); }
.cardecor { box-shadow: var(--text-effect); filter: var(--decorhue) contrast(1.5); border-radius: 1.3rem; height: 150px; }

#ImgOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: color-dodge; pointer-events: none; content: var(--img-overlay); z-index: 1; opacity: 0.4; }

/* Text */
.updatelog   { box-shadow: var(--text-effect); background: var(--box-gradient1); color: var(--title-color); text-align: justify; border-radius: 6px; padding: 0px 7px; overflow: auto; max-height: 300px; margin: auto; width: 90%; }
.updatelog b { background: var(--coolbox-gradient); border-radius: 10px; }
.cooltext { background: var(--coolbox-gradient); border-radius: 10px; }

/* ===== TOOLTIPS ===== */
.tooltip, .bottomtooltip { position: relative; display: inline-block; font-family: var(--primary-font); font-size: 15px; }
.tooltip:hover .tooltiptext, .bottomtooltip:hover .bottomtooltiptext { visibility: visible; opacity: 1; }
.tooltip .tooltiptext { bottom: 150%; text-shadow: var(--text-effect); }
.bottomtooltip .bottomtooltiptext  { top: 150%; left: 50%; margin-left: -60px; }
.tooltip .tooltiptext::after, .bottomtooltip .bottomtooltiptext::after { border-width: 5px; content: ""; position: absolute; border-style: solid; margin-left: -5px; left: 50%; }
.tooltip .tooltiptext::after { border-color: var(--border-color1) transparent transparent var(--border-color1); margin-left: -5px; top: 100%; }
.bottomtooltip .bottomtooltiptext::after { border-color: transparent transparent var(--border-color2) var(--border-color2); bottom: 100%; left: 50%;  }

.tooltip .tooltiptext, .bottomtooltip .bottomtooltiptext {
  box-shadow: 2px 2px var(--border-color1), -2px -2px var(--border-color2);
  background: var(--bg-color-opacity1); transition: opacity 0.3s; color: var(--light-text);
  border-radius: 6px; position: absolute; visibility: hidden; line-height: 12px; text-align: center;
  z-index: 2; padding: 6px 7px; opacity: 0; letter-spacing: 1px; text-shadow: var(--text-effect);
}

/* ===== WIDGETS ===== */
/* === Status Cafe === */
.bubblediv { position: absolute; margin-top: 30px; margin-left: 215px; z-index: 1; min-width: 200px; }
.bubble { background: #ffffff; max-width: 300px; width: 100%; border-radius: 15px; animation-duration: 15s !important; text-align: left; padding: 10px 15px; filter: drop-shadow(3px 3px 0px #09003350); min-height: 50px; }
.bubble:after { content: ""; position: absolute; border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent #ffffff transparent; top: 75%; left: -20px; margin-top: -25px; }
.jaysay { height: 230px; width: 100%; display: flex; justify-content: flex-start; filter: drop-shadow(4px -2px 0px var(--border-color1)) drop-shadow(-4px 0px 0px var(--border-color2)); margin-left: -30px; position: relative; z-index: 1; }
.jaysay img { position: absolute; pointer-events: none; }
#jsay_arms { z-index: 2; content: var(--jaysay-arms); }
#jsay_head { z-index: 1; transform-origin: 110px 150px; bottom: auto; content: var(--jaysay-head); }
#jsay_body { z-index: 0; content: var(--jaysay-body); }
#statuscafe-username a { color: var(--title-color); font-family: var(--deltarune-font); text-decoration: none; }

/* === Comment Box Customization === */
#HCB_comment_box h3 { display: none; }
#hcb_msg { margin: 0; }
#HCB_comment_box #hcb_form textarea, #HCB_comment_box #hcb_form #hcb_form_name { background: var(--box-gradient1); box-shadow: var(--text-effect); border: none; border-radius: 5px; }
#HCB_comment_box #hcb_form #hcb_form_name { font-family: var(--secondary-font) !important; font-size: 18px !important; letter-spacing: 1px; color: var(--title-color); text-shadow: var(--text-effect); }
#HCB_comment_box { font-family: var(--primary-font) !important; letter-spacing: 1px; }
#HCB_comment_box p.error { border: 4px solid rgb(255, 136, 229); background-color: #fee; color: rgb(136, 0, 95); }
#HCB_comment_box textarea, #HCB_comment_box input.text { font-family: var(--secondary-font) !important; color: var(--text-color) !important; font-size: 16px !important; letter-spacing: 0.5px; }
#HCB_comment_box .hcb-wrapper-half { text-align: left; }
#HCB_comment_box .hcb-wrapper { clear: both; margin-bottom: 0.5em; } /* Unsure what this does */
#HCB_comment_box input.text { display: block; width: 97%; }
#HCB_comment_box #hcb_form .home-desc { display: none; }
#HCB_comment_box #hcb_form .btn, #HCB_comment_box #HCB_comment_form_box .btn { font-family: var(--deltarune-font) !important; letter-spacing: 1px; border: none !important; background: var(--text-color) !important; background-color: var(--text-color) !important; color: white !important; text-shadow: var(--text-effect) !important; box-shadow: var(--border-effect) !important; font-size: 18px !important; padding: 8px 16px 7px !important; margin-right: 6px; font-weight: 100 !important; cursor: var(--cursor-pointer); border-radius: 10px; transition: 0.2s; }
#HCB_comment_box input.submit:hover{ filter: brightness(1.1); }
.btn-secondary:hover { filter: brightness(1.1); }
.admin-link { filter: brightness(2.5) sepia(1) saturate(9.5) hue-rotate(220deg); }
#HCB_comment_box #comments_list { border-radius: 15px; background: var(--accentbox-color); padding: 0 5px !important; margin-bottom: 5px; }
#HCB_comment_box div.comment { background: white; box-shadow: var(--text-effect); border-radius: 15px; padding: 1px 5px; margin: 5px auto 10px !important; width: 100%; max-width: 650px; }
#HCB_comment_box blockquote { margin: 10px !important; text-align: left; }
#HCB_comment_box #HCB_comment_form_box { padding-bottom: 0; }
.del { float: right; margin: 30px 5px; }
#HCB_comment_box .date { font-size: 16px !important; color: var(--link-color) !important; }
#HCB_comment_box .hcb-comment-body { font-size: 18px !important; margin: 2px 0 0 0 !important; text-shadow: var(--text-effect); }
.hcb-mod b { color: var(--title-color); font-family: var(--deltarune-font); font-size: 22px; }
.hcb-link { color:var(--link-color); }
#HCB_comment_box .comment a img { border-radius: 15px; filter: drop-shadow(1px 1px 6px var(--text-shadow)); }
#HCB_comment_box .hcb-comment-tb button { font-size: 16px !important; padding: 5px 10px 3px !important; color: var(--light-text) !important; background: var(--bg-color) !important; cursor: var(--cursor-pointer) !important; font-weight: 100 !important; text-shadow: var(--text-effect); }
#HCB_comment_box .hcb-comment-tb { padding: 5px 5px 10px !important; display: flex; }
#HCB_comment_box .comment .likes { top: 10px !important; right: 10px !important; }
#HCB_comment_box .comment { margin: 1em 0 !important; }
#HCB_comment_box .comment a img { margin: 10px 0 0 !important; max-width: 350px; width: 100%; max-height: 200px; object-fit: contain; background: var(--accentbox-border); }

/* ===== Literature Section ===== */
/* Updated Toggle */
.collapsible { background: var(--box-gradient2); color: var(--title-color) !important; padding: 5px 15px; transition: 0.5s; }
.collapsible:hover { background: var(--box-gradient1); }
.content { box-shadow: 1px 1px var(--accentbox-border), -1px -1px var(--accentbox-border); transition: max-height 0.2s ease-out; background: var(--accentbox-color); border-radius: 1.3rem; overflow: hidden; margin-top: 5px; padding: 0 15px; max-height: 0; }

/* Fic Previews */
.fic-group { display: flex; text-align: left; align-items: stretch; gap: 5px; flex-wrap: wrap; }
.fic-preview { display: flex; background: var(--accentbox-color); max-width: 425px; margin: 0 auto; border-radius: 8px; border-bottom: 1px solid var(--accentbox-border); padding: 5px 10px; }
.fic-summary { overflow: auto; max-height: 100px; margin-top: -8px; background: var(--box-gradient1); border-radius: 0 0 10px 10px; padding-left: 5px; margin-left: 5px; }
.fic-summary p { margin: 5px 0; }
.fic-img { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fic-img img { border-radius: 5px; box-shadow: var(--text-effect); height: 100px; width: 100px; object-fit: cover; }
.fic-img p { margin: 0; }
.fic-title { padding: 0 0 0 10px; filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white); font-family: var(--secondary-font); text-shadow: var(--text-effect); color: var(--title-color); font-weight: 100; font-size: 14px; margin: 5px 0; }

/* Fic Formatting */
.fic p { font-size: 17px; text-align: justify; }
.fic b { text-shadow: none; }
.navarrows a { font-size: 35px; text-decoration: none; }

/* Journals */
.blogdate { font-family: var(--deltarune-font); margin: 0; color: var(--link-color); text-shadow: 1px 1px var(--text-shadow); }
.bloglist { text-align: left; padding-left: 15px; }
.bloglist p { margin-top: 0; letter-spacing: 1px; font-size: 16px; line-height: 17px; }
.blogentries .innerbox { display: flex; align-items: center; text-align: left; margin: 0 0 15px; }
.blogthumb { padding: 0 10px; }
.blogthumb img { width: 100%; box-shadow: 3px 2px var(--border-color1), -3px -2px var(--border-color2); border-radius: 0.8rem; max-width: 900px; }
.blogentries h3 { margin: 10px 0; }

/* ===== IMAGE GALLERY NAVIGATION ===== */
.gallery-group { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; }
.gallery-thumb img { box-shadow: 3px 3px var(--shadow-color1), -3px -3px var(--shadow-color2); border-radius: 100px; object-fit: cover; height: 190px; max-width: 190px; width: 100%; transition: 0.2s; }
.gallery-thumb:hover img { transform: scale(1.1); }
.gallery-thumb:hover .gallery-desc { box-shadow: 2px 2px var(--border-color1), -2px -2px var(--border-color2); }
.gallery-thumb:hover span { letter-spacing: 1px; }
.gallery-desc { box-shadow: 2px 2px var(--border-color1), -2px -2px var(--border-color2); background: var(--bg-color); padding: 7px 10px; border-radius: 5px; transition: 0.2s; }
.gallery-desc span { text-shadow: var(--text-effect); color: var(--light-text); letter-spacing: 2px; font-size: 17px; transition: 0.2s; }
.gallery-inactive { pointer-events: none; }
.gallery-inactive img { filter: sepia(1) hue-rotate(211deg) saturate(0.7); }
.gallery-inactive .gallery-desc { box-shadow: 2px 0px var(--accentbox-border), -2px 0px var(--accentbox-border); background: var(--accentbox-color); }
.gallery-inactive span { color: var(--text-shadow); text-shadow: none; }

/* ===== IMAGE GALLERY ===== */
.pixelart { image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; transition: .5s; }
.pixelart:hover { filter: drop-shadow(4px -2px 0px rgba(0, 0, 0, 0.2)); image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; background-color: transparent; transform: scale(2); transition: .1s; }
.buttondisplay { width: 100%; max-width: 650px; margin: auto; margin: 5px auto; }
    
/* ===== LIGHTBOX ===== */    
.LightboxGallery img { box-shadow: var(--text-effect); background: linear-gradient(180deg, var(--text-color) 40%, var(--link-color)); border-radius: 5px; height: 150px; padding: 4px; }
.LightboxGallery img:hover { box-shadow: 1px 1px var(--shadow-color2), -1px -1px var(--shadow-color1); }

/* ===== AUTOPLAY ===== */  
.autoplayer button, .autoplayer a { background: var(--dark-gradient); box-shadow: 2px 2px var(--border-color1), -2px -2px var(--border-color2); position: fixed; bottom: 5px; z-index: 1; }
.autoplayer button { color: var(--light-text); border-radius: 40px; font-size: 18px; height: 35px; width: 35px; left: 5px; }
.autoplayer a { color: var(--link-color); border-radius: 5px; font-size: 14px; left: 50px; padding: 5px 10px; }

/* ===== Plush Squish ===== */
.squish { transition: 0.1s; }  
.squish:hover { cursor: var(--cursor-pointer); transform: scale(0.95); }  
.squish:active { transform: scale(0.90); }

@media only screen and (max-width: 1115px) {
/* /Home */
#center-sidebar { width: 100%; }
#left-sidebar   { width: 80%; }
#right-sidebar  { width: 80%; }
.sidebar-group  { gap: 10px; }

/* LAYOUT JUNK */ 
.coolheader { font-size: 25px; height: 35px; }
.sidebar-content { padding: 5px; }
.innerbox { padding: 10px; }
.solo-sidebar    { width: 80%; min-width: 665px; }
.solobar-content { width: 100%; padding: 0px; margin: 0px; }
.soloinnerbox    { padding: 20px 15px; }
.sitemap   { columns: 2; }
.updatelog { width: 100%; }

/* /index */
#jaybody { right: 10%; top: 170px; height: 65%; width: 100%; object-fit: contain; }
#jaytail { right: 10%; top: 160px; height: 65%; width: 100%; object-fit: contain; }
.warningbox { margin: auto 20%; }
#streetsign { right: 460px; top: -20px; }
  
/* Misc */
.fic-preview { width: 100%; max-width: none; }
.bigpixel { width: 100% }
.imgdecor { display: none; }
.namebox p:first-child { font-size: 35px; }
.namebox p { font-size: 18px; }
}
/* 1000PX RESPONSIVE ENDS HERE, STOP PUTTING THINGS UNDER THE WRONG BRACKET */

@media only screen and (max-width: 850px) { 
.sidebar-group { display: block; }  
#left-sidebar  { max-width: none; width: 100%; }
#right-sidebar { max-width: none; width: 100%; }   

/* Character Profiles */
.CharacterRelationships > div { flex-direction: column; }
.CharacterRelationships > div > div { flex-direction: column; }
}

@media only screen and (max-width: 700px) {
/* /Home */
#left-sidebar   { width: 100%; }
#center-sidebar { width: 100%; }
#right-sidebar  { width: 100%; }
.sidebar-group  { display: block; }

/* /guestbook */
.scrolldiv { max-height: none; }

/* /about */
.aboutbox { margin: 5px auto; }
.abouttabs button { padding: 10px 15px 0 15px; font-size: 20px; }
.sona { width: 100%; margin: auto; }
.sona img { width: 100%; }  
.aboutdiv { flex-direction: column; width: 100%; }
.likesbox { flex-direction: column; gap: auto; }
.livesdiv ul { max-height: auto; }

/* LAYOUT JUNK */
.innerbox { padding: 20px; }
.sidebar-content { padding: 15px 10px 15px 10px; }
.solo-sidebar { width: 100%; min-width: auto; padding: 0 5px; }

/* TABLES */ 
tr { display: grid; }
td { width: 100%; margin: 0 auto; }
.fiftywidthtd { width: 100%; }
.eightywidthtd { width: 100%; }

/* Character Profiles */
.CharacterInfo { flex-direction: column; }
.CharacterInfo > div { width: 100%; }

/* GALLERY STUFF */
.cardecordiv { display: block; }
.cardecordiv p { margin: 12px 0px; }
.cardecordiv div:first-child { height: 80px; width: 100%; object-fit: cover; }
.cardecordiv div:last-child  { height: 80px; width: 100%; object-fit: cover; }
.gallery-desc { padding: 8px 2px; }
.gallery-desc span { letter-spacing: 0px; font-family: 'PixelOperator'; }
.gallery-thumb img { height: 150px; max-width: 150px; }
.LightboxGallery img { width: 100px; object-fit: cover; }

/* SLIDESHOW */
.slideshow { height: auto; }
.slideshow:hover .galleryNav { bottom: 0; }
.prev, .next { opacity: 1; }
.captiondiv { bottom: 0; }
  
/* Misc. */
.shake { width: 100%; padding: 0px 5px; }
.sitemap { columns: 1; }
.blogentries .innerbox { flex-direction: column; }

/* SPLASH PAGE */
#jaybody { left: 0%; height: 250px; top: 50%; }  
#jaytail { left: 0%; height: 250px; top: 50%; }
.warningbox { margin: auto; top: 130px; }
#streetsign { left: 35px; top: -50px; }
#CreditAudioNote { max-width: initial; }
#CreditAudioNote p { font-size: 16px; line-height: 12px; margin: 8px 0; }

/* JAY SAY */
.jaysay { margin-left: auto; }
.jaysay img { margin-left: -30px; }
.bubblediv { margin-left: 180px; }

}
/* 700PX RESPONSIVE ENDS HERE, STOP PUTTING THINGS UNDER THE WRONG BRACKET */

/* ==== Candidates for deletion aka Old code that's getting phased out but I need to clean up the rest of the pages that still use it  ==== */
.blogtitle { margin-left: auto; text-align: left; line-height: 23px; } 
.eightywidthtd { width: 80%; }
.moodboard { display: flex; } /* Delete this once all the old versions of the moodboards have been updated */