body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor:
    url(""), auto !important;
  font-family: monospace;
  text-align: center;
  background-color: lightpink;
  background-image: url("grid paper bg.jpg");
  size: stretch;
}
.sticky-container {
  max-width: 270px;
  position: relative;
}

.sticky-outer {
  display: flex;
  padding-top: 92.5925926%;
  position: relative;

  width: 100%;
}

.sticky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Shadow behind the sticky note */
.sticky:before {
  box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.25);
  content: '';
  width: 90%;
  left: 5px;
  height: 83%;
  position: absolute;
  top: 30%;
}

/* The sticky note itself */
.sticky-container {
  width: min(270px, 25vw);
  position: fixed;
  left: 20px;
  top: 200px;
  transform: translateY(-50%);
  z-index: 1000;
}

.picture-of-day {
  position: fixed;
  top: 40px;
  right: 250px;
  z-index: 1000;
  box-sizing: border-box;
  width: 400px
  padding: 14px;
  background: #9aace0;
}

.picture-of-day h2 {
  margin: 0 0 10px;
}

.picture-of-day-frame {
  position: relative;
  height: 350px;
  width: 350px;
  overflow: hidden;
  border: 2px solid #5d77be;
  background: rgba(197, 196, 196, 0.65);
  box-sizing: border-box;
}

.picture-of-day-frame img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
   opacity: 0;
  transition: opacity 1s ease-in-out; 
}

.picture-of-day-frame img.picture-of-day-visible {
  opacity: 1;
}

.picture-of-day-description {
  margin: 10px 0 0;
  text-align: center;
}

.sticky-content {
  background: rgb(250, 249, 166);
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 10px;
  box-sizing: border-box;
  font-family: 'monospace', cursive;
  font-size: 1rem;

  clip-path: url(#stickyClip);
}

.grocery-items {
  font-size: 0.6em;
}


/* Add responsiveness */
@media screen and (min-width: 640px) {
  .sticky:before {
    height: 79%;
    width: 90%;
  }
  .sticky-content {
    font-size: 1.25rem;
  }
}

@media screen and (min-width: 768px) {
  .sticky:before {
    height: 75%;
    width: 90%;
  }
  .sticky-content {
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .sticky:before {
    height: 73%;
    width: 90%;
  }
  .sticky-content {
    font-size: 1.875rem;
  }

body :is(h1, h2, h3, h4, h5, h6, a, button, li, label, marquee, figcaption, blockquote):hover {
  font-style: italic;
}
h1 {
  font-size: 2.5rem;
  font-family: "helvetica";
  font-weight: bold;
  color: #d8d8d8;
  text-decoration: none;
}

.leftbox {
  position: absolute;
  left: 500px;
  top: 0;
  width: 50%;
  padding: 0px;
}
.broider {
    border-image:  url("data:image/png;base64,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") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}

.puddytroupe  {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAEHElEQVR4AaxZUZbcIAwz+9vN/Q86228KQoAcQ5h5W15ijCQbk5CkO/26ris/n9/5+w3Ncw6Z41v8Y96p/bJjS06RZTR91WSbuIi7q1JiUz89UqP76tTr9Uq780e4R/+n5vhJ0MCv4/MJPeb4aTVIbK/0KywQAEzXSJ8syUhdLBiGqPq7IEpDp7EkxxXl2J7v2+G2jiTdYYWLibHvy37tyt73vd7HvY9XFMwiM+dkV1TTK4PNschDJaJhCBw6eZjS9rZqjjk1vaRs8xdQI8T250EguGs8WysUc/rbGiaDxuJiiJs0QCGBCJz7jjCxUKvNB2CyCveTNHD6nbr3B9rJr+vbvccdOQb9iiJzjlcLQpD+IcsgtnrQMLbR2KYxKLCJV5Q8O/Mtvz8Z1pRbOHy/vkaILZq6J/U9Kmxzma7t0RLQ0LWlNpABV0B9jdS5oEnujai0hrVCC1L3Sn+3XR98g6/yLrxu++wa8X7/AYd+fsOv64/bo6hhxF+5385RqBVktxp7ao9BezKPnNRMYDDT6Q9TQV6v3TeaOL7Fr/YdVx/f5b8Or/vOndDoN9/nhBYafuuZv+KltHIkPkxWm3+PVqSdC1wvAq7EQtOCm4Wmuc0GoMFutxJiJ7eeyKFbT8HKNXYBKf2pHwvFBDAjlx8VeF1tIeRYaEIekXd3aqZXuVgoJoCpfDn966MAiyOXR3EBFwjTweg7lUDh70cewPQqJIXugnMsIkj3i8l1Fpjq9DMAndj2Uug+ODAB2OZ3RFifY+NA9VKoxStn96ah6mvlivt4VXlmNfJ3yRV6TqQK9U0Wqfi+aDu2LDlN36OHyHTgl3ReogM85JzR8mUawXCSW42Z6SMLxW9NqglmJXV0O6EglnZX9PClsdjCnDpPlLtv0EGKaLdHgfzacNpQ+T4xpAiDWQrlz+W9aBnZwRCGaTsrfRCa218IgzHXCMmfy0SYj12JoceuAB8cu6DUauSU64SejLfe8yUHAXYFsDaLtaZ4Q8SSTALRJzMJ4DATqx6hWGglyxkSFWwcj+RQTUf16lOBWoDDWLsQQK032aMdeqNHDhhrSa01Qm3wZFkQJX5UQAAwZdAO2aPm5rSnpjng7yrc4U/JV9zthY85V7olpmr67KZcAfWn4j0v6Qv/sPoDbf+l6ST0sT53RYHsp1MaOWCG3o8GvHWCPgAMBZ4+uKImDUVn2dP8JxmSiu7mKp1vXPumKqq+mTz1nrjneR4zlt1OG+jUlOzKYHpl4A731IOBFgbDpSG9mxgx1MDfGSZgV1TTKwN3xBc+tDBO2Ab72cF8EAZ9S+rsDh+F1t+F7r/7VKyeE+dvSeH3oyv/kd+Lakz7TYq/MVE/81zb/7tSTc3TV9EK5ZVYrybLQ8OwzF66XaxKVaO4pGnugvwHAAD//xfU56MAAAAGSURBVAMAWyQjqPOOUUoAAAAASUVORK5CYII=") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;

  }
  

  
.main {
  border-radius: 0px;
  background: #375ec9a2;
  width: 520px;
  padding: 15px;
  margin: 20px auto;
}
 
.quotebox {
  flexbox: 1;
  border-radius: 15px;
  background: #b8bdcc7c;
  width: 300px;
  padding: 5px;
  margin: 20px auto;
}

.minimain {
  border-radius: 10px;
  background: #b8bdcc7c;
  width: auto;
  height: 120px;
  padding: 1px;
  margin: 2px auto;
  box-sizing: border-box;
  overflow-y: scroll;
}

.minimain::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.minimain::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0;
}

.minimain::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  border: 6px solid #ccf794;
}

.minimain::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
.title-bar {
    background: rgb(90, 7, 7);
    }

    .player {
    width: fit-content;
    border: black solid 1px;
    border-width: 1px 0px 0px 1px;
    margin-left:10px;
    margin-top:-40px;
    }

    .controlimg:hover {
    cursor: help;
    }

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

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

    input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 21px;
    width: 11px;
    background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
    transform: translateY(-8px);
    box-shadow: none;
    border: none;
    }

    input[type="range"].has-box-indicator::-webkit-slider-thumb {
    background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
    transform: translateY(-10px);
    }

    input[type="range"]::-moz-range-thumb {
    height: 21px;
    width: 11px;
    border: 0;
    border-radius: 0;
    background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
    transform: translateY(2px);
    }

    input[type="range"]::-moz-range-thumb {
    background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
    border: 0;
    border-radius: 0;
    height: 21px;
    transform: translateY(2px);
    width: 11px;
    }

    input[type="range"].has-box-indicator::-moz-range-thumb {
    background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
    transform: translateY(0px);
    }

    input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    box-sizing: border-box;
    background: black;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
    }

    input[type="range"]::-moz-range-track {
    width: 100%;
    height: 2px;
    box-sizing: border-box;
    background: black;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
    }

    button,
    input,
    label,
    option,
    select,
    table,
    textarea,
    ul.tree-view {
    -webkit-font-smoothing: none;
    font-family: "Pixelated MS Sans Serif", Arial;
    font-size: 11px
    }

