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

*/

/* Fonts */

@font-face {
  font-family: "neo";
  src: url("../fonts/Neometric-Medium.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "decoder";
  src: url("../fonts/Decoder Regular.woff2") format("woff2");
  font-display: swap;
}

/* Variables */

:root {
  --accent-color: #009933;
  --link-color: #ff66b3;
  --button-color: #8cc71f;
  --bg-color: #e6ffe6;
  --bg-color2: #caec8a;
  --text-color: #372558;
  --favorite-color: #CAEC8A;
  --pure-black-color: #000000;
  --pure-white-color: #ffffff;
  --sb-track-color: #000000;
  --sb-thumb-color: #48a570;
  --grid-color: #ffffff;
  --overlay-color: rgba(0, 0, 0, 0.6);
  --shadow-color: rgba(0, 0, 0, 0.7);
  --texture-light: url("../pics/32mottlelightbg.webp");
  --texture-mid: url("../pics/32mottlebg.webp");
  --texture-deep: url("../pics/32mottledarkbg.webp");
  --sb-size: 13px;
  --bouncy: cubic-bezier(.175, .885, .32, 1.275);
}


/* Keroppi Cursor */

@-webkit-keyframes cursor {
  0% { cursor: url("../keroppi cursors/keroppi cursor frame 1.png"), auto; }
  14.3% { cursor: url("../keroppi cursors/keroppi cursor frame 2.png"), auto; }
  28.6% { cursor: url("../keroppi cursors/keroppi cursor frame 3.png"), auto; }
  42.9% { cursor: url("../keroppi cursors/keroppi cursor frame 4.png"), auto; }
  57.2% { cursor: url("../keroppi cursors/keroppi cursor frame 5.png"), auto; }
  71.5% { cursor: url("../keroppi cursors/keroppi cursor frame 6.png"), auto; }
  85.8% { cursor: url("../keroppi cursors/keroppi cursor frame 7.png"), auto; }
  100% { cursor: url("../keroppi cursors/keroppi cursor frame 8.png"), auto; }
}

@keyframes cursor {
  0% { cursor: url("../keroppi cursors/keroppi cursor frame 1.png"), auto; }
  14.3% { cursor: url("../keroppi cursors/keroppi cursor frame 2.png"), auto; }
  28.6% { cursor: url("../keroppi cursors/keroppi cursor frame 3.png"), auto; }
  42.9% { cursor: url("../keroppi cursors/keroppi cursor frame 4.png"), auto; }
  57.2% { cursor: url("../keroppi cursors/keroppi cursor frame 5.png"), auto; }
  71.5% { cursor: url("../keroppi cursors/keroppi cursor frame 6.png"), auto; }
  85.8% { cursor: url("../keroppi cursors/keroppi cursor frame 7.png"), auto; }
  100% { cursor: url("../keroppi cursors/keroppi cursor frame 8.png"), auto; }
}

@-webkit-keyframes linkcursor {
  0% { cursor: url("../keroppi cursors/select frame 1.png"), pointer; }
  14.3% { cursor: url("../keroppi cursors/select frame 2.png"), pointer; }
  28.6% { cursor: url("../keroppi cursors/select frame 3.png"), pointer; }
  42.9% { cursor: url("../keroppi cursors/select frame 4.png"), pointer; }
  57.2% { cursor: url("../keroppi cursors/select frame 5.png"), pointer; }
  71.5% { cursor: url("../keroppi cursors/select frame 6.png"), pointer; }
  85.8% { cursor: url("../keroppi cursors/select frame 7.png"), pointer; }
  100% { cursor: url("../keroppi cursors/select frame 8.png"), pointer; }
}

@keyframes linkcursor {
  0% { cursor: url("../keroppi cursors/select frame 1.png"), pointer; }
  14.3% { cursor: url("../keroppi cursors/select frame 2.png"), pointer; }
  28.6% { cursor: url("../keroppi cursors/select frame 3.png"), pointer; }
  42.9% { cursor: url("../keroppi cursors/select frame 4.png"), pointer; }
  57.2% { cursor: url("../keroppi cursors/select frame 5.png"), pointer; }
  71.5% { cursor: url("../keroppi cursors/select frame 6.png"), pointer; }
  85.8% { cursor: url("../keroppi cursors/select frame 7.png"), pointer; }
  100% { cursor: url("../keroppi cursors/select frame 8.png"), pointer; }
}

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

#page,
#content,
main,
#sidebar {
  cursor: inherit;
}

a,
button,
summary,
label,
select,
textarea,
[role="button"],
[onclick],
.clickable,
.lightbox-image,
#lightbox-prev,
#lightbox-next,
#lightbox-close,
.youtube-overlay,
.playpause-track,
.prev-track,
.next-track,
.volume-icon,
.volume-icon img,
.audio-option,
.audio-option * {
}

/* Global / Base */

::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 10px;
  border: 3px solid var(--sb-track-color);
}

::-webkit-scrollbar-thumb:hover {
  background: #63c98d;
}

::-webkit-scrollbar-thumb:active {
  background: #ffffff;
}

@-moz-document url-prefix() {
  html {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    scrollbar-width: auto;
  }
  #lightbox {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    scrollbar-width: auto;
  }
}

* {
  color: var(--text-color);
  font-family: neo;
  font-weight: normal;
  font-display: swap;
}

::selection {
  background: var(--accent-color);
  color: var(--bg-color);
}

body {
  margin-top: 34px;
  opacity: 1;
  background-color: var(--bg-color2);
  background-image: linear-gradient(var(--grid-color) 3px, transparent 3px),
      linear-gradient(90deg, var(--grid-color) 3px, transparent 3px),
      var(--texture-light);
  background-size: 34px 34px,
      34px 34px,
      32px 32px;
  background-repeat: repeat;
}

p {
  line-height: 1.5em;
}

a {
  color: var(--link-color);
  border-radius: 1em;
  text-shadow: var(--bg-color) 0px 0px 0px;
  font-weight: bold;
  transition: color 400ms ease-out, 
  background-color 400ms ease-out, 
  box-shadow 400ms ease-out;
}

a:visited {
  color: var(none);
}

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

ul {
  list-style-type: "❤︎ ";
}

img {
  max-width: 100%;
  height: auto;
}

footer {
  text-align: center;
  font-size: 0.75em;
  margin: 1em auto;
  max-width: 960px;
}

.footy {
  padding-top: 15px;
}


/* Animations */

@keyframes keroRockLeft {
0%, 100% { transform: rotate(-4deg);}
  50% { transform: rotate(4deg);}
}

@keyframes keroRockRight {
0%, 100% { transform: rotate(4deg);}
  50% { transform: rotate(-4deg);}
}

@keyframes keroBounce {
0%, 100% { transform: translateY(0);}
  50% { transform: translateY(12px);}
}

@keyframes popIn {
from { transform: scale(.8); opacity: 0;}
  to { transform: scale(1); opacity: 1;}
}

@keyframes bounce {
50% { transform: translateY(-7px);}
}

@keyframes beebyFloat {
0% { transform: translateY(0);}
  50% { transform: translateY(-10px);}
  100% { transform: translateY(0);}
}

@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);}
}

/* Header */

header {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-color);
  background-image: var(--header-bg),
      var(--texture-mid);
  background-repeat: no-repeat,
      repeat;
  background-position: center,
      top left;
  background-size: 100%,
      auto;
  width: 100%;
  max-width: 917px;
  min-width: 917px;
  min-height: 371px;
  margin: 0 auto;
  padding: 0 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid var(--pure-black-color);
  border-radius: 2em;
  box-shadow: var(--button-color) 8px 8px 20px;
}

