/*
   Greetings traveller!
                  .-===+***####*++==-:.                          :-=+*#########*+=--:               
               :=*################%####*-.                   .-+*###%############%###+:.            
           .-+######*+=:..     ..-++*#####*=.             :+*%######*+-:.   .:-=*#######*-          
          =*####*-                    :*####+.          .=#%###*+:                 .=*####*:        
        :*####=                          :*###*-       +*####=                         +####*       
       =*###+                              .*###+:    +####+                             +####+:    
     :-###*.                                 *###*- .+###*-                               :####+.   
    :-#%#=                                    =###*-=###*:                                  *###+.  
   .=#%%+                                      =#######*                                     ####*  
   +*##*                                        +###%##                                       *###+ 
  :+###.                                        =####%=                                       -*### 
  +*##*                                         :#####:                                        =###-
  +###-                           =####%#=      .*#%%#          =*+-                           -###=
  *##*.                         =#####++###=     *####      .+####%%#*+                        .###+
 .+##*                         *#%#+.   .*##-    *%###     -###*-  .*##+                        *##*
  *##*                        =#%#:      +%#+    *####     %##=      *##+                       *##*
  +###:                      :###+       =##+   .*####.   .#%#       +##*                      .*##*
  *###+                      +##*               :#####=     -        =###                      :###+
  -*###                      *##+               -####%*              -###                      +###-
  .+###:                     -*+                +######.             -###                     =####.
   +*###                                       =####%##*              =#*                    +####+ 
   .=###*                                     *###*+####-                                   -####+  
   =+####*:                                 .*###+..:####=                                 +##%#+   
  .+#######+:                              =#%#*-.  ..+###=                              -#####+.   
  +###%==*####*.                      .+######*........=#####:                        :*##%%%#*+    
 :*###*. .:+####*=:               :=+######+:............-*####+:                  :+*#####*###*=   
 +###*:. ....=*###################%#%###+..................-+#######%##*****####%####%#*+.  +###*:  
.####*..........:=+**#############*+-..........................=*######%###########*+-.......*###*. 
+####+............. ................................................--===++===-:..............*###* 
*###*-...... .................................................................................-*%%#.
####*: ..        ..............................................................................=###-
####+. .            .......-=.....................................................         ....:*##+
%###+. ..            .....=*#=............................................+*=.....             .*##*
####*: ...          ......=##+............................................*##=...              .+###
####*:..........  ........=##+...........................................:*##+.....         .. .*###
+####= ...................=*#*...........................................-*##=................ :*###
.####*....................:*##-..........................................+###=............... .=###*
 *###*.....................+##+. ........................................*##*-................:*###-
 .*%##+....................-*##=........................................:###+.................*#### 
  =*###=....................-*##+.......................................*##*.................*####= 
  .+####=....................-*##=.....................................+###-................+#%#*+  
   :=#%##*:...................:###+:..................................*###*...............-*###*=   
    .:#####+:...................+###+...............................:*###+...............+#####+    
      .=##%###*+:.. ..............+###*+-........................:+*####=............:+*#####--     
        .+*###%###*=:...............-+####*+-.................-+#####*+...........:+######**:       
             -*#%%##%#####*+-.....     .-##########################*:   ...-+*###%####%#=.          
               :+***############**++==-::-=+*#####################*+++**#######%###***-             
                      .=*#######%#%#########%%################################*=:                   
                           :-+***+++++****####################***+*+++++**+=:      

*/

/* Guestbook Variables */

:root {
  --guestbook-width: 194px;
  --guestbook-height: 397px;
  --guestbook-mobile-height: calc(var(--guestbook-height) + (2 * var(--guestbook-padding)) + 6px);
  --guestbook-padding: 38px;
  --guestbook-gap: 0.55em;
  --guestbook-radius: 2.2em;
  --guestbook-inner-radius: 0.8em;
  --guestbook-picker-height: 148px;
  --guestbook-scrollbar-size: var(--sb-size);
  --guestbook-content-extension: 10px;
  --guestbook-scrollbar-overlap: 0px;
  --guestbook-bg: var(--bg-color);
  --guestbook-bg-soft: #202b23;
  --guestbook-bg-panel: var(--bg-color2);
  --guestbook-border: var(--pure-black-color);
  --guestbook-border-accent: var(--button-color);
  --guestbook-shadow: var(--button-color);
  --guestbook-heading: var(--accent-color);
  --guestbook-text: var(--text-color);
  --guestbook-muted: #6b5b84;
  --guestbook-accent: var(--link-color);
  --guestbook-error: #b00020;
  --guestbook-button: var(--button-color);
  --guestbook-button-text: var(--pure-black-color);
  --guestbook-picker-bg: var(--pure-black-color);
  --guestbook-picker-outline: var(--pure-white-color);
}

