/* 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: black;
  background-image: url("https://rennerding.neocities.org/flowery2.png");
  background-size: 1980px 1080px;
  color: black;
  font-family: 'Anonymous Pro', monospace;
  text-align: center;
  font-size: 20px
  
  cursor: url("https://rennerding.neocities.org/leaf.png"), default;

}

.container {
  text-align: center; /* Centers the list block within its parent */
}

ul {
  display: inline-block; /* Makes the list block behave like an inline element, so text-align: center affects it */
  text-align: left; /* Aligns the text and bullets to the left within the list's new, centered block */
  /* Optional: remove default padding/margin for consistency */
  padding-left: 0; 
  margin: 10px auto; 
}

/* Style links */
a {
  color: #064f2f;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #5eb55b;
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
  header {
    font-size: 1.2rem;
  }
}

.box {
              /* Sets the height of the box */
    background-image: url("https://rennerding.neocities.org/graphpaper.jpg");
    padding: 50px;            /* Adds space between content and border */
    display: inline-block;
    margin-right: 500px;
    margin-left: 500px;
    margin-top: 100px;
    margin-bottom: 100px;
    box-sizing: border-box;   /* Ensures padding and border are included in the defined width/height */
}

/* image stuff */
.float-left {
  float: left;
  margin-right: 15px; /* Adds space between the image and text */
  
  
}


.image-hover {
  transition: transform 0.3s ease-in-out; /* Smooth transition */
}

.image-hover:hover {
  transform: scale(1.1); /* Zooms image to 110% */
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  width: 130px;
  bottom: 100%;
  margin-left: -117px;
  
  visibility: hidden; /* Hidden by default */
  background-color: black;
  opacity: 0.5;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}