.header-kero {
  position: absolute;
  height: auto;
  pointer-events: auto;
  z-index: 1;
}

.kero-5 {
  width: 21%;
  left: 0%;
  top: -1.3%;
}

.kero-4 {
  width: 24.5%;
  left: 37.5%;
  top: -3.2%;
}

.kero-3 {
  width: 21%;
  right: -0.5%;
  top: -1.3%;
}

.kero-6 {
  width: 19%;
  left: 1.1%;
  bottom: -2%;
}

.kero-1 {
  width: 17%;
  left: 41.4%;
  bottom: -2%;
}

.kero-2 {
  width: 19%;
  right: -0.2%;
  bottom: -2%;
}

.kero-5, .kero-6 {
  animation: keroRockLeft 3s ease-in-out infinite;
}

.kero-3, .kero-2 {
  animation: keroRockRight 3s ease-in-out infinite;
}

.kero-4, .kero-1 {
  animation: keroBounce 3s ease-in-out infinite;
}

header h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  font-family: decoder;
  font-size: 5em;
  line-height: 1;
  text-align: center;
  color: var(--pure-white-color);
  text-shadow: var(--pure-black-color) 4px 4px .001em;
  transform: translateY(-6px);
  transition: transform 0.5s ease;
}

header h1:hover {
  transform: translateY(-6px) scale(1.15);
}


header h1 a {
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-decoration: none;
  text-shadow: inherit;
}

header h1 a:hover {
  color: inherit;
}

/* Navigation */

nav {
  margin-top: 24px;
  margin-bottom: 7px;
  font-weight: bold;
}

nav > ul {
  width: 100%;
  max-width: 1050px;
  min-width: 1050px;
  margin: auto;
  line-height: 3rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  list-style-type: none;
  padding-left: 0;
  justify-content: center;
  gap: 1px;
}

nav li {
  text-align: center;
}

nav li > a {
  color: var(--bg-color);
  background-color: var(--button-color);
  background-image: var(--texture-deep);
  padding: 8.5px 1.72em;
  box-shadow: var(--bg-color2) 0 0 6px;
  font-family: decoder;
  font-weight: normal;
  font-size: 1.3em;
  text-shadow: 1px 1px 0 var(--pure-black-color),
    2px 2px 0 var(--pure-black-color);
  text-decoration: none;
  border: 3px solid var(--pure-black-color);
  transition: filter 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

nav li > a:visited {
  color: var(none);
}

nav li > a:hover {
  background-color: var(--favorite-color);
  filter: brightness(1.15);
  box-shadow: var(--bg-color) 0 0 6px;
  color: rgba(255,255,255,.8);
}

/* Layout / Main Content */

main > h1, main > h2, main > h3 {
  background-color: var(--favorite-color);
  background-image: var(--texture-light);
  border-radius: .5em;
  padding: .35em .5em .25em;
  border: 3px solid var(--button-color);
  line-height: 1;
}

.img-left {
  float: left;
}

#content {
  display: flex;
  width: 100%;
  max-width: 1197px;
  margin: 0 auto;
  position: relative;
  min-width: 1197px;
}

h1 {
  font-size: 32px;
  line-height: 1;
}

h2 {
  font-size: 26px;
  line-height: 1;
}

main {
  background-color: var(--bg-color);
  background-image: var(--texture-mid);
  background-repeat: repeat;
  padding: 1em 2em;
  margin: 1em;
  margin-right: 33px;
  border: 3px solid var(--pure-black-color);
  box-shadow: var(--button-color) 8px 8px 20px;
  border-radius: 2em;
  font-size: 1.2em;
  padding-bottom: 19px;
  width: 955px;
  flex: 0 0 955px;
  box-sizing: border-box;
  margin-left: 33px;
}

.center {
  text-align: center;
}

.img-right {
  float: right;
}

#page {
  width: 100%;
  max-width: 1197px;
  min-width: 1197px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 120px;
}

main a:hover {
  color: #ff0080 !important;
  text-decoration: underline double;
}

/* Sidebar / Socials */

#bio > h2 {
  margin: 0;
  background-color: var(--favorite-color);
  background-image: var(--texture-light);
  border-radius: .6em;
  padding: .35em .5em .25em;
  border: 3px solid var(--button-color);
  line-height: 1;
}

.buttons2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 14px;
  padding: 0 15px;
}

.buttons2 a, .buttons2 img {
  display: block;
}

#sidebar {
  background-color: var(--bg-color);
  background-image: var(--texture-mid);
  background-repeat: repeat;
  width: 223px;
  margin: 1.1em;
  margin-right: 12px;
  margin-left: 33px;
  padding: 1.3em;
  padding-bottom: 18px;
  padding-top: 28px;
  border: 3px solid var(--pure-black-color);
  box-shadow: var(--button-color) 8px 8px 20px;
  border-radius: 2.2em;
  text-align: center;
  font-size: 1.1em;
  max-width: 223px;
  height: 471px;
}

#bio {
  width: 86%;
  margin: 1em 1em;
  background: var(--bg-color2);
  border: 3px solid var(--button-color);
  border-radius: 1em;
}

#bio p {
  margin: 1em;
}

main > h1, main > h2, main > h3, #bio {
  background-color: var(--favorite-color);
  background-image: var(--texture-light);
  border-radius: .5em;
  padding: .35em .5em .25em;
  border: 3px solid var(--button-color);
  line-height: 1;
}

.buttons2 img {
  border: 3px solid black;
  border-radius: 0.8em;
  box-sizing: border-box;
  transition: transform 0.3s ease,
    filter 0.3s ease;
}

.buttons2 img:hover {
  transform: scale(1.25);
  z-index: 69;
}

.sitebuttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.sitebuttons img {
  width: auto;
  height: auto;
  image-rendering: pixelated;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.sitebuttons img:hover {
  transform: scale(1.5);
  z-index: 69;
}


.my-site-button-block {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  margin: 0em 0 0.8em;
  vertical-align: top;
}

.my-site-button-row {
  display: flex;
  align-items: center;
  gap: 0.55em;
  width: max-content;
  max-width: 100%;
}

.site-button-code {
  display: block;
  box-sizing: border-box;
  width: 100%;
  width: 213px;
  height: calc(1.45em + var(--sb-size) + 4px);
  min-height: 0;
  margin: 1.25em 0 -1em;
  padding: 0.25em 0.35em 0;
  resize: none;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: pre;
  background-color: var(--bg-color2);
  background-image: var(--texture-mid);
  background-repeat: repeat;
  border: 2px solid var(--pure-black-color);
  border-radius: 0.8em;
  color: var(--text-color);
  font: 0.72em/1.25 monospace;
  scrollbar-color: var(--sb-thumb-color) rgba(0, 0, 0, 0.14);
  scrollbar-width: thin;
}

.site-button-code::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

.site-button-code::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.14);
}

.site-button-code::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border: 3px solid rgba(0, 0, 0, 0.14);
  border-radius: 10px;
}

.site-button-code::-webkit-scrollbar-thumb:hover {
  background: #63c98d;
}

.site-button-code::-webkit-scrollbar-thumb:active {
  background: var(--pure-white-color);
}

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

.site-button-code::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-image: url("../pics/scrollbar-arrow-left.svg");
}