html[data-theme="dark"] {
  --guestbook-bg: var(--bg-color);
  --guestbook-bg-soft: #202b23;
  --guestbook-bg-panel: #293a27;
  --guestbook-border: #080b09;
  --guestbook-border-accent: var(--pure-black-color);
  --guestbook-shadow: var(--pure-black-color);
  --guestbook-heading: #63dc8b;
  --guestbook-text: #f1eafa;
  --guestbook-muted: #c2b5cf;
  --guestbook-accent: #ff8bc7;
  --guestbook-error: #ff9aa8;
  --guestbook-button: #477e2f;
  --guestbook-button-text: #f8fff9;
}

/* Visibility / Container */

body.v2-home #guestbook {
  display: flex !important;
}

body.v2-subpage #guestbook {
  display: none !important;
}

#guestbook.guestbook {
  position: relative !important;
  top: 95px !important;
  right: 42px !important;
  box-sizing: content-box !important;
  width: var(--guestbook-width) !important;
  height: var(--guestbook-height) !important;
  margin: 11px 15px 15px !important;
  padding: var(--guestbook-padding) !important;
  display: flex;
  flex-direction: column;
  gap: var(--guestbook-gap);
  overflow: hidden;
  background-color: var(--guestbook-bg);
  background-image: var(--texture-mid);
  background-repeat: repeat;
  border: 3px solid var(--guestbook-border);
  border-radius: var(--guestbook-radius);
  box-shadow: var(--guestbook-shadow) 8px 8px 20px;
  color: var(--guestbook-text);
  text-align: left;
}

#guestbook h2 {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 0.6em;
  background-color: var(--guestbook-bg-panel);
  background-image: var(--texture-light);
  border: 3px solid var(--guestbook-border-accent);
  color: var(--pure-black-color);
  font-size: 1.4em;
  line-height: 1;
  display: grid;
  place-items: center;
  text-align: center;
}

/* Scroll Area / Scrollbars */

#guestbook .guestbook-scroll {
  flex: 1 1 auto;
  min-height: 0;
  margin-left: calc(-1 * var(--guestbook-padding));
  margin-right: calc(-1 * (var(--guestbook-padding) + var(--guestbook-scrollbar-overlap)));
  padding-left: var(--guestbook-padding);
  padding-right: calc(var(--guestbook-padding) - var(--guestbook-content-extension) + var(--guestbook-scrollbar-overlap));
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  overscroll-behavior: contain none;
  scrollbar-color: var(--sb-thumb-color) rgba(0, 0, 0, 0.14);
  scrollbar-width: thin;
  touch-action: pan-y;
}

#guestbook .guestbook-scroll::-webkit-scrollbar,
#guestbook textarea::-webkit-scrollbar {
  width: var(--guestbook-scrollbar-size);
  height: var(--guestbook-scrollbar-size);
}

#guestbook .guestbook-scroll::-webkit-scrollbar-track,
#guestbook textarea::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.14);
}

#guestbook .guestbook-scroll::-webkit-scrollbar-thumb,
#guestbook textarea::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border: 3px solid rgba(0, 0, 0, 0.14);
  border-radius: 10px;
}

#guestbook .guestbook-scroll::-webkit-scrollbar-thumb:hover,
#guestbook textarea::-webkit-scrollbar-thumb:hover {
  background: #63c98d;
}

#guestbook .guestbook-scroll::-webkit-scrollbar-thumb:active,
#guestbook textarea::-webkit-scrollbar-thumb:active {
  background: var(--pure-white-color);
}

