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

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

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

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

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

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

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

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

body, html {
    margin: 0;
    padding: 0;
}

body {
  background-image: url("bg/frill-top.gif"), url("bg/strawbchoco.gif");
  background-repeat: repeat-x, repeat;
  background-position: left top, left top;
    width: 730px;
    height: 1372px;
    position: relative;
  overflow-x: hidden;
}

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


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

.tooltiptext {
  text-align: center;
  visibility: hidden; /* Hidden by default */
  width: 88px;
  top: 108%;
  right: 77%;
  background-color: rgba(255, 254, 251, 0.997);
  box-shadow: 0px 3px 3px #c10855b1;
  color: #d10077;
  padding: 3px 0;
  border-radius: 6px;
  border: 1px dotted #a7084d;
  position: absolute;
  z-index:99;
  font-family: HandjetSemibold;
  font-size: 0.8em;
  line-height: 1;
  box-sizing: border-box;
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

#togetherforever {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 60%;
}
#heartshelf {
  width: 100%;
  filter: drop-shadow(0px 5px 3px #9b0450);
  user-select: none;
}

#charmring {
  position: absolute;
  top: 3%;
  right: 10%;
  width: 30%;
}
#hook {
  height: 100%;
  width: 100%;
  filter: drop-shadow(0px 5px 3px #9b0450);
  user-select: none;
}

#dolls {
    position: absolute;
    left: 13%;
    width: 71%;
    height: 140px;
    top: 25%;
}
#dolls img {
    width: 55px;
    height: 140px;
    margin-right: -7px;
    filter: drop-shadow(0px 3px 0px hsl(330, 100%, 21%)) drop-shadow(0px -1px 0px hsl(330, 96%, 67%)) drop-shadow(0px 0px 3px #ff90aa);
    transition: 0.2s ease;
}
#dolls img:hover {
    filter: drop-shadow(0px 3px 0px hsl(330, 100%, 21%)) drop-shadow(0px -1px 0px hsl(330, 96%, 67%)) drop-shadow(0px 0px 5px #fff0bd);
    transform: scale(1.1);
    z-index: 99;
}

.cliquebuttons {
    filter: drop-shadow(0px 3px 5px #7e0339);
    transition: 0.15s ease-in-out;
    z-index: 20;
}
.cliquebuttons:hover {
    scale: 1.15;
    filter: drop-shadow(0px 3px 5px #f2047b);
    z-index: 99;
}
#tgbutton {
    z-index: 0;
    position: absolute;
    top: 50%;
    left: 40%;
    right: 5%;
}
#tgbutton:hover{
    z-index: 3;
}

#charmringbutton {
    z-index: 99;
    position: absolute;
    top: 22%;
    left: 45%;
    right: 5%;
    rotate: 15deg;
}
.charms {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.charms img {
  transition: 0.2s ease-in-out; 
    filter: drop-shadow(0px 3px 0px hsl(330, 100%, 51%)) drop-shadow(0px -1px 2px hsl(330, 96%, 67%)) drop-shadow(0px 0px 3px #ff90aa);
}

@keyframes swing {
  0% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(3deg);
  }}
.charms img:hover {
    filter: drop-shadow(0px 3px 0px hsl(330, 100%, 21%)) drop-shadow(0px -1px 0px hsl(330, 96%, 67%)) drop-shadow(0px 0px 4px #ffe99f);
	animation-play-state: paused;
    scale: 1.05;
    z-index:99;
}


#mykeychain {
    position: absolute;
    top: 69%;
    left: 22%;
    z-index: 9;
      transform-origin: top center; 
  animation: swing ease-in-out 2s infinite alternate;
}
#vampireapologist {
    position: absolute;
    top: 69%;
    left: -20%;
    z-index: 8;
    transform-origin: top center; 
    animation: swing ease-in-out 3s infinite alternate;
}
#vampireapologist:hover {
    z-index: 99;
}
#vivarism {
    position: absolute;
    top: 64%;
    right: -35%;
    z-index: 8;
   transform-origin: top center; 
    animation: swing ease-in-out 4.5s infinite alternate;
}
#vivarism:hover {
    z-index: 99;
}
#charmring2 {
  position: absolute;
  top: 35%;
  left: 3%;
  width: 30%;
  z-index: 1;
}
#hook2 {
  height: 100%;
  width: 100%;
  filter: drop-shadow(0px 5px 3px #9b0450);
  user-select: none;
}
#bechnokid {
    position: absolute;
    top: 58%;
    right: 39%;
    z-index: 8;
   transform-origin: top center; 
    animation: swing ease-in-out 2.5s infinite alternate;
}
#bechnokid:hover {
    z-index: 99;
}
#pocketdollhouse {
    position: absolute;
    top: 62%;
    left: 58%;
    z-index: 8;
   transform-origin: top center; 
    animation: swing ease-in-out 3.5s infinite alternate;
}
#pocketdollhouse:hover {
    z-index: 99;
}
#valentinely {
    position: absolute;
    top: 65%;
    left: 31%;
    z-index: 9;
   transform-origin: top center; 
    animation: swing ease-in-out 4s infinite alternate;
}