.jukebox-image-button {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
   box-sizing: border-box;
}

#jukebox {
   transition: transform 0.2s ease;
}

#jukebox:hover {
   transform: scale(1);
   z-index: 2;
   rotate: -5deg;
}

.jukebox-controls {
  position: relative;
  z-index: 1;
}

.welcome-gif {
  max-width: 100%;
}

#bug-hover-indicator {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 3;
  transform: translateX(-50%);
}

#bug-hover {
  display: block;
  width: 200px; /* change this number */
  height: auto;
}

#bug-hover.is-hovering {
  content: url("bug2.2.png");
}

#bug-hover-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + -50px);
  transform: translateX(-50%);
  padding: 5px 8px;
  border-radius: 15px;
  background: #000;
  color: #fff;
  white-space: nowrap;
}

#bug-hover-label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #000;
  border-bottom: 0;
  margin-left: -10px;
  margin-bottom: -10px;
}

.gif-controls aside {
  font-size: 12px;
  color: #800000;
}

.links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.links a,
.links a:visited {
  color: rgb(152, 228, 152);
  background-color: rgb(0, 0, 0);
  border-radius: 5px;
  padding: 5px 5px;
}
.badge-wrap {
  overflow: hidden;
  width: min(100%, 750px);
  margin: 20px auto;
  border: 2px solid rgba(255,255,255,0.35);
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 0;
}

.badge-track {
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
  min-width: max-content;
  animation: badge-scroll 18s linear infinite;
}
                                    .border8 {
                                        border-width: 7px;
                                        border-style: solid;
                                        border-image: url("https://files.catbox.moe/n55045.png") 7 fill round;
                                    }
                          
                               
                          
                      


.badge-track img {
  height: 31px;
  width: 88px;
  image-rendering: pixelated;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
}

@keyframes badge-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}