#guestbook .guestbook-scroll::-webkit-scrollbar-button:single-button,
#guestbook textarea::-webkit-scrollbar-button:single-button {
  display: block;
  width: var(--guestbook-scrollbar-size);
  height: var(--guestbook-scrollbar-size);
  background-color: rgba(0, 0, 0, 0.14);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 7px 5px;
}

#guestbook .guestbook-scroll::-webkit-scrollbar-button:single-button:vertical:decrement,
#guestbook textarea::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("../pics/scrollbar-arrow-left.svg");
}

#guestbook .guestbook-scroll::-webkit-scrollbar-button:single-button:vertical:increment,
#guestbook textarea::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("../pics/scrollbar-arrow-right.svg");
}

/* Form / Fields */

.guestbook-intro,
.guestbook-note,
.guestbook-empty {
  margin: 0;
  color: var(--guestbook-muted);
  font-size: 0.74em;
  line-height: 1.25;
}

.guestbook-form {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  box-sizing: border-box;
  width: 100%;
}

.guestbook label,
#guestbook .guestbook-comments-label,
.guestbook-replies-label {
  margin-top: 6px;
  padding: 0;
  color: var(--guestbook-text);
  font-size: 1em;
  text-decoration: underline;
  font-weight: normal;
  line-height: 1.05;
}

#guestbook .guestbook-comments-label {
  margin-top: 16px;
  text-align: left;
}

#guestbook .guestbook-comments-label + .guestbook-list {
  margin-top: 0.25em;
}

.guestbook input,
.guestbook textarea {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.35em;
  resize: none;
  background: var(--guestbook-bg-soft);
  border: 2px solid var(--guestbook-border);
  border-radius: var(--guestbook-inner-radius);
  color: var(--guestbook-text);
  font-size: 1em;
  cursor: text !important;
  animation: none !important;
}

.guestbook textarea {
  min-height: 58px;
  max-height: 58px;
  scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  scrollbar-width: thin;
}

#guestbookName {
  font-weight: bold;
}

#guestbookName:focus,
.guestbook textarea:focus {
  border-color: var(--guestbook-accent);
  outline: none;
}

/* Actions / Buttons */

#guestbook .guestbook-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-width: 0;
}

#guestbook .guestbook-actions > .guestbook-button,
#guestbook .guestbook-colour-wrap,
#guestbook .guestbook-emoji-wrap {
  flex: 0 0 auto;
  min-width: 0;
}

.guestbook-button {
  margin: 0;
  padding: 0.28em 0.48em;
  background: var(--guestbook-button);
  border: 2px solid var(--guestbook-border);
  border-radius: var(--guestbook-inner-radius);
  color: var(--guestbook-button-text);
  font-size: 0.8em;
  line-height: 1;
  white-space: nowrap;
  transition: filter 140ms ease;
}

.guestbook-button:hover,
.guestbook-button:focus-visible {
  filter: brightness(1.10);
  box-shadow: none;
  outline: none;
  transform: none;
}

.guestbook-button:active {
  box-shadow: none;
  transform: none;
}

.guestbook-button-soft {
  background: var(--guestbook-bg-soft);
}

.guestbook-button:disabled {
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed !important;
  transform: none;
}

#guestbookClearDraft {
  margin-left: 3px;
  background: #e60000;
  color: var(--pure-black-color);
}

#guestbook .guestbook-colour-wrap {
  margin-left: auto;
}

#guestbook .guestbook-emoji-wrap {
  margin-left: 3px;
}

.guestbook-colour-wrap,
.guestbook-emoji-wrap {
  position: static;
  display: inline-flex;
}

#guestbook .guestbook-colour-button,
#guestbookEmojiToggle {
  width: 2.15em;
  min-width: 2.15em;
  height: 2.15em;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #bbcfbb;
  line-height: 1;
  text-align: center;
  text-indent: 0;
}

.guestbook-colour-icon {
  position: relative;
  top: 0px;
}

.guestbook-emoji-icon {
  position: relative;
  top: 1px;
}

/* Entries / Replies / Status */

.guestbook-list {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--guestbook-gap);
  box-sizing: border-box;
  width: 100%;
  margin-top: 0.55em;
  padding: 0;
  overflow: visible;
}

