/* 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-image: url(star.png);}


        p {
            font-family: Courier, sans-serif;
            font-size: 16px;
            color: #451B57;
            line-height: 1.5;
        }
        
        h1 {
  color: #6C1B82; /* Dark gray text color */
  font-family: 'Courier', sans-serif; /* Font style */
  font-size: 2.5rem; /* Large font size */
  text-align: left; /* Center alignment */
  margin-bottom: 10px; /* Space below the header */
}
  
body {
    /* Add a background image or color to see the transparency effect */
    background-color: #f0f0f0; 
}

.text-container {
    
    background-color: rgba(215, 152, 235, 0.5); 
    
    padding: 5px;
    border: 1px solid black;
    color: #FFFFFF; /* White text for contrast */
    font-weight: bold;
}
    


.my-button {
  background-color: #804EAD; 
  border: none; /* Remove default border */
  color: white; /* White text color */
  padding: 15px 32px; /* Space between text and border */
  text-align: center; /* Center the text */
  text-decoration: none; /* Remove underline for links */
  display: inline-block; /* Allows for sizing and alignment */
  font-size: 16px; /* Increase font size */
  cursor: pointer; /* Change mouse cursor to a hand on hover */
  border-radius: 8px; /* Rounded corners */
  transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.my-button:hover {
  background-color: #AA7ACF; /* Darker green on hover */
}

.my-button:active {
  transform: translateY(1px); /* A slight push effect when clicked */
}

.bat.gif {
    float: right; /* or left */
    margin: 10px; /* Space around the GIF */
}