/* 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-color: #E7C4FF;
  color: black;
  font-family: "times new roman";
  text-align: center;

}
div {
  margin:30px auto;
  padding: 15px;
}

box-2{
    width: 500px;
    border: 10px solid #CAC4FF;
    background-color: #FFC4F9;
    margin: 30px auto;
    padding: 15px;
}

p {
    color: black;
    font-size: 1em
}


table, th, td {
  border: 1px solid black;
  border-collapse: collapse
}

#myBox{
    width: 500px;
    height: 100px;
    background: url(Pinkcloud.jpg) no-repeat;
    background-size: cover;
} 
box-1{ 
  border: 10px solid black;
  width: 200px;
  height: 100px;
  background: #f5e6ff;
  text-align: left;
}

topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 20px;
} 


box-luna{
  width: 500px;
    border: 10px solid #CAC4FF;
    background-color: #FFC4F9;
    margin: 30px auto;
    padding: 15px;
}









.scrollbox-1 {
  width: 1000px;
  height: 800px;      /* Define height */
  overflow: auto;     /* Enable scrolling when needed */
  border: 3px solid black; /* Optional: visual border */
  padding: 100px;      /* Optional: inner spacing */
  background-color: #FFC4F9;

}

.scrollbox-2 {
  width: 600px;
  height: 800px;      /* Define height */
  overflow: auto;     /* Enable scrolling when needed */
  border: 3px solid black; /* Optional: visual border */
  padding: 100px;      /* Optional: inner spacing */
  background: #e0ccff;

}




.scrollbox {
  height: 650px;       /* Set a fixed height */
  width: 950px;
  overflow-y: auto;    /* Show scrollbar only when content overflows */
  border: 5px solid #660066;
  padding: 10px;
  margin-bottom: 10px;
  background-image: url(backflow.avif);
}

/*width of scrollbar*/
.scrollbox::-webkit-scrollbar {
  width: 1em;
}

/*color of scroll bar*/
.scrollbox::-webkit-scrollbar-track {
  background: #b3ccff;
}

/*color of scroll button*/
.scrollbox::-webkit-scrollbar-thumb {
  background-image: url(lilheart.png);
  background-size: contain;      /* Ensures the whole image fits inside the thumb */
  background-repeat: no-repeat;   /* Prevents the image from tiling */
  background-position: center;    /* Centers the image within the thumb track */
  outline: 1px solid #b3ccff;
}

.box-one {
  background: #f0e6ff;
}