#drbutton {
    z-index: 0;
    position: absolute;
    top: 70%;
    left: 40%;
    right: 5%;
}

#plushierow1 {
    position: absolute;
    top: 61%;
    left: 29%;
    width: 38%;
    height: 25px;
    margin: 0;
    padding: 0;
    z-index: 1;
}
#plushierow1 img, #plushierow2 img {
    margin-right: -4px;
    filter: drop-shadow(0px 3px 0px hsl(330, 100%, 21%)) drop-shadow(0px -1px 0px hsl(330, 96%, 67%));
    transition: 0.2s ease-in-out;
}
#plushierow1 img:hover, #plushierow2 img:hover {
    filter: drop-shadow(0px 3px 0px hsl(330, 100%, 21%)) drop-shadow(0px -1px 0px hsl(330, 96%, 67%)) drop-shadow(0px 0px 4px #ffe99f);
    transform: scale(1.2);
}
#plushierow2 {
    position: absolute;
    top: 65%;
    left: 30%;
    width: 38%;
    height: 25px;
    z-index: 2;
}
#plushierow1:hover, #plushierow2:hover {
    z-index: 3;
}

#psp {
    position: absolute;
    right: -10%;
    top: 41%;
    transform: rotate(-60deg);
  filter: drop-shadow(0px 5px 3px #9b0450);
  user-select: none;
  width: 90%;
  z-index: 0;
}
#mewborder {
    position: absolute;
    right: 9%;
    top: 42.5%;
    transform: rotate(-60deg);
  filter: drop-shadow(0px 5px 3px #9b0450);
  user-select: none;
  width: 53%;
  z-index: -1;
}
#rpgbg {
  transform: rotate(30deg);
  top: 37%;
  right: 20%;
  position: absolute;
  width: 32%;
  height: 28%;
  background-image: url("bg/sparkl.gif");
  z-index: -2;
}
#myrpg {
    position: absolute;
    right: 15%;
    top: 41%;
}
.charas img {
    transform: rotate(30deg);
    filter: drop-shadow(0px 3px 0px hsl(330, 100%, 21%)) drop-shadow(0px -1px 0px hsl(330, 96%, 67%)) drop-shadow(0px 0px 5px #ff90aa);
    transition: 0.3s ease;
}
.charas img:hover {
    filter: drop-shadow(0px 3px 0px hsl(330, 100%, 21%)) drop-shadow(0px -1px 0px hsl(330, 96%, 67%)) drop-shadow(0px 0px 10px #fff0bd);
    transform: scale(1.2);
    z-index: 99;
}
#treflemefle {
    position: absolute;
    right: 35%;
    top: 45%;
}
#arunyi {
    position: absolute;
    right: 23%;
    top: 49%;
}
#razzpixel {
    position: absolute;
    right: 43.5%;
    top: 53%;
}
#gikaayumirpg {
    position: absolute;
    right: 31.5%;
    top: 57%;
}
#rpgbutton {
    transform: rotate(30deg);
  position: absolute;
    top: 40%;
    right: 28%;
}
#rpgbutton:hover {
    transform: rotate(0deg);
}

#toyboxlogo {
  position: absolute;
  width: 75%;
  z-index: 2;
  filter: drop-shadow(0px 5px 5px #c3005b);
  animation: beat ease-in-out 3s infinite alternate;
}
@keyframes beat {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.05) rotate(-5deg);
  }
}

#subtitle {
  position: absolute;
  z-index: 1;
  top: 11%;
  left: 5%;
  width: 57%;
  border-radius: 20px;
  box-shadow: 2px 2px 4px #9b0450, -2px -2px 4px #fff0bd;
  font-family: PatrickHand;
  line-height: 0.9;
  font-weight: lighter;
  font-style: italic;
  color: #a7084d;
  padding: 10px;
  background-image: url(bg/paper.jpg);
  transition: 0.2s ease-in-out;
  user-select: none;
}

#subtitle:hover {
  transform: scale(1.07);
    box-shadow: 2px 2px 4px #9b0450, -2px -2px 4px #fff0bd, 0px 0px 10px #ff0894;
}