@font-face {
    font-family: rainyhearts;
    src: url('/fonts/rainyhearts.TTF');
  }
  @font-face {
    font-family: bb;
    src: url('/fonts/04B_30__.TTF')
  }
  @font-face {
    font-family: rounded;
    src: url('/fonts/SF-Pro-Rounded-Bold.TTF')
  }

  body {
    font-family: rainyhearts;
    background-color: #fff;
    color:#C49B84;
    padding: 40px;
    margin: 0 auto;
    font-size: 16px;
    text-shadow: 0 4px 7px #ffbdb3;
  }
  body a {
    font-family: rounded;
    letter-spacing: 2.4px;
    color:pink;
    text-underline-offset: 6px;
    font-size:14px;
  }

  body a:hover {
    color: #fff;
    text-shadow: 0px 0px 9px #ff5f6a;
    
  }
    h1,h2,h3 {
    font-family: bb;
    letter-spacing: 3px;
    line-height:27px;
  }
 a h3 {
  color:#C49B84;
 }
  h1 {
      text-shadow: 0 0 4px #ff9385, 0 0 9px pink;
  }
  /* width */
::-webkit-scrollbar {
    width: 20px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 5px grey;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background-image: url('https://i.postimg.cc/pTcZz8jw/bg-gin4-gra.gif');
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #5151518c;
    background-blend-mode: darken;
    background-image: url('https://i.postimg.cc/pTcZz8jw/bg-gin4-gra.gif');
  }
    .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .title {
font-family: rounded;
width:75%;
padding: 15px;
background-image:url('https://i.postimg.cc/nL0Yf73X/bg_gin5_pink1.gif');
box-shadow:0 -1.4px 1px inset rgb(158, 150, 153), 2px 3px 1.5px inset rgb(255, 255, 255), 0px 0px 2px rgb(171, 164, 166);
font-weight:900;
font-size:22px;
letter-spacing:1px;
text-transform:uppercase;
text-align: left;
color:white;
text-shadow:1px 1px 2px #333, 0 0 25px #F9D0DC, 0 0 5px #F9C0CF;
Border-radius: 12px;
} 
    .tooltip {
    display: block; 
    position:relative;
    margin-left: 35%;
  }
  
  .tooltip .tooltiptext {
   
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }

  .box {
   
    background-size: 25%;
    width:90%;
    padding:20px;
    border-radius: 9px;
    margin:12px;
    box-shadow: 0px 5px 7px inset #ffffff4c,  -1px -1px 1px inset #ffb1dc, 0 -8px 9px #00000038 inset;
  }

  table {
  width: 100%;
  margin: 0 auto;
  margin-top:10px;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  border-radius:5px;
  font-weight:normal;
}
th img {
  margin-right: auto;
  margin-left: auto;
}

tr:nth-child(even) {
  background-color: #fab4bc3f;
}