@import url('https://fonts.googleapis.com/css2?family=Crafty+Girls&family=Instrument+Serif:ital@0;1&family=Libertinus+Math&family=Mea+Culpa&family=Momo+Signature&family=Ole&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');


@font-face {
  font-family: 'big curls';
  src: url('https://files.catbox.moe/ux9g4t.ttf') format('woff2');
}


@font-face {
  font-family: 'tenbitesch';
  src: url("https://files.catbox.moe/gi9id6.ttf") format('woff2');
}



html {
  cursor: url('https://www.rw-designer.com/cursor-view/209798.png'), auto;
}

a, button, [role="button"] {
  cursor: url('https://www.rw-designer.com/cursor-view/102085.png'), pointer !important;
}


/* shrine container */
.shrine-container {
  margin: 0 auto;
  position: relative;
  width: 600px;
  height:400px;
  margin-top: 80px;
  padding: 20px;
/*  background-image: url("https://files.catbox.moe/c576pl.jpeg");*/
  background-image: url("https://files.catbox.moe/0gqqbf.jpeg");
  background-repeat: repeat;
  background-size:100%;
  border: 13px solid transparent;
  border-image: url('https://i.postimg.cc/Pxgvs7hP/IMG_1915.png') 12 repeat;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  position: relative;
  
}

body {
    font-family: 'Libertinus Math', serif;
    color: rgb(77, 56, 32);

  background-image: url("https://files.catbox.moe/tw23f7.png");
    background-repeat: repeat;
    background-size: 35%;
}

.theshrineact .intro {
  border:1px solid #000;
  width:300px;
  padding:5px;
  background-image: url("https://files.catbox.moe/msojvd.jpg");
  background-size:30%;
  margin-bottom:0px;
  font-size:14px;
}

a {
  color: #e3fdff;
    text-shadow: 
  -1px -1px 0 #efacc2,
   1px -1px 0 #efacc2,
  -1px  1px 0 #efacc2,
   1px  1px 0 #efacc2;
  text-decoration: underline;
}

a:hover {
  font-style:italic;

  color: #68491b;
  text-shadow: 
  -1px -1px 0 #fde3eb,
   1px -1px 0 #fde3eb,
  -1px  1px 0 #fde3eb,
   1px  1px 0 #fde3eb;
}

/* h1 title */
.shrine-title {
  left:453px;
  top:30px;
  color: #f2fffa;
  position:absolute;
  text-shadow: 
  -1px -1px 0 #e29ab1,
   1px -1px 0 #ffbfd3,
  -1px  1px 0 #ffbfd3,
   1px  1px 0 #ffbfd3;
  font-size:50px;
  margin-bottom:0px;
  font-family: "big curls", serif;
}

.shrinerightimg {
  justify-content: right;
  position:absolute;
  top:130px;
  left:430px;
  height:220px;
  width:auto;
  margin-bottom:0px;
  font-family: "Instrument Serif", serif;
}

/* shrine images */
.shrine-img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
  border: 2px solid #b8e9e9; /* teal */
  box-shadow: #0000004f 2px 2px 4px;
}

/* floating biscuit */
.biscuit-todo {
  position: absolute;
  top: 360px;
  right: -200px;
  transform: translateX(-50%);
  width: 200px;
  background: #fff3e3;
  background-image: url("https://files.catbox.moe/z4dfs5.png");
  background-size: 130%;
  background-position: 50%;
  background-repeat: repeat;
  border: 13px solid transparent;
  border-radius: 5px;
  border-image: url('https://i.postimg.cc/3Jf1msMY/IMG_1872.png') 12 repeat;
  padding: 10px;
  text-align: center;
  animation: bob 3s ease-in-out infinite;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index:500;
}


.shrinepic {
  width:140px;
  height:auto;
}

.shrinestuff {
  text-align: left;
  color: #68491b;
  text-shadow: 
  -1px -1px 0 #fde3eb,
   1px -1px 0 #fde3eb,
  -1px  1px 0 #fde3eb,
   1px  1px 0 #fde3eb;
  font-size:20px;
  font-family: "Instrument Serif", serif;
  letter-spacing: 1.7px;
}

