/* 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 {
  font-family: Verdana;
  font-size: 10px;
  line-height : 10px;
}

html, body {
  cursor: url('images/01.png'), auto;

}

.fixed-img {
  /* Resize the image */
  width: 100px;     /* Change this to your preferred width */
  height: auto;     /* Keeps the natural proportions of the image */
  display: block;          /* Makes the image a block element */
  margin-left: auto;       /* Auto space on the left */
  margin-right: auto;      /* Auto space on the right */
  margin-top: 100px

}.fixed-img figcaption {
  margin-top: 5px;       /* Adds spacing between image and text */
  text-align: center;     /* Centers text alignment */
} .fixed-img {
  display: flex;
  flex-direction: column; /* Stacks items vertically */
  align-items: center;    /* Centers the text horizontally */
  width: 100px;           /* Optional: Limits the width of the card */
  margin: 0 auto;         /* Optional: Centers the entire container */
  transform: translateY(100px); /* Moves the image an additional 100px down */
}

.scroll-box {
  width: 500px;         /* Defines the box width */
  height: 100px;        /* Forces a constraint so text must scroll */
  overflow-y: auto;     /* Adds a vertical scrollbar only when needed */
  padding: 15px;        /* Spaces text away from the box edges */
  border: 1px solid #333;
  background: url('your-image.jpg') no-repeat center/cover;

}

.scrollable-container {
/* Container handles the scrolling limit */
  max-height: 400px; /* Adjust this value to set the table height */
  overflow-y: auto;  /* Enables vertical scrolling */
  border: 1px solid #ccc; 
}

/* Keeps the header pinned at the top while scrolling */
th {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* A solid background color prevents text overlapping */
  z-index: 1; /* Ensures the header stays on top of table rows */
}

/* Optional styling for a cleaner look */
table {
  width: 100%;
  border-collapse: collapse;
}

.pixel-button {
  /* Forces a sharp, non-blurry look for pixel art */
  image-rendering: pixelated; 
  /* Shifts the image 50px down from its original spot */

}