@font-face { font-family: "MarioFont"; src: url("Mario-Party-Hudson-Font.ttf") format("truetype"); }

/* ===== Main Theme ===== */
:root {
  --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;

  /* Text*/
  --title-color: #FFFFFF;
  --text-color: #FFFFFF;
  --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: 'MarioFont', monospace;
  --secondary-font: 'MarioFont', monospace; 
  --text-effect: 2px 2px var(--shadow-color1), -2px -2px var(--shadow-color2);
  --border-effect: 2px 2px var(--border-color1), -2px -2px 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: #a90026; /* This webbed site can fit so many box shadows*/
  --shadow-color2: #251f94;
  --border-color1: #a90026;
  --border-color2: #251f94;

  /* Misc */
  --bg-img: url("/Images/MKBackgroundsmall.gif");
  --WikiBg-img: url("/Images/MKBackgroundsmall.gif");
  --Other-bg: url("/Images/MKBackgroundsmall.gif");
  --cursor-main: url(/Images/HotlineBlack.png), auto;
  --cursor-pointer: url(/Images/HotlineBlackSelcet.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 */
  --TitleText-img: url("/Images/TitleText.png");


  /* Homepage Slideshow */
  --slideshow-img1: url(/Images/Teaser1.png);
  --slideshow-title1: "ALPHA BUILD COMING OUT SOON!";
  --slideshow-caption1: "01/07/2025";

  --slideshow-img2: url(/Images/Snapshot2.png);
  --slideshow-title2: "City Is Under Construction For The Moment. Focusing On First Night.";
  --slideshow-caption2: "20/06/2025";

  --slideshow-img3: url(/Images/Snapshot3.png);
  --slideshow-title3: "Warehouse Level Reveal! The First Night Location Out Of 5!";
  --slideshow-caption3: "20/06/2025";

  --slideshow-img4: url(/Images/AbsoluteCinemaTeaser.png);
  --slideshow-title4: "Five Nights at Maro's 2nd Anniversary Update Coming Soon!";
  --slideshow-caption4: "15/04/2025";

  --slideshow-img5: url(/Images/Fnam3Wotfi.png);
  --slideshow-title5: "The WOTFI Project Is In The Works!";
  --slideshow-caption5: "10/02/2025";  
}

/* THEMES */

.default {
  --bg-color: #251f9499; /* Dark Purple from menus, back buttons, etc. */
  --bg-color-opacity1: #090033FC; /* From navbar & Autoplay */
  --bg-color-opacity2: #090033CF;
  --innerbox-color1: #000000; /* Main Boxes */
  --innerbox-color2: #000000;
  --accentbox-color: #E0D7F596;
  --accentbox-border: #4e34e338;

  /* Text*/
  --title-color: #FFFFFF;
  --text-color: #FFFFFF; /* 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: 'MarioFont', monospace;
  --secondary-font: 'MarioFont', monospace;

  /* Boxes */
  --shadow-color1: #a9002699; /* This webbed site can fit so many box shadows*/
  --shadow-color2: #251f9499;
  --border-color1: #a9002699;
  --border-color2: #251f9499;

  /* Misc */
  --bg-img: url(/Images/MKBackgroundsmall.gif);
  --wavey-gif: url("https://ne0nbandit.github.io/assets/img/decor/waveybg.gif");
  --rainy-bg: url(/Images/MKBackgroundsmall.gif);
  --cursor-main: url(/Images/HotlineBlack.png), auto;
  --cursor-pointer: url(/Images/HotlineBlackSelcet.png), auto;
  --selection-bg: #a90026;
  --selection-text: #251f94;
  --btn-hover: #372d67; /* Buttons use bg-color */
  --box-gradient1: linear-gradient(180deg, #a9002699, #251f9499); /* 25% Opacity */
  --box-gradient2: linear-gradient(#FF00FF40 0%, #00FFFF40 100%); /* 15% Opacity */
  --coolbox-gradient: linear-gradient(transparent 50%, #a9002699 0%, #251f9499 100%);
  --h4-gradient: -webkit-linear-gradient(#C400FF, #2500FF);
  --decorhue: hue-rotate(0deg);

  /* Images */
  --TitleText-img: url("/Images/TitleText.png");
}

/* IMPORTANTE */
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 */ /* you got that right...*/

*::-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(--primary-font); margin: 10px 0; font-size: 2.5em; letter-spacing: 1px;  }
h2 { font-family: var(--secondary-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; }

.titletextsize {height: 65%; width: 100%; object-fit: contain; }

/* ===== KOFI LINK===== */
.kofidiv {
  cursor: var(--cursor-pointer);
  border-radius: 200px;
  background: none;
  position: fixed;
  height: 105px;
  bottom: 5px;
  width: 135px;
  right: 50px;
  z-index: 1;
}
.kofibox button{
  background: linear-gradient(180deg, var(--bg-color-opacity1) 40%, var(--bg-color-opacity2));
  box-shadow: 2px 2px var(--border-color1), -2px -2px var(--border-color2);
  cursor: var(--cursor-pointer);
  color: var(--light-text);
  padding: 1px 4px 0px 4px; 
  border-radius: 40px;
  font-weight: bold;
  font-size: 18px;
  position: fixed;
  height: 200px;
  bottom: 5px;
  width: 200px;
  right: 5px;  
}

/* ===== AUTOPLAY ===== */
.buttondiv {
  cursor: var(--cursor-pointer);
  border-radius: 40px;
  background: none;
  position: fixed;
  height: 35px;
  bottom: 5px;
  width: 35px;
  left: 5px;
  z-index: 1;
}
  
.autoplayer button{
  background: linear-gradient(180deg, var(--bg-color-opacity1) 40%, var(--bg-color-opacity2));
  box-shadow: 2px 2px var(--border-color1), -2px -2px var(--border-color2);
  cursor: var(--cursor-pointer);
  color: var(--light-text);
  padding: 1px 4px 0px 4px; 
  border-radius: 40px;
  font-weight: bold;
  font-size: 18px;
  position: fixed;
  height: 35px;
  bottom: 5px;
  width: 35px;
  left: 5px;  
}

.autoplayer a {
  background: linear-gradient(180deg, var(--bg-color-opacity1) 40%, var(--bg-color-opacity2));
  box-shadow: 2px 2px var(--border-color1), -2px -2px var(--border-color2);
  color: var(--link-color);
  text-decoration: none;
  border-radius: 5px;
  padding: 2px 10px;  
  position: fixed;
  font-size: 14px;
  bottom: 5px;
  z-index: 1;
  left: 50px;  
  padding: 5px 10px;
}

#autoplaynote {
  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;
}
  
#autoplaynote p { line-height: 14px; filter: drop-shadow(1px 1px 0px var(--bg-color)); }


/* ===== SLIDESHOW GALLERY ===== */
#slideshowbox { filter: drop-shadow(3px 3px var(--border-color1)) drop-shadow(-3px -3px var(--border-color2)); }
#slideshowbox > .coolheader { height: auto; 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 img { content: url(/Images/ArrowL.png);}
.next img { content: url(/Images/ArrowR.png);}

.prev, .next {
  filter: drop-shadow(0px 0px 6px blue);
  transition-property: left,right,opacity;
  transition-duration: .3s;
  position: absolute;
  width: auto;
  opacity: 0;
  top: 50%;  
}

.next { right: 0%; }
.prev { left: 0%; }
.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 { color: var(--light-text); text-shadow: none; font-size: 18px; margin: 0 5px; }
.captiondiv p { color: var(--light-text); font-size: 14px; margin: 0 5px; font-family: var(--primary-font); }

/* ==== /home ==== */
#center-sidebar { width: 300%; max-width: 950px; }
#left-sidebar   { width: 100%; max-width: 430px; }
#right-sidebar  { width: 100%; max-width: 430px; }

.one { 
      overflow: auto;
      width: 1000px;
      height: 920px;
      
      border: 3px solid #ccc;
      border-color: #FFFFFF;
      
      color: #FFFFFF;
      background-color: black;
      text-shadow: 0px 0px 5px rgb(255,255,255);
      padding: 10px;
      margin: 15px 0;
      scrollbar-color: #FFFFFF transparent;
    }
.two { 
      overflow: auto;
      width: 800px;
      height: 400px;
      
      border: 3px solid #ccc;
      border-color: #FFFFFF;
      
      color: #FFFFFF;
      background-color: black;
      text-shadow: 0px 0px 5px rgb(255,255,255);
      padding: 10px;
      margin: 15px 0;
    }
.header { 
  overflow: auto;
  width: 1954px;
  height: 50px;
  
  border: 3px solid #ccc;
  border-color: #FFFFFF;
  
  color: #FFFFFF;
  background-color: black;
  text-shadow: 0px 0px 5px rgb(255,255,255);
  padding: -5px;
  margin: -5px;
    }
    .ublu:hover{
      transform: scale(1.075);
    } 
    .ublu{
      transition-duration: .2s;
    } 
    .ublu2:hover{
      transform: scale(1.05);
      filter: blur(1.3px)
    } 
    .ublu2{
      transition-duration: .2s;
    }
    
/* Sidebar Design */
.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: black; }
.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(--primary-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(--primary-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(--primary-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; }
.mainsection { background: var(--bg-color); margin: 0; color: var(--light-text); font-family: var(--primary-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; }

  /* Table */  
td { vertical-align: top; padding: 3px; }
.fiftywidthtd { width: 50%; }

  /* Text */
.commentlog { 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: 500px; margin: auto; width: 90%; }
.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: 15px; }
.cooltext { background: var(--coolbox-gradient); border-radius: 10px; }

/* Chroma aroma */
.chromatic {
  text-shadow: 4px -4px var(--shadow-color1), -4px 4px var(--shadow-color2);
  color: var(--title-color);
  font-size: 23px;
  font-weight: bolder;
  font-family: 'MarioFont';
}

.enter { display: flex; align-items: center; justify-content: center; padding-bottom: 5px; }
.enter a {
  color: white;
  text-decoration: none;
  font-family: var(--primary-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; }
#box1 { height: 600px; background: var(--wavey-gif); background-size: cover; }  
#box2 { background: var(--text-shadow); height: 100%; backdrop-filter: brightness(0.23) blur(5px) saturate(4.5); }

/* ===== Misc ===== */
.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(/*PUT ONE IN*/); }

/* === UPDATE LOG AREA === */
/* === 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: 2px; }
#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 */ /*frfr*/
#HCB_comment_box input.text { display: block; width: 97%; }
#HCB_comment_box #hcb_form .home-desc { display: none; }
/* the submit button */
#HCB_comment_box #hcb_form .btn, #HCB_comment_box #HCB_comment_form_box .btn {
  font-family: var(--primary-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: black; box-shadow: var(--text-effect); border-radius: 15px; padding: 1px 5px; margin: 5px auto 10px !important; width: 90%; max-width: 550px; }
#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: 'MarioFont'; 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); }