.site-button-code::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-image: url("../pics/scrollbar-arrow-right.svg");
}

body.v2-home #sidebar {
  background-color: var(--bg-color) !important;
  background-image: var(--texture-mid) !important;
  background-repeat: repeat !important;
  width: 223px !important;
  height: 427px !important;
  margin: 1.1em 12px 1.1em 33px !important;
  padding: 28px 1.3em 18px !important;
  border: 3px solid var(--pure-black-color) !important;
  box-shadow: var(--button-color) 8px 8px 20px !important;
  border-radius: 2.2em !important;
  text-align: center !important;
  font-size: 1.1em !important;
  box-sizing: content-box !important;
}

body.v2-home .buttons2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  margin-top: 14px !important;
  padding: 0 15px !important;
}

body.v2-home .buttons2 a, body.v2-home .buttons2 img {
  display: block !important;
}

body.v2-home .buttons2 img {
  border: 3px solid black !important;
  border-radius: 0.8em !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
}

body.v2-home .buttons2 img:hover {
  transform: scale(1.25) !important;
  z-index: 69 !important;
}

body.v2-home #bio {
  width: 86% !important;
  margin: 0.7em auto !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  box-shadow: none !important;
}

body.v2-home #bio > h2 {
  margin: 0 !important;
  background-color: var(--favorite-color) !important;
  background-image: var(--texture-light) !important;
  border-radius: .6em !important;
  padding: .35em .5em .25em !important;
  border: 3px solid var(--button-color) !important;
  line-height: 1 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Buttons / Tooltips */

.button {
  display: flex;
  justify-content: center;
  font-size: 17px !important;
  width: 100%;
}

.button div {
  width: 33.3%;
}

.buttons {
  flex-flow: row wrap;
  gap: 2px;
}

.buttons img:hover {
  transform: scale(1.5);
  z-index: 69;
  transform: scale(2);
}

.buttons img {
  image-rendering: pixelated;
  display: block;
  width: 88px;
  height: 31px;
  transition: transform 0.3s ease,
          filter 0.3s ease;
}

.button-image {
  display: inline-block;
  text-decoration: none !important;
}

.button-image img {
  display: block;
}

main a:not(.button-image):hover {
  color: #ff0080 !important;
  text-decoration: underline double;
}

.sitebutton {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.sitebutton:hover {
  z-index: 99;
}

.sitebutton::after {
  content: attr(data-name);
  position: absolute;
  left: 50%;
  bottom: 160%;
  transform: translateX(-50%);
  width: 148px;
  padding: 6px;
  border-radius: 0.6em;
  border: 3px solid black;
  background-image: var(--texture-mid);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
  color: hotpink;
  font-family: neo;
  font-size: 19px;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 2;
}

.sitebutton::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 132%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 2;
}

.sitebutton:hover::before, .sitebutton:hover::after {
  opacity: 1;
}

.sitebutton.kerobubble::after {
  bottom: 110%;
}

.sitebutton.kerobubble::before {
  bottom: 97%;
}

.sitebutton.beebybubble::after {
  left: 73%;
  bottom: 95%;
}

.sitebutton.beebybubble::before {
  left: 73%;
  bottom: 89.9%;
}

body.v2-home main .buttons .button-image {
  display: inline-block !important;
  width: 88px !important;
  height: 31px !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  text-decoration: none !important;
}

body.v2-home main .buttons .button-image img {
  display: block !important;
  width: 88px !important;
  height: 31px !important;
  max-width: none !important;
  min-width: 88px !important;
  min-height: 31px !important;
  object-fit: fill !important;
  image-rendering: pixelated !important;
}

body.v2-home main .buttons .button-image img:hover {
  transform: scale(1.5) !important;
  z-index: 69 !important;
  position: relative !important;
}

/* Music Player */

#musicplayer {
  font-family: "Arial";
  background-color: var(--bg-color);
  background-image: var(--texture-mid);
  background-repeat: repeat;
  border: 3px solid black;
  border-radius: 2em;
  width: 201px;
  height: 269px;
  padding: 34px;
  text-align: center;
  position: relative;
  right: 26px;
  top: 75px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--button-color) 8px 8px 20px;
}

.songtitle, .track-info, .now-playing {
  padding: 10px;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.playpause-track, .prev-track, .next-track {
  color: #e74492;
  font-size: px !important;
}

.volume-icon {
  font-size: 22px !important;
  width: 110px;
}

.volume-icon img {
  transition: transform 0.2s ease;
  cursor: pointer;
}

.volume-icon img:hover {
  transform: scale(1.2);
}

.seeking {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.seek_slider,
.current-time,
.total-duration,
.volume-percent {
    transform: translateY(-5px);
}

.volume {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}

.now-playing, .track-info {
  width: calc(100% - 8px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  background-color: #caec8a;
  background-image: var(--texture-light);
  border: 3px solid #8cc71f;
  border-radius: 0.7em;
}

.now-playing {
  margin-top: 7px;
  font-weight: bold;
}

input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  cursor: -webkit-grab;
  cursor: grab;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: #ff66b3;
  cursor: -webkit-grab;
  cursor: grab;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -3px;
  background: #000000;
  border: none;
  border-radius: 6px;
  cursor: -webkit-grab;
  cursor: grab;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 6px;
  background: #ff66b3;
  cursor: grab;
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  background: #ff66b3;
  cursor: grab;
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #000000;
  border: none;
  border-radius: 6px;
  cursor: grab;
}

input[type="range"]:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

input[type="range"]:active::-webkit-slider-runnable-track, 
input[type="range"]:active::-webkit-slider-thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

input[type="range"]:active::-moz-range-track, input[type="range"]:active::-moz-range-progress, 
input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
}

input[type="range"].dragging,
input[type="range"].dragging::-webkit-slider-runnable-track,
input[type="range"].dragging::-webkit-slider-thumb {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}

input[type="range"].dragging::-moz-range-track,
input[type="range"].dragging::-moz-range-progress,
input[type="range"].dragging::-moz-range-thumb {
  cursor: grabbing !important;
}

.prev-track, .playpause-track, .next-track {
  transition: transform 0.3s ease;
  display: inline-block;
}

.prev-track:hover, .playpause-track:hover, .next-track:hover {
  transform: scale(1.25);
}

.volume_slider {
  width: 90px;         
  position: relative;
  left: -10px;          
  top: 0px;             
}

.volume-percent {
  min-width: 42px;
  text-align: left;
  transform: translate(-6px, -5px);
}

body.v2-subpage #sidebar, 
body.v2-subpage #musicplayer, 
body.v2-subpage #beeby, 
body.v2-subpage #beebyheader {
  display: none !important;
}

body.v2-home #sidebar, 
body.v2-home #musicplayer, 
body.v2-home #beeby, 
body.v2-home #beebyheader {
  display: block;
}

body.v2-home #musicplayer {
  font-family: "Arial" !important;
  background-color: var(--bg-color) !important;
  background-image: var(--texture-mid) !important;
  background-repeat: repeat !important;
  border: 3px solid black !important;
  border-radius: 2.2em !important;
  width: 201px !important;
  height: 269px !important;
  padding: 34px !important;
  text-align: center !important;
  position: relative !important;
  right: 26px !important;
  top: 75px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  box-shadow: var(--button-color) 8px 8px 20px !important;
  box-sizing: content-box !important;
}