.shrinestuff p {
  margin:0;
  text-align:center;
}

.shrinestuff img {
  margin-bottom:0px;
}

.theshrineact {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 335px;
  height:380px;
  margin-top: 20px;
  padding-left: 10px;
  overflow-y:scroll;
  overflow-x:hidden;
}

.theshrineact {
  direction: rtl;
}

.theshrineact > * {
  direction: ltr;
}




/* biscuit label thingy */
.biscuit-top {
  background: #f7e3c3;
  padding: 6px;
  border-radius: 12px;
  font-size: 14px;
  color: #8b5e3c;
  margin-bottom: 8px;
}

/* to-do items */
.todo-items {
  list-style: none;
  padding: 0;
  margin-left: 15px;
  text-align:left;
  font-size: 12px;
  color: #6b4a2e;
}



.todo-items li::before {
  content: "";
  position: absolute;
  left: 5px;
  margin-bottom:10px;
  width: 15px;
  height: 15px;
  background-image: url("https://i.postimg.cc/3NLPtyW6/IMG-5081.gif");
  background-size: contain;
  background-repeat: no-repeat;
}

/* bobbing animation */
@keyframes bob {
  0%   { transform: translateX(-50%) translateY(0); }
  50%  { transform: translateX(-50%) translateY(-6px); }
  100% { transform: translateX(-50%) translateY(0); }
}


/* floating biscuit */
.deco1 {
  position: absolute;
  top: -65px;
  left: -75px;
  rotate: 50deg;
  width: 100px;
  padding: 10px;
  text-align: center;
  animation: blipblop 2s ease-in infinite;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  box-shadow:none;
  display: block;
}

.image-container{

      position: relative;
      max-width: 100%;
      display: inline-block;
}
    .speech-bubble {
      position: absolute;
      top: -30px; 
      left: 40px; 
      rotate:-5deg;
      background-color: #ffffff;
      color: #333333;
      padding: 6px 18px;
      font-family: 'tenbitesch', sans-serif;
      font-size: 16px;
      font-weight: bold;
      border-radius: 12px;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
      max-width: 200px;
      z-index: 10;
    }

    .speech-bubble::after {
      content: "";
      position: absolute;
      top: 50%;
      left: -15px; 
      transform: translateY(-50%);
      border-width: 8px;
      border-style: solid;
      border-color: transparent #ffffff transparent transparent; 
    }

.deco2 {
  position: absolute;
  top: -40px;
  right: -70px;
  rotate:15deg;
  width: 120px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  box-shadow:none;
}



/* blip blop animation */
@keyframes blipblop {
  0%   { rotate: -10deg; }
  50%   { rotate: 10deg; }
  100%  { rotate: -10deg; }
}




        ::-webkit-scrollbar {
        width: 14px;
        }

        ::-webkit-scrollbar:horizontal {
        height: 14px;
        }

        ::-webkit-scrollbar-corner {
        background: #eee;
        }

        ::-webkit-scrollbar-track:vertical {
        background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
        border-radius: 5px;
        }


        ::-webkit-scrollbar-thumb {
        border: 1.5px solid #888;
        border-radius: 5px;
        box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
        }

        ::-webkit-scrollbar-thumb:vertical {
        background: linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
        }

        ::-webkit-scrollbar-thumb:horizontal {
        background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
        }

        ::-webkit-scrollbar-button:horizontal:end:increment,
        ::-webkit-scrollbar-button:horizontal:start:decrement,
        ::-webkit-scrollbar-button:vertical:end:increment,
        ::-webkit-scrollbar-button:vertical:start:decrement {
        display: block;
        }

h3.poop {

  font-family: 'tenbitesch', cursive;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 30px;
  text-align: center;
  color: #cb88ab;
}

span.lightpurple a {
  color: rgb(244, 237, 255);
  text-shadow:
    -1px -1px 0 #cb88ab,
     1px -1px 0 #cb88ab,
    -1px  1px 0 #cb88ab,
     1px  1px 0 #cb88ab;
  text-decoration: none;
}