@font-face {
  font-family: Caveat;
  src: url(fonts/caveat/Caveat-Regular.ttf);
}

@font-face {
  font-family: HomeadeApple;
  src: url(fonts/homeadeapple/HomemadeApple-Regular.ttf);
}
@font-face {
  font-family: PatrickHand;
  src: url(fonts/patrickhand/PatrickHand-Regular.ttf);
}

@font-face {
  src: url(fonts/ibmplexmono/IBMPlexMono-MediumItalic.ttf);
  font-family: IBM;
}

@font-face {
  src: url(fonts/handjet/Handjet-SemiBold.ttf);
  font-family: HandjetSemibold;
}



*::selection{
  color:#c01168;
  background-color: #fff1bb8a;
}

.guestbookiframe {
  filter: drop-shadow(0px 0px 5px #fff890);
  display: block;
  width: 100%;
  height: auto;
}

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

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e1cbd7, #ffe7f5 20%);
border-left: 1px solid #c33072;
}

::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(90deg, rgb(122, 27, 79) 0%, rgb(255, 194, 219) 28%, rgb(238, 138, 190) 55%, rgb(252, 202, 239) 87%);
  border-left: 1px solid #c33072;
}

/*horizontal scroll*/

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

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e1cbd7, #ffe7f5 20%);
 border-top: 1px solid #c33072;
}

::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(180deg,  rgb(122, 27, 79) 0%, rgb(255, 194, 219) 28%, rgb(238, 138, 190) 55%, rgb(252, 202, 239) 87%);
  border-top: 1px solid #c33072;
}


.headercontainer {
  position: relative;
  background-image: url(bg/cherryblossoms.jpg);
  width: 100%;
  min-height: clamp(100px, 40vw, 400px);
border-radius: 5em;
  margin-bottom: 0px;
  z-index: 1;
}

.headerart {
  position: relative;
  width: min(600px, 100%);
  height: clamp(100px, 40vw, 400px);
}


#honaplush1 {
  position: absolute;
  z-index: 5;
  transform: rotateZ(-20deg);

  left: 31%;
  top: 1%;
  width: 37%;

  filter: drop-shadow(-5px -5px 10px #fc49ae8c);
}

#redbg {
  position: absolute;
  z-index: 1;

  width: 32%;
  left: 28%;
  top: 20px;

  transform: rotateZ(10deg);
  filter: drop-shadow(10px 5px 10px #ed72b2);
}

#checkdiv {
  position: absolute;
  z-index: 2;
  width: 70%;
  top: 7%;
  left: 14%;

  filter: drop-shadow(10px 5px 10px #ed72b2);
}

#glitterstar {
  position: absolute;
  z-index: 6;

  width: 64%;
  top: 80%;
  left: 34%;

  filter: drop-shadow(10px 5px 10px #ed72b2);
}

#wowanalog {
  position: absolute;
  z-index: 7;

  filter: drop-shadow(0px 0px 10px #ffdb98);

  left: 46%;
  top: 0%;
  width: 50%;

  transform: rotateZ(30deg);
}