body.v2-home #musicplayer .songtitle, 
body.v2-home #musicplayer .track-info, 
body.v2-home #musicplayer .now-playing {
  padding: 10px !important;
}

body.v2-home #musicplayer .controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
}

body.v2-home #musicplayer .button {
  display: flex !important;
  justify-content: center !important;
  font-size: 17px !important;
  width: 100% !important;
}

body.v2-home #musicplayer .button div {
  width: 33.3% !important;
}

body.v2-home #musicplayer .playpause-track, 
body.v2-home #musicplayer .prev-track, 
body.v2-home #musicplayer .next-track {
  color: #e74492 !important;
}

body.v2-home #musicplayer .volume-icon {
  font-size: 22px !important;
  width: 110px !important;
  transform: translateX(4px);
}

body.v2-home #musicplayer .volume-icon img {
  transition: transform 0.2s ease !important;
}

body.v2-home #musicplayer .volume-icon img:hover {
  transform: scale(1.2) !important;
}

body.v2-home #musicplayer .seeking {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
}

body.v2-home #musicplayer .volume {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
}

body.v2-home #musicplayer .volume-percent {
  min-width: 0px !important;
  text-align: left !important;
  transform: translate(-12px, 0px) !important;
}

body.v2-home #musicplayer .now-playing {
  margin-top: 7px !important;
  font-weight: bold !important;
}

body.v2-home #musicplayer .now-playing, body.v2-home #musicplayer .track-info {
  width: calc(100% - 8px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  background-color: #caec8a !important;
  border: 3px solid #8cc71f !important;
  border-radius: 0.7em !important;
}

body.v2-home #musicplayer input[type="range"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  background: transparent !important;
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

body.v2-home #musicplayer input[type="range"]:focus {
  outline: none !important;
}

body.v2-home #musicplayer input[type="range"]::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 6px !important;
  background: #ff66b3 !important;
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

body.v2-home #musicplayer input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  margin-top: -3px !important;
  background: #000000 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

body.v2-home #musicplayer input[type="range"]::-moz-range-track, 
body.v2-home #musicplayer input[type="range"]::-moz-range-progress {
  width: 100% !important;
  height: 6px !important;
  background: #ff66b3 !important;
  cursor: grab !important;
}

body.v2-home #musicplayer input[type="range"]::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  background: #000000 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: grab !important;
}

body.v2-home #musicplayer input[type="range"]:active,
body.v2-home #musicplayer input[type="range"]:active::-webkit-slider-runnable-track,
body.v2-home #musicplayer input[type="range"]:active::-webkit-slider-thumb,
body.v2-home #musicplayer input[type="range"]:active::-moz-range-track,
body.v2-home #musicplayer input[type="range"]:active::-moz-range-progress,
body.v2-home #musicplayer input[type="range"]:active::-moz-range-thumb {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}


body.v2-home #musicplayer input[type="range"].dragging,
body.v2-home #musicplayer input[type="range"].dragging::-webkit-slider-runnable-track,
body.v2-home #musicplayer input[type="range"].dragging::-webkit-slider-thumb {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}

body.v2-home #musicplayer input[type="range"].dragging::-moz-range-track,
body.v2-home #musicplayer input[type="range"].dragging::-moz-range-progress,
body.v2-home #musicplayer input[type="range"].dragging::-moz-range-thumb {
  cursor: grabbing !important;
}

/* Lightbox / Galleries */

.border-gallery {
  display: block;
  line-height: 0;
  border: 3px solid black;
  border-radius: 2em;
  overflow: hidden;
}

.border-gallery > .lightbox-image {
  display: block;
  width: 100%;
  box-sizing: border-box;
  transition: filter 0.15s ease;
}

.border-gallery > .lightbox-image:first-child:not(:last-child) {
  border-bottom: 3px solid black;
}

.border-gallery .border-row {
  display: flex;
}

.border-gallery .border-row + .border-row {
  border-top: 3px solid black;
}

.border-gallery.border-bottom-image > .border-row:last-of-type {
  border-bottom: 3px solid black;
}

.border-gallery .border-row .lightbox-image {
  flex: 1;
  width: 0;
  display: block;
  height: auto;
  box-sizing: border-box;
  transition: filter 0.15s ease;
}

.border-gallery .border-row .lightbox-image + .lightbox-image {
  border-left: 3px solid black;
}

.border-gallery .lightbox-image:hover {
  filter: brightness(60%);
}

#lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

#lightbox.loading::after {
  content: "Loading...";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: decoder;
  font-size: clamp(32px, 5vw, 64px);
  color: white;
  -webkit-text-stroke: min(2px, 0.045em) black;
  text-shadow: black
        min(4px, 0.055em)
        min(4px, 0.055em)
        0.001em;
  z-index: 1000002;
  pointer-events: none;
}

#lightbox.zoomed {
  align-items: flex-start;
  justify-content: flex-start;
}

#lightbox-img {
  max-width: 86.1vw;
  max-height: 99.4vh;
  width: auto;
  height: auto;
  margin: auto;
  border: 3px solid black;
  border-radius: 2em;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  image-rendering: auto;
  user-select: none;
  cursor: zoom-in;
  animation: popIn .3s ease;
}

#lightbox-img.zoomed {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

#lightbox-prev {
  left: 50px;
}

#lightbox-next {
  right: 50px;
}

#lightbox-prev:hover, 
#lightbox-next:hover {
  transform: translateY(-50%) scale(1.2);
  color: #caec8a;
}

#lightbox-close {
  position: fixed;
  top: 24px;
  right: 40px;
  background: none;
  border: none;
  padding: 0;
  font-family: decoder;
  font-size: clamp(40px, 6vw, 72px);
  color: white;
  -webkit-text-stroke: min(2px, 0.045em) black;
  text-shadow: black
        min(4px, 0.055em)
        min(4px, 0.055em)
        0.001em;
  transition: transform 0.3s ease;
  z-index: 1000000;
}

#lightbox-close:hover {
  transform: scale(1.2);
}

.selfie-row .lightbox-image {
  flex: 1;
  width: 0;
  height: auto;
  display: block;
}

#lightbox-prev, #lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 6vw;
  min-width: 40px;
  max-width: 72px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.3s ease;
  z-index: 1000000;
}

/* Entry Screen */

#splash {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  font-size: 1.2em;
}

.splash-box {
  width: 500px;
  padding: 20px;
  border: 3px solid black;
  border-radius: 1.5em;
  background-color: var(--bg-color);
  background-image: var(--texture-mid);
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

#enterButton {
  margin-top: 25px;
  padding: 8px 20px;
  background: var(--bg-color2);
  background-image: var(--texture-light);
  border: 3px solid var(--button-color);
  border-radius: 0.8em;
  cursor: pointer;
  font-size: 1.2em;
  transition: filter 0.2s ease;
  transition: transform 0.3s ease,
          filter 0.3s ease;
}

#enterButton:hover {
  filter: brightness(1.1);
  transform: scale(1.2);
}

#enableAudio {
  accent-color: var(--bg-color2);
}

.splash-note {
  clear: both;
  padding-top: 12px;
  padding-bottom: 6px;
  font-size: .8em;
  line-height: 1.4;
  text-align: center;
}

