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

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



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

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

img#exit {
  cursor: url('https://www.rw-designer.com/cursor-view/209365.png'), auto !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/82m225.jpg");
  background-repeat: no-repeat;
  background-size:113%;
  border: 15px solid transparent;
  border-image: url('https://i.postimg.cc/y6jcmCq6/IMG_4895.png') 15 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/nnhp8a.jpeg");
    background-repeat: repeat;
    background-size: 22%;
}

.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:455px;
  top:200px;
  rotate:5deg;
  color: #f2fff4;
  position:absolute;
  text-shadow: 
  -1px -1px 0 #9abbe2,
   1px -1px 0 #bfe3ff,
  -1px  1px 0 #bfe3ff,
   1px  1px 0 #bfe3ff;
  font-size:50px;
  margin-bottom:0px;
  font-family: "Instrument Serif", serif;
  letter-spacing:3px;
}


.theshrineact {
  direction: rtl;
}

.theshrineact > * {
  direction: ltr;
}

.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:100px;
  height:auto;
}

.shrinestuff {
  text-align: left;
  font-size:12px;
  font-family: "Roboto Mono", sans-serif;
}

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

.shrinestuff a:hover {
  color: #484540;
  text-shadow: 
  -1px -1px 0 #e3f7fd,
   1px -1px 0 #e3f7fd,
  -1px  1px 0 #e3f7fd,
   1px  1px 0 #e3f7fd;
}

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

.shrinestuff img:hover {
  background-color: #ffffff9c;
}


.theshrineact {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 380px;
  height:370px;
  margin-top: 20px;
  margin-left: -10px;
  border: 1px solid #ffffffa0;
  border-radius: 3px;
  padding:0;
  padding-right:7px;
  overflow-y:scroll;
  overflow-x:hidden;
}


/* floating biscuit */
.deco1 {
  position: absolute;
  top: -65px;
  left: -75px;
  rotate: 50deg;
  width: 120px;
  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: -25px; 
      left: 40px; 
      background-color: #ffffff;
      color: #333333;
      padding: 6px 18px;
      font-family: 'gaegu', sans-serif;
      font-size: 12px;
      border-radius: 12px;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.46);
      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: -60px;
  right: -55px;
  width: 100px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  box-shadow:none;
  transform: scaleX(-1);
}



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




        ::-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: #889ecb;
}

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