#dangerdayscd {
  position: absolute;

  width: 40%;
  left: 50%;

    filter: drop-shadow(0px 0px 10px #ffdb98);

  animation: spin 5s linear infinite; 
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#lovepotion {
  position: absolute;
  z-index: 3;

  top: 5%;
  left: 37%;
  width: 33%;

  filter: drop-shadow(-10px -10px 15px #faf5c6);
}

.stickynotecontainer {
  z-index: 4;
  position: absolute;
  width: 40%;
  filter: drop-shadow(10px 5px 10px #ed72b2);
}

.stickynote1 {
  height: 100%;
  width:100%;
  display: block;
}

.stickynotetext {
  position: absolute;
  top: 35%;
  left: 15%;
  width: 70%;
  height: 45%;
  
  overflow-y: auto;
  overflow-x: hidden;

  text-align: center;
  font-family: PatrickHand;
  font-size: clamp(0.8rem, 2.1vw, 2rem);
  color: #c01168;
  text-shadow: 2px 2px 4px #fff495;
  line-height: -9em;
  
}

.stickynotetext::-webkit-scrollbar {
  width: 8px;
  }

.stickynotetext::-webkit-scrollbar-track {
  background-color: rgba(228, 228, 228, 0.714);
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #e4539ba4;
  }

.stickynotetext::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background:  #faf5c6;
  border: 1px solid #e26b97;
  }



.hello {
  display: inline-block;
  background-image: linear-gradient(#ffdced, #ffb4db, #ffdced);
  border-radius: 30px;
  margin-bottom: 0;
}

.hellotxt {

  margin-bottom: 0;

  font-family: IBM;
  font-size: 10vw;
  letter-spacing: 1.9px;
  color: #fff495;
  text-shadow: 5px 5px  #e26b97, 0px 0px 10px #fffcde;

  margin-top: 0;

  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #c01168;
  text-underline-offset: 4px;

  transition: text-shadow 0.3s ease-in-out, text-decoration-color 0.2s ease-in-out;

  border-right: 5px solid;

  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation:
    typing 2s steps(10),
    cursor .4s step-end infinite alternate;
}

@keyframes cursor {
    50% { border-color: transparent }
}
@keyframes typing {
    from {  width: 0  }
}

.hellotxt:hover {
  color:#ed72b2;
   text-shadow: 5px 5px  #fffcde;
    text-decoration-color: #c01168;
}

.blinkiegallery {
  --s: 150px; /* size of the image */
  --d: 27s; /* animation duration */
  --n: 4; /* number of visible images */

  z-index: 998;
  
  display: flex;
  overflow: hidden;

  background-image: url(divs/glitterstripe.gif);
  padding-block: 5px;
  display: flex;
  overflow: hidden;


  box-shadow: 0px 10px 10px #e489ab;
  transition: filter 0.3s ease-in-out;

}
.blinkiegallery img {
  width: var(--s);
  offset: shape(from calc(var(--s)/-2) 50%, hline by calc(sibling-count() * max(100%/var(--n),var(--s) + 10px)));
  animation: x var(--d) linear infinite calc(-1*sibling-index()*var(--d)/sibling-count());
  box-shadow: 0px 10px 20px #c83168, 0px -10px 20px #ffdb98;
}


@keyframes x { 
  to {offset-distance: 100%}
}

.checkdiv img {
  display: block;
  margin: 0 auto;
  width: 70%;
}

.intro {
  display: grid;
  grid-template-columns: 1fr 3fr;
  margin-top: 0;
  border: 5px solid;
  border-image: linear-gradient(#ff8fc5, #ffdeef, #ff8fc5) 5 stretch;
}

.introside {
  background-image: url(bg/paper.jpg);
  padding: 25px;
}

#me {
  width: 97%;
  height: auto;
  margin: 0 auto;

  box-shadow: 0px 0px 20px #8e024a;
  transition: width 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#me:hover {
  width: 100%;
  height: auto;
  box-shadow: 0px 0px 20px #fff495;
}

#prompt {
  font-family: HomeadeApple;
  background-image: url(bg/5QV3UYs.gif);

  color:#faf5c6;
  text-shadow: 2px 2px 5px #c23670, -2px -2px 5px #4b0425;

  text-align: right;

  line-height: 60%;
  margin-bottom: 0;
  font-size: 1em;
}

#field {
  font-family: HandjetSemibold;
  font-size: 1em;
  line-height: 1.3;
  margin-top: 0;
  color: #c23670;
}

.intromain {
  background-image: url(bg/pinkstatic.gif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 25px;
}

#hatskeletons {
  width: 70%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 0px 10px #8e024a;
}

.introbox {
  display: block;
  margin: auto, 0;
  background-color: white;
  overflow: scroll;
  height: 60%;
  width: 90%;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: inset 13px 0px 6px -10px rgba(159, 68, 114, 0.2), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);

  font-family: HandjetSemibold;
  font-size: 1em;
  color: #871148;
  line-height: 1;

  filter: drop-shadow(0px 0px 10px #871148)
  }

.introbox::-webkit-scrollbar {
  width: 0; 
  background: transparent;
  }

.introbox::-webkit-scrollbar-thumb {
  background: transparent;
}

.chatbox {
  height: fit-content;
  background-image: url(bg/cherryblossoms.jpg);
  padding: 15px;
  padding-top: 0;
  border-radius: 30px;
}

#titlechat {
  border-radius: 15px;
  background-image: url(divs/glitterstripe.gif);
  display: inline-block;
  font-family: IBM;
  font-size: 1.1em;
  color: #ffe5b8;
  text-shadow: 1px 0px 4px #540034;

  padding-left: 0;
  margin-left: 0;


  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #e26b97;
  text-underline-offset: 4px;

  transition: text-shadow 0.3s ease-in-out;
}
#titlechat:hover {
  text-shadow: 1px 1px 4px #fff495;
  text-decoration-color: #ff9ccc;
}

#chattable {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  border-color: #e489ab;
}

.chatbox img {
  display: inline-block;
  width: 10vw;
  margin-bottom: 0;
  filter: drop-shadow(5px 10px 5px #c60e61ab);
}