.audio-option {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.audio-option input {
  transform: scale(1.6);
  margin-right: 4px;
  accent-color: var(--bg-color2);
  cursor: inherit;
  transition: transform 0.2s ease;
}

.audio-option input:hover {
  transform: scale(1.9);
}

.audio-option input:active {
  transform: scale(1.75);
}

.audio-option span {
  font-weight: normal;
  transition: font-weight 0.3s;
  cursor: inherit;
}

.audio-option input:checked + span {
  text-shadow: 0.4px 0 0 currentColor,
  -0.4px 0 0 currentColor;
}

/* Beeby aka THE FLYING KITTY! */

.beeby-home-slot {
  position: relative;

  --beeby-left: -2px;
  --beeby-top: 34px;
}

.beeby-home-spacer {
  display: block;
  width: 276px;
  height: auto;
  visibility: hidden;
  pointer-events: none;
}

#beeby {
  position: absolute;
  width: 201px;
  height: 201px;
  left: -117px;
  top: 1360px;
  border: 3px dotted black;
  z-index: 9999;
}

#beeby.beeby-slot-anchored {

  left: calc(37px + var(--beeby-left, 0px));
  top: var(--beeby-top, 0px);
  transform: translate(
    var(--beeby-drag-x, 0px),
    var(--beeby-drag-y, 0px)
  );
}

#beebyheader {
  position: absolute;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#beeby,
#beebyheader,
#beebyheader img {
  cursor: none !important;
}

#beebyheader img {
  display: block;
  width: 201px;
  height: 201px;
  animation: beebyFloat 2.5s ease-in-out infinite;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

body.v2-subpage #sidebar, 
body.v2-subpage #beeby {
  display: none !important;
}

body.v2-home #sidebar, 
body.v2-home #beeby {
  display: block;
}

/* Keroppi Heads / Decorative Images */

.piccy {
  transition: transform 0.3s ease,
          filter 0.3s ease;
}

.piccy:hover {
  transform: rotate(5deg);
  filter: brightness(70%);
}

.piccy2 {
  display: inline-block;
}

.piccy2:hover {
  animation: bounce 1s ease-in-out infinite;
}

.sitebutton.piccybubble::after {
  bottom: 104%;
}

.sitebutton.piccybubble::before {
  bottom: 101.3%;
}

.sitebutton.piccybubble2::after {
  bottom: 103%;
}

.sitebutton.piccybubble2::before {
  bottom: 99.5%;
}

.keroppiheads {
  position: sticky;
  justify-content: flex-start;
  margin-top: -16px;
}

.keroppiheads2 {
  position: sticky;
  justify-content: flex-start;
  margin-top: -16px;
}

.keroppiheads2 img {
  transition: none;
  transform: translate(0, 0) rotate(0deg);
  backface-visibility: hidden;
  will-change: transform;
}

.keroppiheads2 img:hover {
  animation: shake 1s infinite;
}

.pp {
  margin: auto;
  min-width: 88px;
  max-width: 88px;
  width: 100%;
}

.pp img {
  box-sizing: border-box;
  max-width: 100%;
  transition: transform 1s;
}

.pp img:hover:not(.shake) {
  transform: rotate(360deg) scale(1);
  transition: transform 1s;
}

.keroppiheads2 .pp img,
.keroppiheads2 img {
  transition: none !important;
  transform: translate(0, 0) rotate(0deg);
  backface-visibility: hidden;
  will-change: transform;
}

.keroppiheads2 .pp img:hover,
.keroppiheads2 img:hover {
  animation: shake 1s infinite !important;
  transition: none !important;
}

.hover-dim {
  transition: filter .15s ease;
}

.hover-dim:hover {
  filter: brightness(60%);
}

.selfie-row {
  display: flex;
  gap: 4px;
  padding-bottom: 4px;
}

.youtube-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
}

.youtube-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.youtube-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.12);
  z-index: 5;
  transition: background .3s;
}

.youtube-overlay:hover {
  background: rgba(0,0,0,.5);
}

.youtube-play {
  width: 14.3%;
  max-width: 80px;
  min-width: 80px;
  transition: transform .3s;
  pointer-events: none;
}

.youtube-overlay:hover .youtube-play {
  transform: scale(1.12);
}

.youtube-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.v2-home .keroppiheads > img, 
body.v2-home .keroppiheads2 > img, 
body.v2-subpage .keroppiheads > img, 
body.v2-subpage .keroppiheads2 > img {
  display: block !important;
  width: 88px !important;
  max-width: 88px !important;
  height: auto !important;
}

body.v2-home .keroppiheads .pp, 
body.v2-home .keroppiheads2 .pp, 
body.v2-subpage .keroppiheads .pp, 
body.v2-subpage .keroppiheads2 .pp {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  margin: auto !important;
}

body.v2-home .keroppiheads, 
body.v2-home .keroppiheads2, 
body.v2-subpage .keroppiheads, 
body.v2-subpage .keroppiheads2 {
  display: block !important;
  flex: 0 0 88px !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  margin-top: -16px !important;
  z-index: 2 !important;
  position: relative !important;
  top: auto !important;
  align-self: flex-start !important;
}

/* Marching Keroppi */

#marching-kero img {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 160px;
  z-index: 99999;
  pointer-events: auto;
  will-change: transform;
  visibility: hidden;
}

#marching-kero-bubble {
  position: fixed;
  left: 0;
  bottom: 145px;
  width: 148px;
  padding: 6px;
  border-radius: 0.6em;
  border: 3px solid black;
  background-image: var(--texture-mid);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
  text-align: center;
  color: hotpink;
  font-family: neo;
  font-size: 19px;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  z-index: 100000;
  will-change: transform;
}

#marching-kero-bubble::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
}

#marching-kero:hover #marching-kero-bubble {
  opacity: 1;
}

/* SPA State / Home-Subpage Switching */

body.v2-subpage #content {
  display: block;
}

body.v2-subpage main {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.v2-hidden {
  display: none !important;
}

body.v2-home #content, body.v2-subpage #content {
  display: flex !important;
  width: 100% !important;
  max-width: 1197px !important;
  min-width: 1197px !important;
  margin: 0 auto !important;
  position: relative !important;
  align-items: flex-start !important;
}

body.v2-home #content > main {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 1em 33px 1em 1em !important;
}

body.v2-subpage #content > main {
  margin-left: auto;
  margin-right: auto;
  width: 955px !important;
  max-width: 955px !important;
  flex: 0 0 955px !important;
  box-sizing: border-box !important;
  margin: 1em 33px !important;
}

body.v2-loading main {
  opacity: 1 !important;
}

html[data-v2-initial-mode="subpage"] body:not(.v2-ready) #sidebar,
html[data-v2-initial-mode="subpage"] body:not(.v2-ready) #musicplayer,
html[data-v2-initial-mode="subpage"] body:not(.v2-ready) #beeby,
html[data-v2-initial-mode="subpage"] body:not(.v2-ready) #beebyheader {
  display: none !important;
}

html[data-v2-initial-mode="subpage"] body:not(.v2-ready) #content {
  display: flex !important;
  width: 100% !important;
  max-width: 1197px !important;
  min-width: 1197px !important;
  margin: 0 auto !important;
  position: relative !important;
  align-items: flex-start !important;
}

html[data-v2-initial-mode="subpage"] body:not(.v2-ready) #content > main {
  width: 955px !important;
  max-width: 955px !important;
  flex: 0 0 955px !important;
  box-sizing: border-box !important;
  margin: 1em 33px !important;
}

html[data-v2-initial-mode="home"] body:not(.v2-ready) #content > main {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 1em 33px 1em 1em !important;
}

