@font-face {
    font-family: 'KleeOne-Semibold';
    src: url('KleeOne-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    overscroll-behavior: none;
}  

body {
  margin:0;
  overflow: hidden;
  background-image:url("/journal/bratz-sleepover_upscaled.jpg");
  background-repeat:no-repeat;
  background-size:1600px auto;
  font-family: 'KleeOne-Semibold', sans-serif;
  font-size: 16px;
  
}

b {
  color: #FF46A2;
}

.page-wrapper{
position: relative;
width: 700px;
margin-left: 40px;
margin-top: -20px; /* Nudges the entire layout up by 20 pixels */
}

.blog-links{
  position: absolute;
  top: 100px;
  left: 70px;
}

.blog-content {
  position: absolute;
  top: 68px;
  left: 370px;
  width: 250px;
  height: 400px;
  overflow-y: auto;
}
  

  [id] {
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  

  [id]:target {
    scroll-margin-top: 100vh; 
    height: auto;
    visibility: visible;
  }

.sticker {
  position: absolute;
  top: 0;
  left: 0;
  width: 700px;
}

a {
  color: black;
  text-decoration: none;
}

a:hover, 
a:active {
  color: #FF46A2; 
}

.credits-link {
  color: #FF46A2;
}

.tooltip {
  display: inline-block;
  background-image: url("/journal/bratz-lip-glitter.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  position: relative; 
  
  width: 160px;
  height: 160px;
  vertical-align: middle;
}

.tooltip-text {
  visibility: hidden;
  width: max-content;
  background-color: #8558a3;
  color: white;
  text-align: center;    
  font-family: 'KleeOne-Semibold', sans-serif;
  border-radius: 5px;
  padding: 5px;
  position: absolute; 
  z-index: 1;

  top: 80%;
  left: 100%;
  transform: translateX(-50%);
  
  opacity: 0;
  transition: opacity 0.3s;
  border: 2px solid white;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}