body {
  background-image: url("/media/img/batspurp2.gif");
  background-attachment: fixed; 
  font-family: "grandstander", verdana, sans-serif;
  color:#00c1c7;
  overflow-x:auto;
  overflow-y:auto;
  text-align:justify;
}

* {
 /* scrollbar-width: thin;
  scrollbar-color: #b3008cc9 #64004fd4;
  scroll-behavior:smooth;*/
  cursor:url("/media/img/sdthg.gif"), default;}


   *::-webkit-scrollbar {
    width: 15px;
  }

  *::-webkit-scrollbar-track {
    background: #64004fd4;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #b3008cc9;
    border-radius: 10px;
    
  }
::-webkit-scrollbar {
    cursor:url("https://kkb.online/media/img/sdthg.gif"), default;
}
::-webkit-scrollbar-thumb:hover{cursor:url("https://kkb.online/media/img/sdthg.gif"), default}

::selection {
  color: #ff3ad4c9;
  background: #5e0049;
  text-shadow: 
/*  1px 0 0 #fff,
  0 1px 0 #fff, 
  -1px 0 0 #fff, 
  0 -1px 0 #fff*/
3px 0 5px #891d72c9, 
0 -3px 5px #891d72c9, 
-3px 0 5px #891d72c9, 
0 3px 5px #891d72c9;
}
::-moz-selection { 
  color: #ff3ad4c9;
  background: #5e0049;
  text-shadow:3px 0 5px #891d72c9, 
  0 -3px 5px #891d72c9, 
  -3px 0 5px #891d72c9, 
  0 3px 5px #891d72c9;}

/* fonts */
@font-face{
  font-family:"cherry bomb";
  src:url("/font/chrybom.ttf")}
@font-face{
  font-family:"Grandstander";
  src:url("/font/Grandstander-VariableFont_wght.ttf");}
@font-face{
  font-family:"mali-bold";
  src:url("/font/Mali-Bold.ttf")}
@font-face{
  font-family:"itim";
  src:url("/font/Itim-Regular.ttf")}
@font-face{
  font-family:"kalam";
  src:url("/font/Kalam-Regular.ttf")}
@font-face{
  font-family:"nanum";
  src:url("/font/NanumPenScript-Regular.ttf")}
@font-face {
  font-family:"ms pixel";
  src:url("/font/mspixel.otf");}
@font-face {
  font-family:"superscript";
  src:url("/font/SUPERSCR.TTF")}
@font-face {
  font-family:"verdana2";
  src:url("/font/Verdana2.ttf")}
@font-face {
  font-family:"starborn";
  src:url("/font/Starborn.ttf")}
@font-face {
  font-family:"star cartoon";
  src:url("/font/Star Cartoon.ttf")}
@font-face {
  font-family:"canes";
  src:url("/font/canes.ttf")}
@font-face {
  font-family:"daisydelite";
  src:url("/font/daisydelite.otf")}

summary{
  font-family:'mali-bold';
  transition:ease-in-out .8s;
    display: block;
    font-size:20px;
}

/* Create a new custom triangle on the right side */
summary::before {
  margin-left: 1ch;
  display: inline-block;
  content:  url("/media/img/purplearrow.png");
  transition: 0.2s;
}

details[open] > summary::before {
  transform: rotate(90deg);
  
}

summary:hover{
  filter: 
  drop-shadow(1px 0px 3px #4b023b98)
  drop-shadow(0px 1px 3px #4b023b98)
  drop-shadow(0px -1px 3px #4b023b98)
  drop-shadow(-1px 0px 3px #4b023b98);
  cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif'), pointer;
}

/*summary.stickeralbum{

}*/

summary.whenever:hover::after, summary.stickeralbum:hover::after{
  content:"click me!";
  padding-left:3px;
  font-size:12px;
  align-content:center;
  font-family:verdana;
  font-weight:bold;
    color:#00c1c7;
      filter: 
  drop-shadow(1px 0px 3px #065d6598)
  drop-shadow(0px 1px 3px #065d6598)
  drop-shadow(0px -1px 3px #065d6598)
  drop-shadow(-1px 0px 3px #065d6598);
}

details:open > summary{
  display:block;
}
ul.music{
  margin-left:20px; list-style-image: url('/media/img/rbmusicpt.gif');
  margin-top:4px;
  line-height:12px;
}

ul.ratingsys{
  list-style-image: url('/media/img/miffy.gif');
   margin-left:20px; 
    margin-top:4px;
  line-height:12px;
  color:#00c1c7;
  font-family:grandstander;
  font-weight:600;
}

/* splash page formatting */ .loveisalonelysplash {
  width:900px;
  text-align:center;
  font-family: "starborn", "star cartoon", "mv boli", "comic sans ms";
  font-size: 90px;
  background-size:80%;
  background-position: center;
  background-image: url('/media/img/heartwave2.gif');
  -webkit-background-clip: text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  filter: 
  drop-shadow(2px 0px 0px #fff)
  drop-shadow(0px 2px 0px #fff)
  drop-shadow(0px -2px 0px #fff)
  drop-shadow(-2px 0px 0px #fff)
  drop-shadow(5px 5px 18px #d21699);
  transition:ease-in-out .8s, transform .8s;
  margin-top:-650px;}
.loveisalonelysplash:hover {
  transition:ease-in-out .8s, transform .8s;
transform:scale(1.1) rotate(5deg);
filter: 
drop-shadow(2px 0px 0px #fff)
drop-shadow(0px 2px 0px #fff)
drop-shadow(0px -2px 0px #fff)
drop-shadow(-2px 0px 0px #fff)
drop-shadow(10px 10px 6px #c569dc);
cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif'), pointer;}
.splash {
    word-break: break-word;
    font-size: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 600px;
    height: 320px;
    border: 10px dotted #8d25a7;
    border-radius: 40px;
    background-color: #5f1d6c;
    opacity: 0.90;
    box-shadow: 0 4px 8px #00000033;
    padding: 100px 40px 100px 40px;
    margin-top: 200px;
    word-break: break-word;
    text-wrap: pretty;
    min-width:600px;
  font-family:grandstander;}
.splashie{ 
  width:300px; 
  z-index:40;
  margin-top:340px; 
 margin-left:0px;
 margin-bottom:50px;
  opacity:0.75;
  transition:ease-in-out .5s, transform .5s;}
.splashie:hover{ 
transition:ease-in-out .5s, transform .5s;
transform:scale(1.4) rotate(-6deg);
  opacity:1;
  filter: drop-shadow(2px 2px 40px #c569dc);} /*end splash page formatting */
.container {
    display: grid;
    grid-template-columns: 250px 300px 300px;
    grid-template-rows: 100px 550px 225px;
    gap: 10px 10px;
    grid-auto-flow: row;
    grid-template-areas:
        "head head head head"
        "menu main main right"
        "menu foot foot foot"
        "btm btm btm btm";
    width: 1325px;
    height: 1000px;
    margin-top:50px;
    margin-bottom:0px;
    margin-left:auto;
    margin-right:auto;
    border: 10px dotted #8d25a7;
    /*border-image:url("/media/glitter/DCglit6.gif");
    border-image-repeat: repeat;*/
    border-radius: 40px;
    opacity: 0.90;
    filter:drop-shadow(8px 8px 20px #f86fef73);
    padding: 20px;
    animation: breathe 8s ease-in-out 0s infinite;
    background-color: #5f1d6c;
  }

.container:hover{
          animation-play-state: paused;
}

.datefmt{
  font-family:'consolas', courier new;
  font-weight:bolder;
  color:#ffcc00;
  text-shadow: 3px 3px 3px #d40075;
margin-top:10px;}
.head {
  grid-area: head;
  margin-left:100px;}
.menuhead, .welcomehead, .edgehead, .shelf2hdr {
  text-decoration:wavy underline #de7e11ef;
  font-family:'star cartoon';
  text-shadow: 3px 0px #66ff1f, 0px -1px #ff1fce, 3px 0 #ff1fce, 0 -3px #ff1fce;

;}

.menuhead, .welcomehead, .edgehead{
 filter: drop-shadow(0px -5px 5px #cf83e247)
drop-shadow(0px 5px 5px #cf83e247)
drop-shadow(5px 0px 5px #cf83e247)
drop-shadow(-5px 0px 5px #cf83e247)
}
.welcomehead{
  z-index:99999999;
}

.menuhead, .edgehead {  
  font-size:28px;   
  color:#77c6c99e;}
.welcomehead {
  font-size:36px;
  grid-area:main;
  margin-top:20px;
  color:#00c1c7;}
.menuhead {
  grid-area:menu;
  margin-left:20%;
margin-top:-40px;}
.edgehead {
  grid-area:right;
  margin-left:46%;
  margin-top:25%;}
.menu, .edge { 
  border: 10px dotted #8d25a7;
  text-align: left;
  background-color: #370a40;
  font-family:verdana;
  font-size:30px;
  color: #d07be5da;
  inline-size:200px;
  overflow-wrap:break-word;
  border-radius:20px;
  transition: ease-in-out .5s, transform .3s;}
.menu {
    grid-area: menu;
    height:84%; /*79%*/
    width:220px;
    transform:scale(.95);
    overflow:auto;}
.menu:hover {
  background-color: #2e0237;
  transform: scale(1);
  transition: ease-in-out .5s, transform .3s;
  filter:drop-shadow(1px 1px 10px #7b0a91);}
.edge {
  grid-area: right;
  transform: scale(.95);
  width:65%;
  margin-left:140px;
  height:70%; 
  margin-top:150px;
}
.edge:hover{
  background-color: #4c025a;
  transform: scale(1);
  transition: ease-in-out .5s, transform .3s; 
  filter:drop-shadow(1px 1px 10px #7b0a91);}
.madewithlove{
    grid-area:btm;
    align-content:center;
    width:20%;
    height:100%;
    margin-top:-6%;
    margin-left:-20px;
  }
.fc2{
      filter:
      drop-shadow(-1px 0px 0px #00c0c7)
      drop-shadow(0px 1px 0px #00c0c7)
      drop-shadow(0px -1px 0px #00c0c7)
      drop-shadow(1px 0px 0px #00c0c7)
      /*drop-shadow(-1px 0px 0px #b3008cc9)
      drop-shadow(0px 1px 0px #b3008cc9)
      drop-shadow(0px -1px 0px #b3008cc9)
      drop-shadow(1px 0px 0px #b3008cc9)*/
      drop-shadow(2px 0px 8px  #c569dc50)
      drop-shadow(0px 2px 8px #c569dc50)
      drop-shadow(0px -2px 8px #c569dc50)
      drop-shadow(-2px 0px 8px #c569dc50);
  transform:scale(1.5);
}

  .madewithlovetext{
    font-family:'mali-bold';
    font-size:20px;
    transition:ease-in-out .3s, transform .3s;
  }

.madewithlovetext:hover{
    filter:
      drop-shadow(2px 0px 0px #b3008cc9)
      drop-shadow(-2px 0px 0px #b3008cc9)
      drop-shadow(0px 2px 0px #b3008cc9)
      drop-shadow(0px -2px 0px #b3008cc9)
      drop-shadow(2px 0px 4px  #00c0c781)
      drop-shadow(0px 2px 4px #00c0c781)
      drop-shadow(0px -2px 4px #00c0c781)
      drop-shadow(-2px 0px 4px #00c0c781);
    transition:ease-in-out .3s, transform .3s;
    font-size:25px;
    color:#c569dc;
  }


.box1,
.box2, .box88, .boxmusic, .embedbox {
  padding: 20px;
  font-family:"grandstander", verdana, sans-serif;
  transition: ease-in-out .5s, transform .3s;
  transform:scale(.95);}

  .boxmusic{
    width:52%; height:30px; margin-left:690px; z-index:100; margin-top:-40px; font-size:25px; font-weight:bold; color:#23c9cf;
      border: 10px dotted #db16b0;
  border-radius:20px;
  background-color: #4e043ebe;
  grid-area:main;
  overflow:hidden;
  }
  .box1, .box2, .embedbox{
    font-size:20px;
  }

  .box1{width:118%;}
  .box8{  width:95%;}
.box1, .box88 {

    overflow:auto;
    font-size: 40px;
  margin-top:-20px;
  border: 10px dotted #db16b0;
  border-radius:20px;
  background-color: #4e043ebe;
  color: #db16b0;
  grid-area:main;}
.box1:hover {
  background-color: #7a1564ec;
  transform: scale(1);
  transition: ease-in-out .5s, transform .3s;
  filter:drop-shadow(1px 1px 30px #c569dc);}
  .boxmusic:hover {
  background-color: #7a1564bb;
  transform: scale(1);
  transition: ease-in-out .5s, transform .3s;
  filter:drop-shadow(1px 1px 30px #c569dccc);
  height:390px;
  overflow-y:visible;
width:65%;}
  .box88:hover{
     background-color: #7a1564ec;
  transform: scale(1);
  transition: ease-in-out 1s, transform .8s;
  filter:drop-shadow(1px 1px 30px #c569dc);
  color:#ff7ae2;
  font-size:15px;
  }
.box2, .embedbox {
  width:92%;
  border: 10px dotted #00c4cbef;
  border-radius:20px;
  background-color: #004d4fe9;
  color: #14b1b7;
  grid-area:main;
  scrollbar-width: thin;
  scrollbar-color: #004d4fe9 #00c4cb93;
  scroll-behavior:smooth;
}
  .embedbox{
 opacity:80%;
 z-index:997;
   transition-delay:999s;
  }
.box2:hover, .embedbox:hover {
  background-color: #007276ef;
  transform: scale(1);
  transition: ease-in-out .5s, transform .3s;
  filter:drop-shadow(1px 1px 20px #53d4d8cd);}
.embedbox:hover{
  z-index:999999;
  opacity:93%;
  
}
.diaryhdr{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #70d8e0;
  color:#0d5170;
  opacity:70%;
  font-size: 30px;
  font-family: "Grandstander", "mv boli", "comic sans ms", sans serif;
  font-weight:bold;
  border: dotted 5px #32868c;
  border-radius:20px;
  padding:10px;
  text-align:center;
  transition:ease-in-out .5s, transform 0.5s;
  z-index:30;
  width:500px;
text-align:center;}
.diaryhdr:hover{
transition: ease-in-out 2s, transform 2s;
opacity:95%;
transform: scale(1.2);
filter:drop-shadow(1px 1px 10px #53aed8ae);}
.diarybox {
  width:92%;
  height:450px;
  border: 10px dotted #00c4cbef;
  border-radius:20px;
  background-color: #004d4fe9;
  color: #23c9cf;
  grid-area:foot;
  transition: ease-in-out 3s, transform 6s;
  overflow:hidden;
  margin-bottom:50px;
  margin-top:10px;
  padding:15px;
  font-size:30px;
  font-family:nanum;
  transform:scale(.95);
  scrollbar-width: thin;
  scrollbar-color:  #004d4fe9 #00c4cbef;
  scroll-behavior:smooth;}
.diarybox:hover {
  background-color: #007276ef;
  transform: scale(1);
  transition: ease-in-out 3s, transform 6s;
  filter:drop-shadow(1px 1px 30px #53d4d8c2);}
.diarypage {
  width:165%;
  height:155%;
  margin-top:10px;
  margin-left:10px;
  border: 10px dotted #db16b0d8;
  border-radius:20px;
  background-color: #2c0223be;
  color: #db16b0;
  grid-area:main;
  transition: ease-in-out .8s, transform .8s;
  overflow:hidden;
  font-family:mv boli, comic sans ms;
  scrollbar-color: #b3008cc9 #64004fd4;
}
.diarypage:hover {
  background-color: #681255ec;
  transition: ease-in-out .8s, transform .8s;
  filter:drop-shadow(1px 1px 10px #d4007596);}

  .stickiebox{
height:40%;
width:80%;
  margin-left:470px;
  margin-top:-30px;
  z-index:20;
  }

  .stickiebox:hover{
height:80%;z-index:24;
  }

  .pagebox{
      width:128%;
        margin-left:-15px;
          margin-top:-10px;
  }
.pagebox, .stickiebox{
  border: 10px dotted #db16b0d8;
  border-radius:20px;
  background-color: #2c0223be;
  color: #db16b0;
  grid-area:main;
  text-wrap:pretty;
  transition: ease-in-out .5s, transform .5s;
  padding:40px;
  font-size:20px;
  overflow:auto;
  transform:scale(.95);}
.pagebox:hover, .stickiebox:hover {
  background-color: #681255ec;
  transform: scale(1);
  transition: ease-in-out .5s, transform .5s;
  filter:drop-shadow(1px 1px 10px #d4007596);}

  textarea{
    border: 10px dotted #db16b0d8;
    border-radius:20px;
    background-color: #2c0223be;
    color: #db16b0;
    font-size:20px;
    overflow:auto;
    transform:scale(.95);}





/*begin fragrance page styling*/ 

.shelf1, .shelf2, .shelf3, .shelf4, .perfinfo{
font-family:nanum;
border-radius:20px;
transition: ease-in-out .5s, transform .3s;
font-size:30px;
overflow:auto;}
.shelf1, .shelf2, .shelf3{
  padding:20px;}
.shelf1, .shelf3, .shelf4{
color:#64cde0;
background-color:#0d5170;
border: dotted 10px #28babc;}
.shelf1:hover, .shelf3:hover, .shelf4:hover{
    background-color: #156f7f;
    transform: scale(1.05);
    transition: ease-in-out .7s, transform .7s;
    filter:drop-shadow(1px 1px 30px #1b9cb392);}

.shelf4{
  grid-area:main;
height:40%;
width:115%;
margin-top:107%;
margin-left:51%;
display:flex;
}
    
.perfinfo{
  /*display:none;
  visibility:hidden;*/
    grid-area:main;
    margin-left:290px;
    margin-top:210px;
    height:300px;
    width:745px;
    display:block;
    overflow:hidden;
    border: dotted 10px #c569dcc3;
  opacity:.9;
  scrollbar-color: #eaa0fcd5 #c569dcc3;
}
  
    .perfinfo:hover{
      transform: scale(1.05);
      transition: ease-in-out .7s, transform .7s;
      filter:drop-shadow(1px 1px 30px #c569dc);
    opacity:.98;
    cursor:url("https://kkb.online/media/img/cursor_anipoint1e.gif"), default;}


.fragrantica{
  z-index:30;
  grid-area:main;
  margin-left:-25px;
  width:220px;
  height:100px;
  color:#9c3dcfcb;
  font-size:34px;
  transition: ease-in-out 1s, transform 3s;
  transform:rotate(-25deg);
  text-align:center;
  text-decoration:wavy underline #de7e11ef;
  font-family:'star cartoon';
  text-shadow: 3px 0px #66ff1f, 0px -1px #ff1fce, 3px 0 #ff1fce, 0 -3px #ff1fce;
 filter: drop-shadow(0px -5px 8px #cf83e220)
drop-shadow(0px 5px 8px #cf83e220)
drop-shadow(5px 0px 8px #cf83e220)
drop-shadow(-5px 0px 8px #cf83e220)
;
}
.fragrantica:hover{
  transform:rotate(-15deg);
  transition: ease-in-out 1s, transform 1.5s;}
.shelf1{
grid-area:main;
height:145px;
width:805px;
margin-top:-15px;
margin-left:190px;
display:flex;}
.shelf2{
grid-area:main;
height:500px;
width:200px;
margin-top:270px;
text-align:center;
background-color:#501271;
border: dotted 10px #9c3dcf;
scrollbar-color: #501271 #9c3dcf9a;
}
.shelf2hdr{
  grid-area:main;
  width:300px;
  height:20px;
  margin-left:-20px;
  margin-top:215px;
  text-align:center;
  color:#9c3dcfcb;
  font-size:28px;
  transition: ease-in-out .8s, transform .8s;
 filter: drop-shadow(0px -5px 5px #00c0c773)
drop-shadow(0px 5px 5px #00c0c773)
drop-shadow(5px 0px 5px #00c0c773)
drop-shadow(-5px 0px 5px #00c0c773)}
.shelf2hdr:hover{
  font-size:40px;
  transform: scale(1.342);
  transition: ease-in-out .8s, transform .8s;
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;
  /* When the animation is finished, start again */
  animation-iteration-count: infinite;}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}


@keyframes breathe {
  0% {transform: scale(.8); background-color: #5f1d6c;}
  50% {transform: scale(.85); background-color: #50165b;}
  100% {transform: scale(.8); background-color: #5f1d6c;}
}

@keyframes swing {
	0%,
	100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(-30px) rotate(6deg);
	}

	30% {
		transform: translateX(15px) rotate(-6deg);
	}

	45% {
		transform: translateX(-15px) rotate(3.6deg);
	}

	60% {
		transform: translateX(9px) rotate(-2.4deg);
	}

	75% {
		transform: translateX(-6px) rotate(1.2deg);
	}
}

.shelf3{
grid-area:foot;
height:145px;
margin-top:30px;
margin-left:280px;}

.chattable{

  height: 300px;
  width:550px;}
/*.shelf2:hover + .perfinfo{
  display:block;
  visibility:visible;
  transition: ease-in-out .5s, transform .5s;
}*/

.blogframe{
height:92%;
width:100%;
scrollbar-color: #b3008cc9 #64004fd4;

}

.perframe{
      height: 300px;
      width:740px;}

      iframe{
        border:none;
      }

.perfimg {
  border:solid 10px #c700a9d4;
  border-radius:20px;
  background-color:#c700a958;
  transition: ease-in-out .5s, transform .5s;
  height:70%;
  width:30%;
  padding:10px;
  margin:20px;
  opacity:60%;
  filter:blur(2px);}

.perfimg:hover {
  transition: ease-in-out .5s, transform .5s;
  transform:scale(1.4);
  opacity:98%;
  filter:blur(0) drop-shadow(10px 10px 10px #ef8fe1b1);
  cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif'), pointer;
}



.wishlist {
  border:solid 10px #28b9bcb6;
  border-radius:20px;
  background-color:#0d51709b;
  transition: ease-in-out .5s, transform .5s;
  height:60px;
  padding:10px;
  margin-top:60px;
  margin-left:40px;
  opacity:60%;
  filter:blur(2px);}
  
.wishlist:hover {
  transition: ease-in-out .5s, transform .5s;
  transform:scale(2);
  opacity:98%;
  filter:blur(0) 
  drop-shadow(2px 0px 20px #ef8fe1b1)
  drop-shadow(0px 2px 20px #ef8fe1b1)
  drop-shadow(-2px 0px 20px #ef8fe1b1)
  drop-shadow(0px -2px 20px #ef8fe1b1)
  ;
  cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif'), pointer;
}


/*tooltip format*/ .tooltiptext {
  position: absolute;
  top:500px;
  width: auto;
  max-width:100px;
  z-index: 2;
  font-family:grandstander;
  font-size: 20px;
  font-weight:bold;
  color:#a2cb00ef;
background-color: #8e0565a7;
  border-radius: 10px;
  padding: 5px 2px 5px 5px;
  filter: 
  drop-shadow(0px 2px 10px #ffc2e262)
  drop-shadow(2px 0px 10px #ffc2e262)
  drop-shadow(0px -2px 10px #ffc2e262)
  drop-shadow(-2px 0px 10px #ffc2e262)
  ;}

#fade {
  opacity: 0;
  transition: opacity 0.5s;}
.imghover:hover #fade { 
  opacity: 95%;
  position:absolute; }
.imghover-text {
  position: absolute;
  display: inline-block;
  margin-left: -20px;
  margin-top:100px;
  text-wrap:pretty;
  overflow-wrap:break-word;
  text-align: center;} 
  /*end tooltip format*/ 
  /* end fragrance shelf formatting*/





  .chglogbox{
    grid-area:main;
    margin-top:43%;
  }
.changelog{
  width:57%; 
  height:50%;
  color:#00c1c7;
  font-size:20px;
  background-color:#0a4e6ddc;
  border:dotted 8px #53d4d8c2; 
  border-radius:15px; 
  overflow:auto;
  text-wrap: pretty;
  word-wrap:break-word;
  overflow-x:hidden;
  padding-left:50px;
  padding-right:50px;
  padding-bottom:50px;
  transition: ease-in-out .5s, transform .5s;
  transform:scale(.96);
  margin-top:-20px;
  margin-left:-3%;
  scrollbar-color:  #0a4e6ddc #00c0c77e;
}
.changelog:hover{
  transition: ease-in-out .5s, transform .5s;
  border:dotted 8px #00c0c77e;
  transform: scale(1);
  background-color:#0b597ddc;
  filter: drop-shadow(4px 4px 20px #53d4d8c2);}

.community{
  width:46%;
      margin-left:73%;
}
 .noticebox1, .noticebox2{
    width:30%;
      margin-left:66%;}

  .community, .noticebox1, .noticebox2{
    background-color: #802b06d8;
    color: #ff8b5aee;
    height:33%;
    margin-top:343px;

    grid-area:main;
  border-radius:20px;
  border: 8px dotted #db5116d8;
  transition: ease-in-out .5s, transform .8s;
  font-size:28px;
  overflow:auto;
  transform:scale(.95);
  align-content:center;
  align-items:center;
  scrollbar-width: thin;
  scrollbar-color: #802b06d8 #db5116d8;
  scroll-behavior:smooth;
  padding:8px;
  }

.community:hover, .noticebox1:hover, .noticebox2:hover{
  background-color: #ae3b0ad8;
  transform: scale(1);
  transition: ease-in-out .5s, transform .5s;
  filter:drop-shadow(1px 1px 10px #ff8c5aaf);
}  

.noticebox2{
      transition-delay:2s;
      z-index:998;
}
.noticebox2:hover{
  z-index:9999999;
  

}

#statuscafe-username {

    margin-top:10px;
    color:#ffcd42;
    text-decoration-style: wavy;
    transition:ease-in-out .3s;
    font-weight:bold;
    font-family:verdana;
    font-size:17px;
    margin-bottom:8px;
}

#statuscafe-username:hover {
  font-size:19px;
  transition:ease-in-out .3s;
  font-weight:bolder;

}
#statuscafe-content {
    margin: 0 10px 20px 10px;
    align-items:center;
    font-family:verdana;
    font-size:16px;
    text-align:center;
}

  .statusmoodbox {
    margin-left:40%;

    border-color: #db5116d8;
    background-color: #802b06d8;
    color: #fc8d5dd8;
    grid-area:right;
    width:50%;
    height:20%;
margin-top:-40px;
border-radius:20px;
border: 10px dotted;
transition: ease-in-out .5s, transform .8s;
font-size:28px;
overflow:auto;
transform:scale(.95);
scrollbar-width: thin;
scrollbar-color: #802b06d8 #db5116a6;
scroll-behavior:smooth;
}

i.beep{
  font-size:18px;
}

i.beep:hover{
      cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif'), pointer;
}
    
  .statusmoodbox:hover {
    background-color: #ae3b0ad8;
    transform: scale(1);
    transition: ease-in-out .5s, transform .5s;
    filter:drop-shadow(1px 1px 10px #ff8c5aaf);}

/* regular header format */ h1, h2, h3 {
  padding-top: 8px;
  padding-left:2px;
  padding-right:2px;
  padding-bottom:2px;}
h1 {
  font-family:'starborn', 'comic sans ms', sans serif;
  color: #11d7deef;
  font-weight: 700;
  font-size: 50px;
  text-shadow: 5px 5px 0px #02adb3ef;
  filter: drop-shadow(3px 3px 3px #72f1f5ef)

  ;
  margin-top:auto;}
h2 {
  font-family:'starborn', 'comic sans ms', sans serif;
  font-size: 40px;
  text-underline-offset: 50%;
  color:#ffd70c; 
  text-shadow: 5px 5px 0px #b3610a, 0px -1px #b3610a, 1px 0 #b3610a, 0 -1px #b3610a;
  filter: 
   drop-shadow(0px -1px 1px #ffa443)
drop-shadow(0px 1px 1px #ffa443)
drop-shadow(1px 0px 1px #ffa443)
drop-shadow(-1px 0px 1px #ffa443)
  drop-shadow(5px 5px 5px #ffd60cb4)
   ;
  top: 0;}
h3 {
  font-family:'mali-bold', 'comic sans ms', sans serif;
  font-size: 50px;
  text-underline-offset: 50%;
  color:#960075;
  text-shadow: 1px 0px #ff1fce, 0px -1px #ff1fce, 1px 0 #ff1fce, 0 -1px #ff1fce;
  filter: drop-shadow(5px 5px 5px #ee12bed8);
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  line-height:40px;
  transition:ease-in-out .5s, transform 0.5s;
z-index:99;

border-radius:40px;
transition-delay:30s;}
h3:hover{
  transition:ease-in-out .5s, transform 0.5s;
  transform:scale(1.24);
  opacity:100%;
background-color:#00c0c77c;}

  h4 {
    font-family:'grandstander', comic sans ms;
    font-size: 30px;
    color:#169600;
    text-shadow: 1px 0px #a1f791, 0px -1px #a1f791, 1px 0 #a1f791, 0 -1px #a1f791;
    filter: drop-shadow(5px 5px 5px #53ea39)
 drop-shadow(0px -5px 8px #cf83e21e)
drop-shadow(0px 5px 8px #cf83e21e)
drop-shadow(5px 0px 8px #cf83e21e)
drop-shadow(-5px 0px 8px #cf83e21e);
    top: 0;
    margin:0px;
  padding-bottom:10px;}

 h5{
    font-family:'grandstander', comic sans ms;
    font-size: 18px;
    color:#169600;
    text-shadow: 1px 0px #a1f791, 0px -1px #a1f791, 1px 0 #a1f791, 0 -1px #a1f791;
    filter: drop-shadow(5px 5px 5px #53ea39);
    top: 0;
    margin:0px;
  padding:10px;
 transition:ease-in-out .8s, transform 0.5s;}

  h5:hover{  transition:ease-in-out .8s, transform 0.5s;
 font-size:25px;}

/*teal header + star cartoon font*/ div.kkheader {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #70d8e0;
  color:#0d5170;
  opacity:70%;
  font-size: 25px;
  font-family: "star cartoon", "mv boli", "comic sans ms", sans serif;
  font-weight:bold;
  border: dotted 5px #32868c;
  border-radius:20px;
  padding:10px;
  text-align:center;
  margin-bottom:10px;
  transition:ease-in-out .5s, transform 0.5s;}
div.kkheader:hover {
  transition: ease-in-out 2s, transform 2s;
  opacity:95%;}
/*purple header + starborn font*/ div.kkheader2 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  text-align:center;
  background-color: #8f1474;
  opacity:70%;
  font-size: 20px;
  font-weight:bold;
  font-family: "starborn", comic sans ms, sans serif;
  border:dotted 5px #834a93;
  color:#8f1474;
  padding:15px;
  border-radius:20px;
  margin-bottom: 10px;
  text-underline-offset: 20%;
  transition:ease-in-out .5s, transform 0.5s;}
div.kkheader2:hover {
  transition: ease-in-out 2s, transform 2s;
  opacity:95%;}
  a {    color:#ffcd42;
      text-decoration:none;
       cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif') pointer;

  }
  a:hover{
    cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif'), pointer;
    
}

a:active{
   cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif') pointer;
}    

    a.none{color:#9c3dcfcb;

    }

    a.none:active{
      color:#ff5ce7;
    }
a.reg {  
    color:#42ff42;
    text-decoration:#c76d00 wavy underline 2px;
    transition:ease-in-out .8s;
  z-index:0;}
a.reg:hover{  
  color:#c76d00;
  text-decoration:#42ff42 wavy underline 2px;
  transition:ease-in-out .8s, transform .5s;
  font-size:130%
  ;}

/*spiralstyle link formatting*/ a.spiral{
  font-family:'grandstander', verdana;
  font-size:22px;
  color:#14b1b7;
  outline:solid 10px;
  background-color:#0d5170;
  border-radius:20px; 
  text-decoration:none; 
  transition: ease-in-out .3s, transform .3s; 
  padding:15px;
  line-height:40px;}
a.spiral:hover {
  font-size:26px;
  color:#ff4eaf;
  background-color:#d40075aa;
  cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif'), pointer;
  filter:drop-shadow(1px 1px 10px #d4007596);} /*end spiral link*/
/*begin fragrantica link*/ a.fragrantica {
  color:#14b1b7;
  border-radius:20px; 
  text-decoration:none; 
  padding:4px;
 }
a.fragrantica:visited {
  color:#cdaa00;
  background-color:#8e7700;}
a.fragrantica:hover {
  font-size:125%;
  color:#d40075;
  background: 
  radial-gradient(circle, #ff2be6c9 3%, #ffa229be 21%, #fff700bd 39%, #8cff00bb 57%, #00d5ffc6 75%, #d87effce 93%);
  cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif') pointer;}/*end fragrantica link*/
/*begin outlink format*/ a.out{
  font-family:'star cartoon';
  color:#4aff36;
  transition: ease-in-out .8s, transform .8s; 
  text-decoration: #ffb245 wavy underline 4px; 
  font-size:28px;}
a.out:hover {
  font-size:38px;
  color:#64f743;
  filter: drop-shadow(5px 5px 5px #b728ff);
  text-decoration: #fffc45 wavy underline 4px; 
  transition: ease-in-out .8s, transform .8s; 
  cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif') pointer;
  background-image:repeating-linear-gradient(
    45deg,
    #3fff3f,
    #3fff3f 10px,
    #08b508 10px,
    #08b508 20px
  );
  -webkit-background-clip: text;
  background-clip:text;
  -webkit-text-fill-color: transparent;} /*end outlink format*/
i{
  color:#15b1cd;
  font-weight:900;
  text-decoration:#c79f00 wavy underline 2px;
  transition:ease-in-out .5s;}
i:hover{
  color:#c79f00;
text-decoration:#15b1cd wavy underline 2px;
transition:ease-in-out .5s;
 cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif') pointer;}
b {
  color:#c569dc;
  font-weight:900;
  text-decoration:#9b49af 5px;
  filter: 
  drop-shadow(-1px 0px 0px #5e0f5a)
  drop-shadow(1px 0px 0px #5e0f5a)
  drop-shadow(0px -1px 0px #5e0f5a)
  drop-shadow(0px 1px 0px #5e0f5a)
  drop-shadow(5px 5px 5px #3ab6e3)
;
  transition:ease-in-out .8s;}
b:hover{
   cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif') pointer;
  color:#3ab6e3;
  filter: 
 
    drop-shadow(-3px 0px 0px #045c7c93)
  drop-shadow(3px 0px 0px #045c7c93)
   drop-shadow(5px 5px 5px #c569dcad)
  drop-shadow(0px -3px 0px #045c7c93)
  drop-shadow(0px 3px 0px #045c7c93);
  transition:ease-in-out .8s;}
/* stickers start here */ .spkl {
  position: absolute;
  z-index:26;
  transform:rotate(8deg);
  transition:ease-in-out.3s, transform 0.3s;
  opacity:72%;
  grid-area:foot;
  margin-left:320px;
  margin-top:190px;
  width:120px;
  filter: drop-shadow(5px 5px 18px #d21699);}
.spkl:hover {
  transform:rotate(-13deg) scale(1.09);
  transition:ease-in-out.3s, transform 0.3s;
  opacity:90%;}
.spklbat{
  position: absolute;
  z-index:26;
  transition:ease-in-out.5s, transform 2s;
  opacity:42%;
  grid-area:head;
  margin-left:100px;
  margin-top:-40px;
  filter:blur(15px) drop-shadow(40px 40px 1px #ef8fe1b1);
  transition-delay:2s;
}
.spklbat:hover {
  transform:rotate(30deg) scale(1.5);
  transition:ease-in-out 0.3s, transform 0.5s;
  opacity:88%;
  filter:blur(0) drop-shadow(1px 1px 10px #ef8fe1b1);}
.perfumegirlie{
  position: absolute;
  z-index:26;
  transition:ease-in-out.3s, transform 0.3s;
  transform:scale(.9);
  grid-area:main;
  margin-left:5px;
  margin-top:700px;
  transform: scaleX(-1);
}
.rbwelcgif{
  animation: rbgifglow 2s ease 0s infinite normal forwards;
}

@keyframes rbgifglow {
0% {
filter:
        drop-shadow(2px 0px 0px #fff)
        drop-shadow(0px 2px 0px #fff)
        drop-shadow(0px -2px 0px #fff)
        drop-shadow(-2px 0px 0px #fff)
        drop-shadow(0 0 8px #ff0);
}

50% {
  
filter: 
        drop-shadow(2px 0px 0px #fff)
        drop-shadow(0px 2px 0px #fff)
        drop-shadow(0px -2px 0px #fff)
        drop-shadow(-2px 0px 0px #fff);
}

100% {
filter:
        drop-shadow(2px 0px 0px #fff)
        drop-shadow(0px 2px 0px #fff)
        drop-shadow(0px -2px 0px #fff)
        drop-shadow(-2px 0px 0px #fff)
        drop-shadow(0 0 8px #ff0);
}
}

@-webkit-keyframes rbgifglow {
0% {
filter:
        drop-shadow(2px 0px 0px #fff)
        drop-shadow(0px 2px 0px #fff)
        drop-shadow(0px -2px 0px #fff)
        drop-shadow(-2px 0px 0px #fff)
        drop-shadow(0 0 8px #ff0);
}

50% {
filter: 
        drop-shadow(2px 0px 0px #fff)
        drop-shadow(0px 2px 0px #fff)
        drop-shadow(0px -2px 0px #fff)
        drop-shadow(-2px 0px 0px #fff);
}

100% {
filter:       
        drop-shadow(2px 0px 0px #fff)
        drop-shadow(0px 2px 0px #fff)
        drop-shadow(0px -2px 0px #fff)
        drop-shadow(-2px 0px 0px #fff)
 drop-shadow(0 0 8px #ff0);
}
}


    

.rainbowgif{
  opacity:.95;
  transition:ease-in-out .5s;
}
.rainbowgif:hover{
opacity:.5;
filter:blur(15px);
transition:ease-in-out .5s, transform .3s;
}
.perfumegirlie:hover{
  transition:ease-in-out 0.3s, transform 0.5s;
  filter: drop-shadow(1px 1px 10px #ef8fe1b1); } 
  

  .freeperf{
    position: absolute;
    z-index:100;
    transition:ease-in-out.3s, transform 0.3s;
    grid-area:main;
    margin-left:530px;
    margin-top:135px;
    filter:
    drop-shadow(4px 0 0 #fff)
    drop-shadow(0 4px 0 #fff)
    drop-shadow(-4px 0 0 #fff)
    drop-shadow(0 -4px 0 #fff);
  }


  .border{
    margin-top:88px;
    grid-area:main;
    z-index:100;
    width:150%;
    height:20px;
  }

.floresfrescas{
  filter: 
  drop-shadow(2px 0 0 #fff)
  drop-shadow(0 2px 0 #fff)
  drop-shadow(-2px 0 0 #fff)
  drop-shadow(0 -2px 0 #fff);
  grid-area:right;
  margin-top:565px;
  margin-left:-100px;
  transform:scale(2);

}

  /* stickers end here */
.rbheart{
    filter: 
      drop-shadow(3px 0 0 #fff)
      drop-shadow(0 3px 0 #fff)
      drop-shadow(-3px 0 0 #fff)
      drop-shadow(0 -3px 0 #fff);
    grid-area:foot;
    transform:rotate(-12deg) scale(.6);
    margin-top:-41%;
    margin-left:-6%;

}

.luv3{
  grid-area:right;
  transform: scaleY(-1) scaleX(-1);
  margin-top:160px;
  margin-left:148px;
  z-index:99;
  opacity:80%;
  border-radius: 0px 0px 20px 0px;
      transition:ease-in-out .8s, transform .8s;
      opacity:98%;
filter:blur(1px);
}

.luv3:hover{
  opacity:98%;
    filter:
    blur(0)
   drop-shadow(2px 0px 8px #cd4ccd35)
  drop-shadow(0px 2px 8px #cd4ccd35)
  drop-shadow(0px -2px 8px #cd4ccd35)
  drop-shadow(-2px 0px 8px #cd4ccd35);
    transition:ease-in-out .8s, transform .8s;

}

.flacon1{
  margin-top:-130px;
  margin-left:1000px;
}
.flacon4{
  margin-top:240px;
  margin-left:-20px;
width:10px;}

.flacon1, .flacon4{
    width:60px;
  z-index:99;
  filter:
   drop-shadow(2px 0px 8px #cd4ccd35)
  drop-shadow(0px 2px 8px #cd4ccd35)
  drop-shadow(0px -2px 8px #cd4ccd35)
  drop-shadow(-2px 0px 8px #cd4ccd35);
    transition:ease-in-out .3s, transform .3s;
}

.flacon1:hover, .flacon4:hover{
 filter:
   drop-shadow(2px 0px 10px #cd4ccd57)
  drop-shadow(0px 2px 10px #cd4ccd57)
  drop-shadow(0px -2px 10px #cd4ccd57)
  drop-shadow(-2px 0px 10px #cd4ccd57);
    transition:ease-in-out .3s, transform .3s;
}
.rbstar{
grid-area:right;
margin-top:15px;
margin-left:110px;
transform:rotate(8deg);
z-index:36;
filter:drop-shadow(3px 3px 20px #ffe41a87);
opacity:96%;
    transition:ease-in-out .8s, transform .8s;
}
.rbstar:hover{
  opacity:70%;
  filter:blur(2px);
      transition:ease-in-out .5s, transform .5s;
}

.prplbow{
  filter: 
  drop-shadow(3px 0 0 #f77ef1)
  drop-shadow(0 3px 0 #f77ef1)
  drop-shadow(-3px 0 0 #f77ef1)
  drop-shadow(0 -3px 0 #f77ef1)
  drop-shadow(3px 3px 20px #f7ef7e);
  transform:scale(1.5);
}

  /*buttons*/ .buttons {
  display: flex;
  justify-content: center;
  margin-top: -60px;
  flex-direction: row;
  flex-wrap: nowrap;
  z-index: 30;}
.buttons a {
  margin: 0 5px;
  transition: transform 0.3s;}
.buttons a:hover {
  transform: scale(1.1);
  cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif'), pointer;}

/*love is a lonely thing style*/ .loveisalonelything {
  display:flex;
  font-family: "starborn", "star cartoon", "mv boli", "comic sans ms";
  font-size: 500%;
  margin-top:-90px;
  background-size:80%;
  background-position: left;
  background-image: url('/media/img/heartwave2.gif');
  -webkit-background-clip: text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  filter: 
  drop-shadow(2px 0px 0px #fff)
  drop-shadow(0px 2px 0px #fff)
  drop-shadow(0px -2px 0px #fff)
  drop-shadow(-2px 0px 0px #fff)
  drop-shadow(5px 5px 18px #d21699);
  transition:ease-in-out .8s, transform .8s;}
.loveisalonelything:hover {
  transition:ease-in-out .8s, transform .8s;
transform:scale(1.05) rotate(-5deg);
filter:
drop-shadow(2px 0px 0px #fff)
drop-shadow(0px 2px 0px #fff)
drop-shadow(0px -2px 0px #fff)
drop-shadow(-2px 0px 0px #fff)
drop-shadow(10px 10px 10px #00e4f4bc);
cursor:url('/media/img/cursor_anihand1e.ani'), pointer;}



.loveisalonely404 {
  display:flex;
  font-size:100px;
  font-family: "starborn";
  background-size:80%;
  background-position: left;
  background-image: url('/media/img/heartwave2.gif');
  -webkit-background-clip: text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  filter: 
  drop-shadow(2px 0px 0px #fff)
  drop-shadow(0px 2px 0px #fff)
  drop-shadow(0px -2px 0px #fff)
  drop-shadow(-2px 0px 0px #fff)
  drop-shadow(5px 5px 18px #d21699);
  transition:ease-in-out .8s, transform .8s;}
.loveisalonely404:hover {
  transition:ease-in-out .8s, transform .8s;
transform:scale(1.05) rotate(-5deg);
filter:
drop-shadow(2px 0px 0px #fff)
drop-shadow(0px 2px 0px #fff)
drop-shadow(0px -2px 0px #fff)
drop-shadow(-2px 0px 0px #fff)
drop-shadow(10px 10px 10px #00e4f4bc);
cursor:url('/media/img/cursor_anihand1e.ani'), pointer;}

.loveisalonely404box {
    font-size: 30px;
    width: 800px;
    height: 320px;
    border: 10px dotted #8d25a7;
    border-radius: 40px;
    background-color: #5f1d6c;
    opacity: 0.90;
    box-shadow: 0 4px 8px #00000033;
    margin-top: 200px;}

div.kkb{
font-family:"Grandstander";

}
  div.kkb:hover{
    font-size:30px;
    transition:ease-in-out .3s, transform .3s;
  filter: 
      drop-shadow(-10px 5px 1px #fb3beb)
      drop-shadow(-10px 5px 1px #ff9e1e)
      drop-shadow(-10px 5px 1px #ffc802)
      drop-shadow(-10px 5px 1px #28d900)
      drop-shadow(-10px 5px 1px #00b3ff)
      drop-shadow(-10px 5px 1px #c569dc);
  }


  a.bloglinks{
    transition: ease-in-out 1s, transform 1s; 
    font-size:20px;
  font-weight:300;
        font-family:"Grandstander";}


  a.bloglinks:hover {
    color:#00c1c7;
    font-size:25px;
    font-weight:900;
    transition: ease-in-out 1s, transform 1s; 
    cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif') pointer;
    filter: drop-shadow(0px -2px 10px #03545797)
drop-shadow(0px 2px 10px #03545797)
drop-shadow(2px 0px 10px #03545797)
drop-shadow(-2px 0px 10px #03545797);
  }
.buttonlinks{
transition:ease-in-out 1s, transform .5s;
padding-top:10px;
margin:20px;
filter:blur(2px);
opacity:60%;
font-size:0;
}

.buttonlinks:hover{
  transition: ease-in-out .5s, transform .5s;
  transform:scale(1.6);
opacity:98%;
filter:blur(0)
drop-shadow(2px 2px 5px #f31cd2d7)
drop-shadow(-2px -2px 5px #ffc2f6d7);
cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif'), pointer;
}


.glittertext {
  display:flex;
  font-family: "starborn", "star cartoon", "mv boli", "comic sans ms";
  font-size: 74px;
  background-image: url('/media/glitter/DCglit6.gif');
  background-repeat:repeat;
  -webkit-background-clip: text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  filter: 
  drop-shadow(2px 0px 0px #a30c76)
  drop-shadow(0px 2px 0px #a30c76)
  drop-shadow(0px -2px 0px #a30c76)
  drop-shadow(-2px 0px 0px #a30c76)
  drop-shadow(5px 5px 18px #d21699);
  transition:ease-in-out .8s, transform .8s;
grid-area:btm;
margin-left:300px;
margin-top:0px;
width:53%;}

.glittertext:hover {
  transition:ease-in-out .8s, transform .8s;
transform:scale(1.05);}

.datebox{
  padding: 20px;
  overflow:hidden;
  font-family:"verdana2", verdana, sans-serif;
  transition: ease-in-out 1s, transform 1s;
  margin-top:-40px;
  background-color: #ab1089be;
  grid-area:main;
  width:120px; 
  height:8%; 
  margin-left:975px; 
  z-index:20;
  font-size:25px; 
  font-weight:bold; 
  color:#23c9cf00; 
  border-radius:20px;
  display:grid;
  grid-template-columns:90px 15px;
  gap: 7px 7px;
  grid-auto-flow: row;
  grid-template-areas:
      "date img"
}
.datebox:hover {
  background-color:#ab108af0;
  transform: translate(80px, 0);
  transition: ease-in-out 1s, transform 1s;
  filter:drop-shadow(1px 1px 50px #23c9cf);
  color:#23c9cf; 
}


.pastsongs { padding: 10px;
  padding-left:50px;
  color:#23c9cf; 
  overflow:hidden;
  font-family:"verdana2", verdana, sans-serif;
  font-size: 25px;
  transition: ease-in-out 1s, transform 1s;
  margin-top:55px;
  background-color: #ab1089be;
  grid-area:main;
  width:90px; 
  height:70px; 
  margin-left:1025px; 
  z-index:20;
  border-radius:20px;
}
.pastsongs:hover {
  background-color:#ab108af0;
  transform: translate(10px, 0);
  transition: ease-in-out 1s, transform 1s;
  filter:drop-shadow(1px 1px 50px #23c9cf);
  width:210px;
  height:45px;
  
}


.perfnew::before {
  position:relative;
  display:inline-block;
  margin-right:20px;
  margin-left:40px;
  content:"new!";
  filter: 
      drop-shadow(3px 0 1px #aa0e9d)
      drop-shadow(0 3px 1px #aa0e9d)
      drop-shadow(-3px 0 1px #aa0e9d)
      drop-shadow(0 -3px 1px #aa0e9d)
      drop-shadow(3px 0 5px #00c1c7)
      drop-shadow(0 3px 5px #00c1c7)
      drop-shadow(-3px 0 5px #00c1c7)
      drop-shadow(0 -3px 5px #00c1c7);
  font-family:'starborn';
  font-size:20px;
    width:33px;
    vertical-align:middle;
    text-align:center;
    z-index:9999;
    transform:rotate(20deg);
}

.counter{
    filter: 
      drop-shadow(3px 0 0 #fff)
      drop-shadow(0 3px 0 #fff)
      drop-shadow(-3px 0 0 #fff)
      drop-shadow(0 -3px 0 #fff);
}

    a.mzlinks, a.fmbox {    color:#ffcd42;
        text-decoration:none;
        transition: ease-in-out .8s, transform .8s;
        font-family:"Grandstander";
        font-weight:300;
  
    }
    a.mzlinks:hover, a.fmbox:hover{
      cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif'), pointer;
      filter:
        drop-shadow(-1px 0px 3px #126584c1)
        drop-shadow(1px 0px 3px #126584c1)
        drop-shadow(0px -1px 3px #126584c1)
        drop-shadow(0px 1px 3px #126584c1);
                transition: ease-in-out .8s, transform .8s;
                font-weight:900;
  } 

  a.mzlinks{
    font-size:16px;
  }

  a.mzlinks:hover{
    font-size:19px;
  }
  a.fmbox{
    font-size:20px;
  }

  a.fmbox:hover{
    font-size:23px;
  }

  span.beep:hover{cursor:url('https://kkb.online/media/img/cursor_anihand1e.gif'), pointer;
    
  }

  .sticker{
    max-height:90px;
    max-width:100px;
    filter:
    drop-shadow(2px 0px 0px #fff)
    drop-shadow(-2px 0px 0px #fff)
    drop-shadow(0px 2px 0px #fff)
    drop-shadow(0px -2px 0px #fff)
    ;
    padding-left:5px;
    padding-right:5px;
    padding-top:10px;
    padding-bottom:10px;
position:relative;cursor:move;
z-index:200;
opacity:68%;
transition:transform .5s;
}    

  .sticker:hover{
            cursor: move;
            transform:scale(1.3);
            opacity:90%;
            transition: transform .5s;
  }


  .pin{
    max-height:50px;
    max-width:50px;
   filter:
    drop-shadow(2px 0px 3px #ffffff22)
    drop-shadow(-2px 0px 3px #ffffff22)
    drop-shadow(0px 2px 3px #ffffff22)
    drop-shadow(0px -2px 3px #ffffff22)
    ; /*
    padding-left:5px;
    padding-right:5px;
    padding-top:10px;
    padding-bottom:10px;*/
position:relative;cursor:move;
z-index:200;
opacity:68%;
transition:transform .5s;
}    

  .pin:hover{
            cursor: move;
            transform:scale(1.3);
            opacity:90%;
            transition: transform .5s;
  }


.drag{
      position:relative;cursor:hand
}


.treasurebox{
  grid-area:menu;
  margin-left:300px;
  margin-top:400px;
width:800px;
height:200px;
  z-index:9999999;
  opacity:95%;

}

  .corkboard, .corkboardmini{
     z-index:99999999;
    filter:
    drop-shadow(4px 0px 8px #d269e7);
    transition:ease-in-out .8s, transform .8s;
  
  }

  .corkboard{
  transform:rotate(6deg) scale(1.2);
    margin-top:300px;
    margin-left:220px;
    grid-area:head;
    z-index:13;
    position:fixed;
  
    
   
  }
  .corkboardmini{
    transform:rotate(10deg) scale(.5);
    margin-top:100px;
    margin-left:600px;
  }

  .corkboard:hover .corkboardmini:hover{
        transition:ease-in-out .8s, transform .8s;
        opacity:100%;

        

  }

  /*.corkboardani{
                animation: swing 2s ease 0s infinite normal forwards;
                animation-delay:8s;
                
  }*/
  .corkboardani:hover{
animation-play-state:paused;
            }
.corkboardscale{
          transition:ease-in-out .8s, transform .8s;
                   transition-delay:999999s;

}

              .corkboardscale:hover{
              transform:scale(1.2);
          transition:ease-in-out .8s, transform .8s;
                    animation-play-state:paused;
            }

                        .bonkiringdiv { margin: auto; font-family:verdana;}


.opacity1 {
opacity:100%;
transform:scale(1.3);
}