#v2-main-placeholder.v2-initial-shell {
  min-height: min(720px, calc(100vh - 360px));
}

html[data-v2-page="Favourites"] main .img-left {
  float: none !important;
  display: block !important;
  clear: both !important;
  margin: 0 0 1em 0 !important;
}

html[data-v2-page="Favourites"] main .img-left img {
  display: block !important;
}

html[data-v2-page="Favourites"] main p {
  clear: both !important;
}

/* Mobile / Overrides */



/* Music Player Alignment */
body.v2-home #musicplayer {
  --music-inner-width: calc(100% - 8px);
  --music-readout-width: 36px;
}

body.v2-home #musicplayer .now-playing,
body.v2-home #musicplayer .track-info,
body.v2-home #musicplayer .seeking,
body.v2-home #musicplayer .button,
body.v2-home #musicplayer .volume {
  width: var(--music-inner-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.v2-home #musicplayer .seeking,
body.v2-home #musicplayer .volume {
  display: grid !important;
  grid-template-columns: var(--music-readout-width) minmax(0, 1fr) var(--music-readout-width) !important;
  align-items: center !important;
  column-gap: 5px !important;
}

body.v2-home #musicplayer .volume {
  transform: translateY(10px) !important;
}

body.v2-home #musicplayer .seek_slider,
body.v2-home #musicplayer .volume_slider {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: translateY(-5px) !important;
}

body.v2-home #musicplayer .current-time,
body.v2-home #musicplayer .total-duration,
body.v2-home #musicplayer .volume-percent,
body.v2-home #musicplayer .volume-spacer {
  width: var(--music-readout-width) !important;
  min-width: var(--music-readout-width) !important;
  max-width: var(--music-readout-width) !important;
  box-sizing: border-box !important;
}

body.v2-home #musicplayer .current-time {
  text-align: left !important;
}

body.v2-home #musicplayer .total-duration,
body.v2-home #musicplayer .volume-percent {
  text-align: right !important;
  transform: translateY(-5px) !important;
}

body.v2-home #musicplayer .button {
  display: grid !important;
  grid-template-columns: var(--music-readout-width) minmax(0, 1fr) var(--music-readout-width) !important;
  align-items: center !important;
  justify-items: center !important;
}

body.v2-home #musicplayer .button > div {
  width: 32px !important;
  height: 32px !important;
  transform: none !important;
}

body.v2-home #musicplayer .button > div > img,
body.v2-home #musicplayer .volume-icon > img {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
}

body.v2-home #musicplayer .volume-icon {
  justify-self: center !important;
  width: 32px !important;
  height: 32px !important;
  transform: translateY(-5px) !important;
}

body.v2-home #musicplayer .prev-track:hover,
body.v2-home #musicplayer .playpause-track:hover,
body.v2-home #musicplayer .next-track:hover {
  transform: scale(1.25) !important;
}

body.v2-home #musicplayer .volume-icon img:hover {
  transform: scale(1.2) !important;
}

@media only screen and (max-width: 800px) {
  iframe[src*="youtube"] {
    width: 100% !important;
    height: 160px !important;
  }
  #content {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    flex-wrap: wrap;
  }
  body {
    margin-top: -6px;
  }
  div#sidebar {
    margin-top: 0px;
    margin-bottom: 14px;
  }
  #sidebar {
    width: 100%;
    max-width: 224px;
    margin: 2.5em auto;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  header {
    min-width: 0;
    min-height: 0;
    aspect-ratio: 917 / 371;
    padding: 0;
    box-sizing: border-box;
  }
  .kero-4 {
    top: -8.5%;
  }
  header h1 {
    font-size: min(9vw, 4.5em);
    text-shadow: var(--pure-black-color)
    0.05em
    0.05em
    0.001em;
  }
  header > h1:hover {
    transform: translateY(-6px) scale(1.15);
  }
  main {
    margin: 0 .1em;
  }
  main > h1, main > h2, main > h3 {
    padding-top: .4em;
  }
  nav {
    margin: .3em;
  }
  nav > ul {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
  }
  #sidebar ul {
    margin: 0 1em;
    display: flex;
    flex-wrap: wrap;
    line-height: 2em;
  }
  #sidebar li {
    padding-left: 0;
    margin: .3em 1em;
  }
  #splash {
    display: none;
  }
  .splash-box {
    display: none;
  }
  .keroppiheads {
    display: none;
  }
  .keroppiheads2 {
    display: none;
  }
  .img-right {
    float: none;
    text-align: center;
  }
  #musicplayer {
    display: none;
  }
  #beeby {
    display: none;
  }
  #beebyheader, #beebyheader:hover {
    display: none;
  }
  footer {
    margin: 1em;
  }
  #marching-kero, 
  #marching-kero img, 
  #marching-kero-bubble {
    display: none !important;
  }
  #page {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding-bottom: 0;
  }
}

@media only screen and (max-width: 800px) {
  #lightbox-img {
    max-width: 97.3vw;
    max-height: 99.4vh;
  }
  #sidebar {
    padding: 50px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  header h1 {
    font-size: min(9vw, 4.5em);
    text-shadow: var(--pure-black-color)
          0.05em
          0.05em
          0.001em;
  }
  #bio {
    width: 100%;
  }
  main {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
    margin: 0 .1em;
  }
  #beebyheader {
    display: none;
  }
  #beebyheader:hover {
    display: none;
  }
}

@media only screen and (max-width: 800px) {
  #splash, 
  .splash-box, 
  #musicplayer, 
  #beeby, 
  #beebyheader {
    display: none !important;
  }
}

@media screen and (max-width: 800px) {
  body.v2-home #content, 
  body.v2-subpage #content {
    display: block !important;
    width: 96% !important;
    min-width: 0 !important;
    max-width: 96% !important;
  }
  body.v2-home #content > main, 
  body.v2-subpage #content > main {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 1em auto !important;
  }
  body.v2-home .keroppiheads, 
  body.v2-home .keroppiheads2, 
  body.v2-subpage .keroppiheads, 
  body.v2-subpage .keroppiheads2 {
    display: none !important;
  }
}

@media only screen and (max-width: 800px) {
  body.v2-home #page, 
  body.v2-subpage #page {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.v2-home #content, 
  body.v2-subpage #content {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  body.v2-home #sidebar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 224px !important;
    height: auto !important;
    margin: 0em auto 14px auto !important;
    padding-bottom: 40px !important;
  }
  body.v2-home #musicplayer, 
  body.v2-home #beeby, 
  body.v2-home #beebyheader, 
  body.v2-home #beebyheader:hover, 
  body.v2-subpage #musicplayer, 
  body.v2-subpage #beeby, 
  body.v2-subpage #beebyheader, 
  body.v2-subpage #beebyheader:hover {
    display: none !important;
  }
  body.v2-home #content > main, 
  body.v2-subpage #content > main {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    margin-top: 0em !important;
    margin-bottom: 0px !important;
  }
}


@media only screen and (max-width: 800px) {
  .beeby-home-slot {
    display: none;
  }
}

@media only screen and (max-width: 800px) {
  body.v2-home .buttons2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: clamp(4px, 2vw, 10px) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 14px 0 0 !important;
    padding: 0 15px !important;
  }

  body.v2-home .buttons2 a {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.v2-home .buttons2 img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body.v2-home .buttons2 a:last-child {
    grid-column: 1 / -1 !important;
    width: calc((100% - clamp(4px, 2vw, 10px)) / 2) !important;
    justify-self: center !important;
  }
}

