html, body {
  height: 100%;
  margin: 0;
  font-family: 'font';
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center; /* Add text-align: center to center inline elements */
}

body {
  cursor: url('main_large.png'), auto;
  background-image: url('https://i.imgur.com/DjZTkEt.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

* {
  cursor: url('main_large.png'), auto;
  -webkit-animation: cursor 600ms infinite;
  animation: cursor 600ms infinite;
}

@-webkit-keyframes cursor {
  50% {cursor: url('main_large2.png'), auto;}
  75% {cursor: url('main_large1.png'), auto;}
} 

@keyframes cursor {
  50% {cursor: url('main_large2.png'), auto;}
  75% {cursor: url('main_large1.png'), auto;}
}



.buttonslist-container {
  position: relative;
  width: 50%; /* Adjust the width as needed */
  height: auto; /* Adjust the height as needed or remove it for proportional scaling */
  margin: 0 auto; /* Center the container horizontally */
}
.buttonslist-container img {
      max-width: 50%; /* Make the image scale with the container */
      height: auto; /* Maintain the image's aspect ratio */
      display: block; /* Remove any extra spacing below the image */
      margin: 0 auto; /* Center the image horizontally */
      opacity: 0.75;
    }
    
  


.button-list {
  position: absolute;
  list-style: none;
  text-align: center;
  top: 8px;
  left: 146px;
  padding: 10px 12px; 
  font-size: 30px; 
  vertical-align: top; 
  color: white;
}

.button-list li {
  margin: 10px;
}

.image-container {
  position: relative;
  height: auto; /* Adjust the height as needed or remove it for proportional scaling */
  margin: 0 auto; /* Center the container horizontally */
}

.overlay-text {
  position: absolute;
  top: 8px;
  left: 16px;
  padding: 10px 12px; 
  font-size: 30px; 
  vertical-align: top; 
  text-align: left; 
  color: white;
}