/* 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 {
  /*Basic Stuff*/
  background-image:url(stars4.gif);
  
  color:#85DE8E;
  font-family: Helvetica;
  
  
 
}
/*Home Button*/
.home-button {
  position: fixed;      /* fixed = stays on screen while scrolling */
                        /* change to 'absolute' if you want it to scroll with the page */
  top: 20px;            /* distance from the top — adjust this */
  left: 20px;           /* distance from the left — adjust this */
  z-index: 999;         /* keeps it on top of other elements */
  display: inline-block;
  text-decoration: none;
}

.home-button img {
  width: 150px;          /* classic Neocities button size! change as needed */
  height: auto;
  border: none;
  
  /* optional: little bounce on hover */
  transition: transform 0.15s ease;
}

.home-button:hover img {
  transform: scale(1.1);
}
.fixed-bottom-image {
  position: fixed;
  bottom: -20%;
  left: 50%;
  width: 1700px;
  height: auto;
  transform: translateX(-50%);
}

/* == ABOUT ME BUTTON == */

.about-button {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
  display: inline-block;
  text-decoration: none;
  width: 88px;              /* moved here from the img rule */
}

.about-button img {
  width: 100%;              /* inherits width from parent */
  height: auto;
  border: none;
  transition: transform 0.15s ease;
}

.about-button:hover img {
  transform: scale(1.1);
}

.side-button {
  position: fixed;
  top: 70%;
  right: 0px;
  transform: translateY(-50%);  /* this is what centers it perfectly vertically */
  z-index: 999;
  display: inline-block;
  text-decoration: none;
}

.side-button img {
  width: 700px;        /* adjust to whatever size you need */
  height: auto;
  border: none;
  transition: transform 0.15s ease;
}

.side-button:hover img {
  transform: scale(1.1);
}