@media only screen and (max-width: 800px) {
  body.v2-home #sidebar {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    margin: 0 auto 14px !important;
  }

  body.v2-home #bio {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.v2-home #bio > h2 {
    width: 93% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    border-radius: .5em !important;
    padding: .35em .5em .25em !important;
  }

  body.v2-home .buttons2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.v2-home .buttons2 a,
  body.v2-home .buttons2 img {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Dark mode */

html[data-theme="dark"] {
  color-scheme: dark;
  --accent-color: #54d67f;
  --link-color: #ff8bc7;
  --button-color: #000000;
  --bg-color: #18241d;
  --bg-color2: #243421;
  --text-color: #f1eafa;
  --favorite-color: #31482d;
  --pure-black-color: #000000;
  --pure-white-color: #f8fff9;
  --sb-track-color: #080b09;
  --sb-thumb-color: #54a974;
  --grid-color: #000000;
  --overlay-color: rgba(0, 0, 0, 0.78);
  --shadow-color: rgba(0, 0, 0, 0.88);

  --texture-light: url("../pics/32mottledark1bg.webp");
  --texture-mid: url("../pics/32mottledark2bg.webp");
  --texture-deep: url("../pics/32mottledark3bg.webp");
  
  --header-bg: url("../pics/32mottledark2bg.webp");
}

html[data-theme="dark"] nav a {
    color: #fff !important;
}

html[data-theme="dark"] body.v2-home #musicplayer .now-playing,
html[data-theme="dark"] body.v2-home #musicplayer .track-info {
    border: 3px solid #000000 !important;
}

html[data-theme="dark"] header {
    background-image: var(--header-bg);
    background-repeat: repeat;
    background-position: top left;
    background-size: auto;
}

html[data-theme="dark"] ::selection {
  color: var(--pure-black-color);
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus-visible {
  color: #ffd0e8;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] button {
  accent-color: var(--accent-color);
}

html[data-theme="dark"] #lightbox,
html[data-theme="dark"] #splash {
  background: var(--overlay-color);
}

html[data-theme="dark"] .splash-box,
html[data-theme="dark"] #musicplayer,
html[data-theme="dark"] .music-player {
  box-shadow: 0 0 20px var(--shadow-color);
}

html[data-theme="dark"] #lightbox-close {
  color: var(--bg-color2);
}

html[data-theme="dark"] .progress-area,
html[data-theme="dark"] .volume-area {
  background-color: var(--bg-color2) !important;
  border-color: var(--button-color) !important;
}

html[data-theme="dark"] .progress-bar,
html[data-theme="dark"] .volume-bar {
  background: var(--link-color) !important;
}

html[data-theme="dark"] .progress,
html[data-theme="dark"] .volume-progress {
  background: var(--pure-black-color) !important;
}


/* In-page entry prompt: mirrors the entry screen without changing page geometry. */
.entry-agreement-prompt {
  position: fixed;
  inset: 0;
  z-index: 2000000;
  display: none;
  place-items: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  font-size: 1.2em;
}
.entry-agreement-prompt.is-visible { display: grid; }
.entry-agreement-prompt__box {
  width: min(500px, calc(100vw - 40px));
  box-sizing: border-box;
  padding: 20px;
  border: 3px solid black;
  border-radius: 1.5em;
  background-color: var(--bg-color);
  background-image: var(--texture-mid);
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  animation: popIn 160ms ease-out;
}
.entry-agreement-prompt__box p {
  margin: 0;
  font-size: 1em;
}
.entry-agreement-prompt__emphasis {
  color: red;
  font-weight: bold;
}
.entry-agreement-prompt__button {
  margin-top: 25px;
  padding: 8px 20px;
  background: var(--bg-color2);
  background-image: var(--texture-light);
  border: 3px solid var(--button-color);
  border-radius: 0.8em;
  cursor: pointer;
  font-size: 1.2em;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.entry-agreement-prompt__button:hover {
  filter: brightness(1.1);
  transform: scale(1.2);
}


/* Centre entry overlays within the usable viewport beside the desktop DOM scrollbar. */
html.custom-scrollbars-enabled #splash,
html.custom-scrollbars-enabled .entry-agreement-prompt {
  right: var(--sb-size);
}

@media (hover: none), (pointer: coarse) {
  html.custom-scrollbars-enabled #splash,
  html.custom-scrollbars-enabled .entry-agreement-prompt {
    right: 0;
  }
}

/* DOM scrollbars: keep the animated Keroppi cursor above the controls. */
html.custom-scrollbars-enabled {
  scrollbar-width: none;
}

/* Preserve the page width that existed with the native scrollbar gutter.
   The DOM scrollbar overlays this reserved edge, so centered content does not jump right. */
html.custom-scrollbars-enabled body {
  box-sizing: border-box;
  padding-right: var(--sb-size);
}

html.custom-scrollbars-enabled::-webkit-scrollbar,
html.custom-scrollbars-enabled body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.custom-scrollbar {
  --custom-scrollbar-min-thumb: 34px;
  position: fixed;
  z-index: 100000;
  display: none;
  width: var(--sb-size);
  user-select: none;
  touch-action: none;
}

.custom-scrollbar.is-visible {
  display: block;
}

.custom-scrollbar--page {
  top: 0;
  right: 0;
  height: 100dvh;
}

.custom-scrollbar--page-x {
  left: 0;
  bottom: 0;
  width: 100vw;
  height: var(--sb-size);
}

html.page-horizontal-scrollbar-visible .custom-scrollbar--page {
  height: calc(100dvh - var(--sb-size));
}

html.page-horizontal-scrollbar-visible .custom-scrollbar--page-x {
  width: calc(100vw - var(--sb-size));
}

.custom-scrollbar__track {
  position: absolute;
  inset: 0;
  background: var(--sb-track-color);
}

.custom-scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: var(--custom-scrollbar-min-thumb);
  box-sizing: border-box;
  border: 3px solid var(--sb-track-color);
  border-radius: 10px;
  background: var(--sb-thumb-color);
}

.custom-scrollbar__thumb:hover {
  background: #63c98d;
}

.custom-scrollbar__thumb:active,
.custom-scrollbar.is-dragging .custom-scrollbar__thumb {
  background: #ffffff;
}

@media (pointer: coarse) {
  .custom-scrollbar {
    width: max(var(--sb-size), 18px);
  }

  /* Phones keep the browser's original page scrollbar instead of the fixed
     desktop DOM replacement. Nested custom scrollbars remain unchanged. */
  html.custom-scrollbars-enabled body {
    padding-right: 0;
  }

  .custom-scrollbar--page,
  .custom-scrollbar--page-x {
    display: none !important;
  }
}

