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


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



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

@font-face {
  font-family: 'basiic';
  src: url("https://file.garden/aniZg5cZ1wfJ2PC7/fonts/basiic.ttf") format('woff2');
}

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

/* html, body, * {
  cursor: url('https://cdn.cursors-4u.net/previews/delcious-icecream-359ca333-32.webp') 32 32, auto !important;
} */


/* ——— PAGE VIBE ——— */


img.pixel {
    width: auto;
    height: 13px;
    position:relative;
    top:3px;
}

body {
  background: url('https://i.postimg.cc/bY6LRh2S/Lg7HG7i.gif');
  background-repeat:repeat;
  background-attachment: fixed;
  font-family: 'rainyhearts', sans-serif;
  color: #a64c6e;
  padding: 30px;
  max-width: 700px;
  margin: auto;
  line-height: 1.6;
}

h2.travel-title {
    position: relative;
    margin:0;
    margin-top:-60px;
    top: 24px;
    left: 190px;

    font-family: 'big curls', cursive;
    font-size: 50px;
    z-index: 300;

    animation: hover 9s infinite;

    filter: drop-shadow(0px 0px 1px #FDA3C5)
            drop-shadow(0px 0px 1px #E097B3)
            drop-shadow(0px 0px 0px #E097B3)
            drop-shadow(0px 0px 0px #00000066);

    background: url('https://i.postimg.cc/zfb2zZV9/1019634fg66nvlut2.gif');
    background-size: 18%;
    background-repeat: repeat;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.site-bg {
  position: relative;
  width: 500px;
  height: 440px;
  margin:0 auto;
  border-radius: 5px;
  border-width: 16px; 
  border-style: solid; 
  border-image: url("https://toyhamu.nekoweb.org/myroom/borders/milk%20strawberry%20filling.png") 13 fill round;
  background-clip: padding-box;
  /*
  overflow: hidden;
  box-shadow: 0 6px 0 #e39ab3;
  background-color: #fff9fc;*/
}

.cook-container {
  background: url("https://i.postimg.cc/Jnmpsb03/tumblr_ef96bdee5b50c7928d9279f6099e992e_d8f3bdc9_75.webp");
  border: 3px solid #ffbcd4;
  padding: 20px;
  width: 500px;
  margin: auto;
  font-family: 'rainyhearts';
  color: #a64c6e;
}

.cook-header {
  background: url('https://goooby.neocities.org/graphics%20made%20by%20me/pattern_0_6934321147cbfd4286171b73256fb9b1.png');
  border: 10px solid #ffbcd300;
  border-image: url("https://i.postimg.cc/RhJCpKqH/testborder3.png") round 12;
  padding: 10px;
  text-align: center;
  position: relative;
}

.banner {
    width:99%;
  border: 3px ridge #ffe6f0;
  box-shadow: 1px 1px 2px rgba(128, 128, 128, 0.32);
}

.title {
  font-family: 'spirit';
  font-size: 32px;
  color: #ffe7f0;
  text-shadow: 1px 1px #ffffff; /* or dark red/pink? hmmhmh ill come back to this later :P dudududududuuruururorroirodor ddoriiii  */
  position:relative;
  text-align:left;
  margin:0;
  margin-top: -60px;
  bottom:275px;
  left:20px;
}

h2.headercookinfo {
    text-align: center;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
    padding:3px;
    font-family:'Spirit', cursive;
    background: linear-gradient(to right, rgb(255, 236, 236), rgb(252, 255, 213), rgb(216, 255, 214), rgb(219, 255, 255), rgb(221, 217, 255), rgb(243, 212, 255), rgb(255, 223, 250));
    border: 2px white outset;
    font-size: 17px;
    border-radius: .67em .67em 0 0;
    margin-bottom:0px;
    margin-left:0px;
    width:80%;
}

.cook-info p {
  font-family: 'times new roman';
  font-size: 12px;
  color: #a64c6e;
  text-align: left;
  border: 1px solid gray;
  margin:0;
  width:160px;
  background:white;
  padding:4px;
}

.subtitle p {
  width:450px;
  margin: 0 auto;
  font-family: 'basiic';
  text-align:center;
  color: #a64c6e;
  font-size: 24px;
  background: #ffe6f0;
  border: 2px ridge #ffe1ed;
  padding: 2px; 
}

.notcuteanymore {
    padding:3px;
    margin-top:5px;
    background: url("https://goooby.neocities.org/graphics%20made%20by%20me/pattern_0_56a2af3d985ec7f13eb81e9e2745db4c%20(1).png");
    border:10px solid gray;
    border-image: url('https://i.postimg.cc/RhJCpKqH/testborder3.png') round 12;
}

.entry {
  background: url('https://i.postimg.cc/B6LnQ3s0/z6dhdh.jpg');
  background-size:50%;
  border: 2px ridge #d7d7d7;
  padding: 10px;
  margin:0;
  margin: 10px;
  margin-top:0;
  font-family:"libertinus math";
  font-size:14px;
  height:170px;
  overflow-y: scroll;
}
.entry h3 {
  margin: 0;
  font-family: 'gaegu', cursive;
  font-size: 17px;
  color: #a64c6e;
}

.inquiry {
    font-style: italic;
    font-weight:bold;
    font-family: 'times new roman';
    color:rgb(171, 185, 127);

}



.deco3 {
  position: absolute;
  top: 600px;
  right: -90px;
  rotate:-2deg;
  width: 130px;
  height:auto;
  padding: 10px;
  text-align: center;
  filter: brightness(1.1) contrast(1.05); 
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  box-shadow:none;
  z-index:500;
  transition: transform 0.18s ease;
}

.deco3:hover {
  transform:scale(1.03) rotate(-1.1deg);
}


.deco4 {
  position: absolute;
  top: 350px;
  right: -74px;
  rotate:-2deg;
  width: 110px;
  height:auto;
  padding: 10px;
  text-align: center;
  filter: brightness(1.1) contrast(1.05); 
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  box-shadow:none;
  z-index:500;
  transition: transform 0.18s ease;
}

.deco4:hover {
  transform:scale(1.03) rotate(-1.1deg);
}

.deco5 {
  position: absolute;
  top: 850px;
  left: -80px;
  rotate:2deg;
  width: 110px;
  height:auto;
  padding: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  box-shadow:none;
  z-index:500;
  transition: transform 0.18s ease;
}

.deco5:hover {
  transform:scale(1.03) rotate(1.1deg);
}


.deco6 {
  position: absolute;
  top: 233px;
  left: 368px;
  width: 90px;
  height:auto;
  padding: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  box-shadow:none;
  z-index:500;
  transition: transform 0.18s ease;
}

.deco6:hover {
  transform:scale(1.03) ;
}

.deco7 {
  position: fixed;
  top: -80px;
  left: 850px;
  width: 90px;
  height:auto;
  padding: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  box-shadow:none;
  z-index:500;
  transition: transform 0.18s ease;
}

.deco7:hover {
  transform:scale(1.03) ;
}


.divide {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px; /* cute spacing */
}

.cook-info {
  flex: 0 0 40%;
}

.cook-log {
  flex: 0 0 60%;
  margin-top:20px;
}

div.wrap {
  margin-right:14px;
  border:10px solid gray;
  background: url('https://i.postimg.cc/fLnTdn1d/IMG_9999.jpg');
  background-size:30%;
  border-image: url("https://i.postimg.cc/Jz08pjgs/testborder4.png") round 12;
  border-radius:  12px;
}

.wrap h2 {
  margin:0;
  font-family: Mea Culpa;
  font-size:44px;
  position:relative;
  margin-bottom:-17px;
  left:-13px;
  color:white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.48);
}


.deco2 {
  position: absolute;
  top: -20px;
  left: -80px;
  rotate:15deg;
  width: 100px;
  height:auto;
  padding: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  box-shadow:none;
  z-index:0;
  transition: transform 0.18s ease;
animation: swing 2s ease-in infinite;
}


 @keyframes swing {
    0%   { rotate: -3deg; }
    50%   { rotate: 2deg; }
    100%  { rotate: -3deg; }
}



    ::-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;
    }


    .gallery {
  display: none; /* hidden until button is clicked */
  width:266px;
  margin-right:10px;
  height:360px;
  border:10px solid gray;
  background: url('https://i.postimg.cc/fLnTdn1d/IMG_9999.jpg');
  background-size:30%;
  border-image: url("https://i.postimg.cc/Jz08pjgs/testborder4.png") round 12;
  border-radius:  12px;
}

.gallery h2 {
  margin:0;
  font-family: Mea Culpa;
  font-size:44px;
  position:relative;
  margin-bottom:-17px;
  left:-13px;
  color:white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.48);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 5px;
  overflow-y:scroll;
  overflow-x:hidden;
  height:300px;
}

.gallery-grid img {
  width:100px; height:auto; margin-top:15px; margin-bottom:-15px; border: 10px solid gray; border-image: url('https://i.postimg.cc/52kdSXtb/bordertest2.png') round 12; border-radius: 12px;
  margin-left:6px;
}

.switch-btn {
  font-family: 'rainyhearts';
  font-size: 18px;
  color: #a64c6e;
  background: #ffe6f0;
  border: 3px solid #ffbcd4;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 #e39ab3;
  transition: all 0.2s ease;
  margin-bottom: 10px;
  display: inline-block;
}

.switch-btn:hover {
  background: #ffd9e8;
  transform: translateY(-3px);
  box-shadow: 0 5px 0 #e39ab3;
}

.switch-btn:active {
  transform: translateY(0px);
  box-shadow: 0 2px 0 #e39ab3;
}

.cook-log .switch-btn {
  margin-right: 6px;
}



    /* footer stuff footer styling stuff */

    .footer {
    border: 10px solid transparent;
    background: url('https://i.postimg.cc/7ZKr8tgN/2a2efa8287864203f0ed4eb8c3a8a140.jpg');
    background-size: 30%;
    font-family: libre baskerville;
    border-radius: 4px;
    border-image: url("https://files.catbox.moe/d4co3y.gif") 12 round;
    width: 78%;
    height: auto;
    padding: 4px;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 5px;
    position: relative;
    left: 0px;
    overflow: visible;
    text-align: center;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.footer a {
  color: steelblue;
  text-decoration: none;
  font-weight: bold;
}

.footer a:hover {
  color: rgba(70, 131, 180, 0.65);
  text-decoration: none;
  font-weight: bold;
}

.footer p {
  margin-bottom:4px;
  margin-top:8px;
}