.guestbook-entry,
.guestbook-reply {
  box-sizing: border-box;
  width: 100%;
  padding: 0.48em;
  background: var(--guestbook-bg-soft);
  border: 2px solid var(--guestbook-border);
  border-radius: var(--guestbook-inner-radius);
}

.guestbook-reply {
  background: #f4ffe3;
}

html[data-theme="dark"] .guestbook-reply {
  background: #243126;
}

.guestbook-entry-name,
.guestbook-reply-name {
  color: var(--guestbook-heading);
  font-size: 1em;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.guestbook-entry-date,
.guestbook-reply-date {
  display: block;
  margin-top: 0.1em;
  color: var(--pure-black-color);
  font-size: 0.8em;
  text-decoration: underline;
  line-height: 1.2;
}

html[data-theme="dark"] .guestbook-entry-date,
html[data-theme="dark"] .guestbook-reply-date {
  color: var(--guestbook-muted);
}

.guestbook-entry-message,
.guestbook-reply-message {
  margin: 0.38em 0;
  font-size: 1em;
  line-height: 1.28;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.guestbook-replies {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  box-sizing: border-box;
  width: calc(100% - 6px);
  margin: 0.45em 3px 0.15em;
  padding: 0;
  border: 0;
}

.guestbook-status {
  min-height: 1.1em;
  margin: 0.25em 0 0;
  color: var(--guestbook-heading);
  font-size: 0.72em;
}

.guestbook-error,
.guestbook-status.is-error {
  color: var(--guestbook-error) !important;
}

/* Emojis / Colour Picker */

.guestbook-emoji-menu,
.guestbook-colour-menu {
  position: absolute;
  top: calc(100% + 0.16em + 1px);
  right: 0;
  z-index: 20;
  box-sizing: border-box;
  width: 100%;
  height: var(--guestbook-picker-height);
  min-height: var(--guestbook-picker-height);
  max-height: var(--guestbook-picker-height);
  padding: 0.4em;
  overflow: hidden;
  background: var(--guestbook-picker-bg);
  border: 0;
  border-radius: var(--guestbook-inner-radius);
  box-shadow: none;
  outline: none;
}

.guestbook-colour-menu {
  z-index: 21;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.guestbook-emoji-menu {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 0.15em;
  overflow: visible;
  scrollbar-width: none;
}

.guestbook-emoji-menu::-webkit-scrollbar {
  display: none;
}

.guestbook-emoji-menu[hidden],
.guestbook-colour-menu[hidden] {
  display: none;
}

.guestbook-emoji-option,
.guestbook-colour-option {
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--guestbook-picker-bg);
  border: 1px solid transparent;
  border-radius: 0.35em;
  color: inherit;
  outline: none;
}

.guestbook-emoji-option {
  position: relative;
  overflow: visible;
  z-index: 0;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  font-size: 0.92em;
  line-height: 1;
  transform: translateX(-2px);
}

.guestbook-emoji-option::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: -4px;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 0.35em;
  pointer-events: none;
}

.guestbook-emoji-option:hover::after,
.guestbook-emoji-option:focus-visible::after {
  border-color: var(--guestbook-picker-outline);
}

.guestbook-colour-option {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 1px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  overflow: hidden;
  font: inherit;
  text-align: center;
}

.guestbook-colour-option:hover,
.guestbook-colour-option:focus-visible {
  box-shadow: inset 0 0 0 2px var(--guestbook-picker-outline);
}

.guestbook-colour-swatch {
  display: none;
}

.guestbook-colour-label {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  font-family: inherit;
  font-size: 0.8em;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
  -webkit-font-smoothing: auto;
}
.guestbook-colour-character,
.guestbook-colour-name {
  display: block;
  font: inherit;
  font-weight: 700;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
.guestbook-colour-name{
  margin-top:1px;
}

.guestbook-colour-option[data-colour-key="boring-black"] .guestbook-colour-label {
  color: var(--pure-white-color) !important;
  -webkit-text-fill-color: var(--pure-white-color) !important;
}

.guestbook-rainbow-swatch {
  background: linear-gradient(90deg, #e83e8c, #d98200, #4f8c2f, #2878b8, #7651a8);
}

.guestbook-rainbow-text {
  color: #7651a8;
  background-image: linear-gradient(90deg, #d93683, #b36b00, #238b45, #2878b8, #7651a8);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Back To Top */

.guestbook-back-to-top-wrap {
  width: 100%;
  margin-top: 0.7em;
  padding-bottom: 0.1em;
  text-align: center;
  font-size: 0.82em;
}

.guestbook-back-to-top {
  appearance: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 1em;
  color: var(--link-color);
  font: inherit;
  font-weight: bold;
  text-decoration: underline;
  text-shadow: var(--bg-color) 0 0 0;
  text-underline-offset: 0.12em;
  transition: color 400ms ease-out;
}

.guestbook-back-to-top:hover,
.guestbook-back-to-top:focus-visible {
  color: #ff0080;
  text-decoration: underline double;
  outline: none;
}

/* Cursor Integration */

#guestbook {
  cursor: url("../keroppi cursors/keroppi cursor frame 1.png"), auto;
  animation: cursor 1400ms steps(1, end) infinite;
}

#guestbook h2,
#guestbook .guestbook-scroll,
#guestbook .guestbook-intro,
#guestbook .guestbook-note,
#guestbook .guestbook-empty,
#guestbook .guestbook-form,
#guestbook .guestbook-form label,
#guestbook .guestbook-actions,
#guestbook .guestbook-list,
#guestbook .guestbook-entry,
#guestbook .guestbook-entry-name,
#guestbook .guestbook-entry-date,
#guestbook .guestbook-entry-message,
#guestbook .guestbook-replies,
#guestbook .guestbook-reply,
#guestbook .guestbook-reply-name,
#guestbook .guestbook-reply-date,
#guestbook .guestbook-reply-message,
#guestbook .guestbook-status {
  cursor: inherit;
}

.guestbook-colour-button,
.guestbook-colour-menu,
.guestbook-colour-option,
.guestbook-emoji-button,
.guestbook-emoji-menu,
.guestbook-emoji-option,
.guestbook-back-to-top {
  cursor: url("../keroppi cursors/select frame 1.png"), pointer;
  animation: linkcursor 1400ms steps(1, end) infinite;
}

/* Mobile */

@media only screen and (max-width: 800px) {
  body.v2-home #guestbook.guestbook {
    top: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
    height: var(--guestbook-mobile-height) !important;
    margin: 1em 0.1em 0 !important;
  }

  #guestbook .guestbook-scroll {
    margin-right: calc(-1 * var(--guestbook-padding));
    padding-right: var(--guestbook-padding);
    scrollbar-gutter: stable;
  }

  .guestbook-back-to-top-wrap {
    font-size: 0.9em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #guestbook *,
  #guestbook *::before,
  #guestbook *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 800px) {
  #guestbook .guestbook-scroll {
    overscroll-behavior: unset;
  }
}

/* The guestbook uses a DOM scrollbar so the animated cursor remains visible. */
#guestbook .guestbook-scroll.custom-scroll-source {
  scrollbar-width: none;
}

#guestbook .guestbook-scroll.custom-scroll-source::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#guestbook .custom-scrollbar--guestbook {
  position: absolute;
  right: 7px;
  z-index: 20;
  width: var(--guestbook-scrollbar-size);
  border-radius: 8px;
  overflow: hidden;
}

#guestbook .custom-scrollbar--guestbook .custom-scrollbar__track {
  background: rgba(0, 0, 0, 0.14);
}

#guestbook .custom-scrollbar--guestbook .custom-scrollbar__thumb {
  border-color: rgba(0, 0, 0, 0.14);
}

/* Restore the width previously occupied by the native thin scrollbar. */
#guestbook .guestbook-scroll.custom-scroll-source {
  padding-right: calc(var(--guestbook-padding) + var(--guestbook-scrollbar-overlap));
}

#guestbook .custom-scrollbar--guestbook {
  right: auto;
  width: var(--guestbook-content-extension);
}

#guestbook .custom-scrollbar--guestbook .custom-scrollbar__thumb {
  border-width: 2px;
}