/* Native scrollbars stay hidden behind the DOM replacements. */
html.custom-scrollbars-enabled,
html.custom-scrollbars-enabled body,
html.custom-scrollbars-enabled .custom-scroll-source {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html.custom-scrollbars-enabled::-webkit-scrollbar,
html.custom-scrollbars-enabled body::-webkit-scrollbar,
html.custom-scrollbars-enabled .custom-scroll-source::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


@media (pointer: coarse) {
  html.custom-scrollbars-enabled,
  html.custom-scrollbars-enabled body {
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
  }

  html.custom-scrollbars-enabled::-webkit-scrollbar,
  html.custom-scrollbars-enabled body::-webkit-scrollbar {
    display: initial !important;
    width: auto !important;
    height: auto !important;
  }
}

/* A DOM cursor remains animated at the viewport bounds. */
@media (pointer: fine) {
  html.dom-cursor-enabled,
  html.dom-cursor-enabled body,
  html.dom-cursor-enabled body * {
    cursor: none !important;
  }
}


.viewport-cursor-viewport {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

.viewport-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: none;
  width: 96px;
  height: 96px;
  pointer-events: none;
  user-select: none;
  transform: translate3d(
    calc(var(--cursor-x, -200px) - var(--cursor-hotspot-x, 0px)),
    calc(var(--cursor-y, -200px) - var(--cursor-hotspot-y, 0px)),
    0
  );
  image-rendering: auto;
  will-change: transform;
}

.viewport-cursor.is-visible { display: block; }
html.cursor-context-menu-open .viewport-cursor {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.viewport-cursor__set,
.viewport-cursor__frame {
  position: absolute;
  inset: 0;
  width: 96px;
  height: 96px;
}
.viewport-cursor__set { display: none; }
.viewport-cursor[data-kind="normal"] .viewport-cursor__set--normal,
.viewport-cursor[data-kind="link-select"] .viewport-cursor__set--link-select,
.viewport-cursor[data-kind="help-select"] .viewport-cursor__set--help-select,
.viewport-cursor[data-kind="unavailable"] .viewport-cursor__set--unavailable,
.viewport-cursor[data-kind="precision-select"] .viewport-cursor__set--precision-select,
.viewport-cursor[data-kind="horizontal-resize"] .viewport-cursor__set--horizontal-resize,
.viewport-cursor[data-kind="vertical-resize"] .viewport-cursor__set--vertical-resize,
.viewport-cursor[data-kind="move"] .viewport-cursor__set--move,
.viewport-cursor[data-kind="text-select"] .viewport-cursor__set--text-select { display: block; }
.viewport-cursor__frame {
  opacity: 0;
  object-fit: contain;
  image-rendering: auto;
}
.viewport-cursor__frame.is-active { opacity: 1; }

/* Horizontal DOM scrollbar for the site-button code field. */
.my-site-button-block {
  position: relative;
}

.site-button-code.custom-scroll-source {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-bottom: calc(var(--sb-size) + 4px);
}

.site-button-code.custom-scroll-source::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.custom-scrollbar--horizontal {
  height: var(--sb-size);
  width: auto;
}

.custom-scrollbar--horizontal .custom-scrollbar__thumb {
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  min-width: var(--custom-scrollbar-min-thumb);
  min-height: 0;
}

.custom-scrollbar--site-button {
  position: absolute;
  z-index: 20;
  border-radius: 0 0 0.7em 0.7em;
  overflow: hidden;
}

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

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


/* DOM scrollbar replacements for the lightbox's two-axis zoom viewport. */
#lightbox > .custom-scrollbar--lightbox-y,
#lightbox > .custom-scrollbar--lightbox-x {
  position: fixed;
  z-index: 1000003;
}
#lightbox > .custom-scrollbar--lightbox-y { top: 0; right: 0; left: auto !important; height: 100dvh !important; }
#lightbox > .custom-scrollbar--lightbox-x { left: 0; bottom: 0; top: auto !important; width: 100vw !important; }
#lightbox > .custom-scrollbar--lightbox-y .custom-scrollbar__track,
#lightbox > .custom-scrollbar--lightbox-x .custom-scrollbar__track { background: var(--sb-track-color); }
#lightbox > .custom-scrollbar--lightbox-y .custom-scrollbar__thumb,
#lightbox > .custom-scrollbar--lightbox-x .custom-scrollbar__thumb { border-color: var(--sb-track-color); background: var(--sb-thumb-color); }
#lightbox > .custom-scrollbar--lightbox-y .custom-scrollbar__thumb:hover,
#lightbox > .custom-scrollbar--lightbox-x .custom-scrollbar__thumb:hover { background: #63c98d; }
#lightbox > .custom-scrollbar--lightbox-y.is-dragging .custom-scrollbar__thumb,
#lightbox > .custom-scrollbar--lightbox-x.is-dragging .custom-scrollbar__thumb,
#lightbox > .custom-scrollbar--lightbox-y .custom-scrollbar__thumb:active,
#lightbox > .custom-scrollbar--lightbox-x .custom-scrollbar__thumb:active { background: #fff; }


/* Browser-independent blocked-drag preview. This preserves the familiar
   translucent dragged item without allowing a native cursor or badge. */
.unavailable-drag-preview {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2147483646 !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 0.52 !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
  transform-origin: top left !important;
}

/* Animated cursor ownership: prevent native grab/grabbing cursors from
   appearing over Beeby or the music-player sliders. */
#beeby,
#beeby *,
body.v2-home #beeby,
body.v2-home #beeby *,
#musicplayer input[type="range"],
#musicplayer input[type="range"]:active,
#musicplayer input[type="range"].dragging,
body.v2-home #musicplayer input[type="range"],
body.v2-home #musicplayer input[type="range"]:active,
body.v2-home #musicplayer input[type="range"].dragging {
  cursor: none !important;
}

#musicplayer input[type="range"]::-webkit-slider-runnable-track,
#musicplayer input[type="range"]::-webkit-slider-thumb,
#musicplayer input[type="range"]:active::-webkit-slider-runnable-track,
#musicplayer input[type="range"]:active::-webkit-slider-thumb,
#musicplayer input[type="range"].dragging::-webkit-slider-runnable-track,
#musicplayer input[type="range"].dragging::-webkit-slider-thumb,
body.v2-home #musicplayer input[type="range"]::-webkit-slider-runnable-track,
body.v2-home #musicplayer input[type="range"]::-webkit-slider-thumb,
body.v2-home #musicplayer input[type="range"]:active::-webkit-slider-runnable-track,
body.v2-home #musicplayer input[type="range"]:active::-webkit-slider-thumb,
body.v2-home #musicplayer input[type="range"].dragging::-webkit-slider-runnable-track,
body.v2-home #musicplayer input[type="range"].dragging::-webkit-slider-thumb {
  cursor: none !important;
}

#musicplayer input[type="range"]::-moz-range-track,
#musicplayer input[type="range"]::-moz-range-progress,
#musicplayer input[type="range"]::-moz-range-thumb,
#musicplayer input[type="range"]:active::-moz-range-track,
#musicplayer input[type="range"]:active::-moz-range-progress,
#musicplayer input[type="range"]:active::-moz-range-thumb,
#musicplayer input[type="range"].dragging::-moz-range-track,
#musicplayer input[type="range"].dragging::-moz-range-progress,
#musicplayer input[type="range"].dragging::-moz-range-thumb,
body.v2-home #musicplayer input[type="range"]::-moz-range-track,
body.v2-home #musicplayer input[type="range"]::-moz-range-progress,
body.v2-home #musicplayer input[type="range"]::-moz-range-thumb,
body.v2-home #musicplayer input[type="range"]:active::-moz-range-track,
body.v2-home #musicplayer input[type="range"]:active::-moz-range-progress,
body.v2-home #musicplayer input[type="range"]:active::-moz-range-thumb,
body.v2-home #musicplayer input[type="range"].dragging::-moz-range-track,
body.v2-home #musicplayer input[type="range"].dragging::-moz-range-progress,
body.v2-home #musicplayer input[type="range"].dragging::-moz-range-thumb {
  cursor: none !important;
}