@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: 'tenbitesch';
  src: url("https://files.catbox.moe/gi9id6.ttf") format('woff2');
}


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

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

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

/* 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-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);
  
}

body {
    font-family: 'Libertinus Math', serif;
    color: rgb(77, 56, 32);
    background-image: url("https://files.catbox.moe/c9lpby.jpeg");
    background-repeat: repeat;
    background-size: 30%;
}

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

.theshrineact .code {
  border:1px solid #000;
  width:300px;
  padding:5px;
  background-image: url("https://files.catbox.moe/z6dhdh.jpeg");
  background-size:40%;
  background-repeat: repeat;
  margin-bottom:0px;
  font-size:14px;
  box-shadow:#00000052 2px 2px 4px;
}

code {
  display: block;
  background: rgba(255, 255, 255, 0.899);
  border: 1px solid #f0e5eb;
  border-radius: 5px;
  padding: 8px 10px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  width:240px;
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  color: #68491b;
  box-shadow: #00000040 2px 2px 4px;
  white-space: pre-wrap;
}


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:420px;
  top:20px;
  color: #fffbf2;
  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: "Instrument Serif", serif;
}

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

/* floating biscuit */
.biscuit-todo {
  position: absolute;
  top: 360px;
  right: -200px;
  transform: translateX(-50%);
  width: 200px;
  background: #fff3e3;
  background-image: url("https://files.catbox.moe/i7t5fd.png");
  background-size: 130%;
  background-position: 50%;
  background-repeat: repeat;
  border: 13px solid transparent;
  border-radius: 5px;
  border-image: url('https://i.postimg.cc/C5q048f9/fo32-008-a.gif') 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 img {
  margin-bottom:0px;
}

.theshrineact {
  width: 338px;
  height:400px;
  margin-top: 20px;
  padding-left: 10px;
  overflow-y:scroll;
  overflow-x:hidden;
}

.theshrineact img {
  width:70px;
  height:70px;
  opacity: 1;

}

img.pixel {
  width:auto;
  height:15px;
}

/* biscuit label thingy */
.biscuit-top {
  background: #ffffff92;
  padding: 6px 0;
  border-radius: 6px;
  font-size: 17px;
  color: #8b5e3c;
  margin-bottom: 8px;
  font-family: 'Instrument Serif', serif;
  text-shadow: 
  -1px -1px 0 #dfbdc7,
   1px -1px 0 #fde3eb,
  -1px  1px 0 #fde3eb,
   1px  1px 0 #fde3eb;
}

/* 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: -75px;
  left: -90px;
  rotate: 50deg;
  width: 140px;
  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;
}

.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: -10deg; }
  50%   { rotate: 10deg; }
  100%  { rotate: -10deg; }
}


  #container {
      overflow: scroll;
      overflow-x: hidden;
      padding: 1px;
    }

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

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

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

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

    ::-webkit-scrollbar-track:horizontal {
      background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
    }

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

    ::-webkit-scrollbar-thumb:vertical {
      background: url("https://i.imgur.com/bfyvjnx.png") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
    }

    ::-webkit-scrollbar-thumb:horizontal {
      background: url("https://i.imgur.com/tqe4SxM.png") no-repeat 50%, 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;
    }

    ::-webkit-scrollbar-button:vertical {
      height: 17px;
    }

    ::-webkit-scrollbar-button:vertical:start:decrement {
      background: white;
      background-image: url("https://i.imgur.com/EFnEMEb.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    ::-webkit-scrollbar-button:vertical:start:increment {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:end:decrement {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:end:increment {
      background: white;
      background-image: url("https://i.imgur.com/xuIt6Lc.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    h3 {
      font-family: 'tenbitesch', cursive;
      font-weight: normal;
    }
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;
}

hr {
  border: none;
  height: 2px;
  width:290px;
  background: linear-gradient(
    90deg,
    #ffd6e8,
    #fbe7ff,
    #e3f0ff,
    #d4fff7,
    #fffbd1,
    #ffd6e8
  );
  background-size: 400% 100%;
  animation: pastelShimmer 10s linear infinite;
  border: 1px solid #c6c6c68f;
  margin: 0 auto;
}

@keyframes pastelShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 400% 0; }
}


/*iframe*/

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: #fff3e2;
  border: 13px solid transparent;
  border-image: url('https://i.postimg.cc/8cVQjRm6/Untitled177-6.png') 12 repeat;
  padding: 10px;
  width: 700px;
  height: 450px;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.popup-content iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

.close-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ffbfd3;
  border: 2px solid #e29ab1;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 18px;
  cursor: pointer;
  font-family: "Crafty Girls", cursive;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#popup-iframe {
  zoom: 0.7;
  display: none;

}


/* loading img */
.loader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader img {
  width: 70px;
  height: auto;
  animation: bounce 1s infinite ease-in-out;
}

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