@font-face { font-family: "vanilla"; src: url('https://file.garden/amE65MtnsiWQViGz/Vanilla%20Caramel.otf'); }
@font-face { font-family: "cheri"; src: url('https://file.garden/amE65MtnsiWQViGz/CHERI___.TTF'); }
@font-face { font-family: "care around"; src: url('https://file.garden/amE65MtnsiWQViGz/Care%20Around%20Regular.otf'); }
@font-face { font-family: "kawaii stitch"; src: url('https://file.garden/amE65MtnsiWQViGz/Kawaii%20Stitch.ttf'); }

:root {
  --bg-color: #fdf5e6;        
  --container-bg: #ffffff;    
  --text-color: #303030;      
  --accent-color: #ff21a6;    
  --border-color: #ffe4e1; 
}

body {
  background-color: var(--bg-color);
  background-image: url('https://i.pinimg.com/736x/63/b2/3f/63b23f52f91a274d2271fda773b29515.jpg');
  background-repeat: repeat;
  color: var(--text-color);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  
  cursor: url('https://64.media.tumblr.com/a390b084ee6ad799a9d72012f7599b0b/0d420767f58a1a69-8d/s75x75_c1/1612b5aa724f1f22b2e99601307a6aff8165d8b6.gif'), auto;
}

a, button, .btn, .emoji-trigger, .emoji-btn, input[type="submit"], input[type="button"], #hcb_submit {
  cursor: url('https://64.media.tumblr.com/a390b084ee6ad799a9d72012f7599b0b/0d420767f58a1a69-8d/s75x75_c1/1612b5aa724f1f22b2e99601307a6aff8165d8b6.gif'), pointer !important;
}

.back-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  background-color: #fffdcc;
  color: var(--accent-color);
  font-family: "cheri", system-ui;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 20px;
  border: 2px solid #ffffff;
  border-radius: 25px;
  box-shadow: 3px 0px 0px var(--border-color);
  z-index: 100;
  transition: all 0.1s ease-in-out;
}

.back-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 0px 0px var(--border-color);
  background-color: var(--accent-color);
  color: #ffffff;
}

/* THE MAIN BOX - SCROLL LOCK MOVED HERE! */
.guestbook-box {
  background-color: #fdf5e6;
  background-image: url('https://i.pinimg.com/736x/d5/a0/a2/d5a0a2519aa70874f9ee6eb89490bf26.jpg'); 
  border: 2px solid #ffffff;
  border-radius: 15px;
  padding: 25px;
  width: 450px; 
  max-width: 90vw;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
  box-sizing: border-box;
  
  max-height: 600px; /* Adjust this if you want the box taller/shorter */
  overflow-y: auto;
  overflow-x: hidden;
}

/* CUSTOM SCROLLBAR FOR THE GUESTBOOK BOX */
.guestbook-box::-webkit-scrollbar { width: 8px; }
.guestbook-box::-webkit-scrollbar-track { background: transparent; }
.guestbook-box::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 5px; }

h2 {
  color: #e4adff;
  text-align: center;
  font-family: 'kawaii stitch', cursive;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 15px;
  text-shadow: 0px 0px 0px #fff;
}

/* =========================================
   EMOJI MENU
   ========================================= */
.emoji-trigger-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-bottom: 5px; 
  z-index: 50;
}

.emoji-trigger { height: 22px; cursor: pointer; transition: transform 0.1s; }
.emoji-trigger:hover { transform: scale(1.1); }

.emoji-hover-text { opacity: 0; color: var(--accent-color); font-size: 12px; margin-left: 8px; transition: opacity 0.2s; pointer-events: none; }
.emoji-trigger-container:hover .emoji-hover-text { opacity: 1; }

.emoji-popup { 
  display: none; 
  position: absolute; 
  top: 30px; 
  left: 0; 
  background-color: #ffffff; 
  border: 2px solid #ffe4e1; 
  border-radius: 10px; 
  padding: 10px; 
  gap: 10px; 
  box-shadow: 2px 2px 10px rgba(0,0,0,0.05); 
  align-items: center;
  width: 145px; 
  flex-wrap: wrap; 
  z-index: 100;
}
.emoji-btn { cursor: pointer; transition: transform 0.1s; }
.emoji-btn:hover { transform: scale(1.2); }

/* =========================================
   HTML COMMENT BOX FIXES
   ========================================= */
#HCB_comment_box, .hcb-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.home-desc, .hcb-icon, .hcb-mod-msg, span.rss, .hcb-door-in { 
  display: none !important; 
}

/* BULLETPROOF HIDING FOR SETTINGS & CHECKBOX */
.cb-wrapper, 
.hcb-cb-line, 
.hcb-settings-link, 
.hcb-env-b, 
#HCB_comment_box input[type="checkbox"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

#hcb_form_name, #hcb_form_email, #hcb_form_website, #hcb_form_content {
  width: 100% !important;
  border: 2px solid #ffffff !important;
  border-radius: 10px !important;
  background-color: #ffe8f3 !important; 
  color: var(--text-color) !important;
  font-family: 'care around', sans-serif !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  margin-bottom: 10px !important;
  box-shadow: none !important;
  
  cursor: url('https://64.media.tumblr.com/a390b084ee6ad799a9d72012f7599b0b/0d420767f58a1a69-8d/s75x75_c1/1612b5aa724f1f22b2e99601307a6aff8165d8b6.gif'), auto !important;
}

#hcb_form_content { height: 70px !important; resize: none !important; }

#hcb_submit {
  background-color: #c7f5ff !important;
  color: var(--accent-color) !important;
  font-family: "care around", system-ui !important;
  font-size: 14px !important;
  border: 2px solid #ffffff !important;
  border-radius: 25px !important;
  padding: 8px 20px !important;
  box-shadow: 3px 0px 0px var(--border-color) !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: all 0.1s ease-in-out !important;
  text-shadow: none !important;
  background-image: none !important;
  margin-top: 5px !important;
}

#hcb_submit:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 0px 0px var(--border-color) !important;
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
}

#HCB_comment_box .btn, #HCB_comment_box button, #HCB_comment_box input[type="button"], #HCB_comment_box input[type="file"] {
  background-color: #ccf6ff !important;
  color: #ffbae1 !important;
  font-family: "cheri", system-ui !important;
  font-size: 13px !important;
  border: 2px solid #ffffff !important;
  border-radius: 25px !important;
  padding: 6px 15px !important;
  box-shadow: 2px 0px 0px var(--border-color) !important;
  cursor: pointer !important;
  transition: all 0.1s ease-in-out !important;
  text-shadow: none !important;
  background-image: none !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

#HCB_comment_box .btn:hover, #HCB_comment_box button:hover, #HCB_comment_box input[type="button"]:hover, #HCB_comment_box input[type="file"]:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 0px 0px var(--border-color) !important;
  background-color: #92e9fc !important;
  color: #ffffff !important;
}

.hcb-comment-tb {
  background-color: var(--container-bg) !important;
  border: 2px solid #ffffff !important;
  border-radius: 10px !important;
  padding: 12px !important;
  margin-top: 10px !important;
  font-family: 'vanilla', sans-serif !important;
  font-size: 15px !important;
}

.hcb-reply { 
  color: var(--accent-color) !important; 
  font-family: 'vanilla', sans-serif !important; 
  font-size: 13px !important; 
  text-decoration: none !important; 
}

#hcb_msg { 
  margin-top: 15px !important; 
}