/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('assets/glitter-bg.gif');
  background-attachment: fixed;
  background-repeat: repeat;
  font-family: 'Poppins', sans-serif;
  color: #4B0082;
}

.toy-box {
    position: relative;
    width: 50vh;
    height: 50vh;
    /* Fill most of the screen */
    /*border: 3px dashed #ff66cc;*/
    /*background-color: #fff8ff;*/
}

.draggable {
    position: absolute;
    width: 80px;
    cursor: grab;
    user-select: none;
}

/*.scroll-container {*/
/*  position: relative;*/
/*  width: 150vw;*/
/*  height: 150vh;*/
  /*background-image: url('assets/test2.png');*/
  /*background-size: cover; */
/*  background-repeat: no-repeat;*/
/*  background-position: center;*/
/*}*/

.scroll-container {
  position: relative;
  display: inline-block; /* shrink-wraps around the image */
}

.bg-img {
  display: block;
  max-width: 100%; /* scales with window */
  height: auto;
}


.scroll-box {
  position: absolute;  /* position relative to the page or nearest relative parent */
  top: 320px;           /* distance from the top */
  left: 220px;          /* distance from the left */
  width: 530px;
  height: 450px;
  overflow-y: scroll;
}

.bottom-right-img {
  position: fixed;   /* stays in place even when scrolling */
  bottom: 20px;      /* distance from bottom */
  right: 20px;       /* distance from right */
  width: 200px;      /* adjust size */
  height: auto;
  z-index: 9999;     /* make sure it's on top of other content */
}

.custom-img {
  position: absolute;   /* stays in place even when scrolling */
  top: 240px;      /* distance from bottom */
  left: 490px;       /* distance from right */
  width: 200px;      /* adjust size */
  height: auto;
  z-index: 9999;     /* make sure it's on top of other content */
}

/* Chrome, Edge, Safari */
.scroll-box::-webkit-scrollbar {
  width: 12px; 
}

.scroll-box::-webkit-scrollbar-track {
  background: rgba(255, 230, 242, 0.5); /* light pink transparent */
  border-radius: 10px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background: rgba(255, 105, 180, 0.5); /* hot pink transparent */
  border-radius: 10px;
}

.scroll-box::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 51, 153, 0.5);  /* darker pink on hover, transparent */
}