/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: url("http://www.veltron.net/images/cursor.png"), auto;
}

body {
  font-family: "Roboto", arial, serif;
  background: url("http://www.veltron.net/images/wallpaper.png") no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ddd;
}

main {
  background: rgba(17, 17, 17, 0.8); /* Semi-transparent background */
  padding: 2em;
  border-radius: 20px;
  border: dashed 1px #555;
  text-align: center;
  color: #ddd;
}

h1 {
  font-size: 3rem;
  color: lightblue;
  text-shadow: 1px 1px #333;
}

h2 {
  color: goldenrod;
  font-size: 1.5rem;
}

p {
  font-size: 1.2rem;
}

.text-center {
  text-align: center;
}

.pull-right {
  float: right !important;
}

img {
  border-radius: 5px;
  margin-right: 1rem;
}

audio {
  margin-top: 1rem;
}

footer {
  margin-top: 2rem;
  color: #ccc;
  font-size: small;
}

footer a {
  color: turquoise;
  text-decoration: none;
}

footer a:hover {
  color: greenyellow;
}

/* Style the buttons to look like transparent, modern text-based buttons */
.button {
  background: rgba(0, 0, 0, 0.5) !important; /* Half-transparent black background */
  color: #fff; /* White text */
  font-size: 1.5rem; /* Larger font size for better visibility */
  padding: 15px 30px; /* More padding for bigger buttons */
  border-radius: 10px; /* Rounded corners */
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s ease, border 0.3s, box-shadow 0.3s ease; /* Added box-shadow transition */
}

.button:hover {
  background: rgba(0, 0, 0, 0.7) !important; /* Darker black background on hover */
  border: 2px solid rgba(255, 255, 255, 0.7) !important; /* More visible border on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5); /* Soft glowing effect on hover */
}

.button:active {
  background: rgba(0, 0, 0, 0.8) !important; /* Darker background when clicked */
  border: 2px solid rgba(255, 255, 255, 0.9) !important; /* Darker border on click */
  transform: scale(0.98); /* Slight shrink effect on click */
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4); /* Dimmed shadow effect on click */
}

.button:focus {
  outline: none; /* Remove default focus outline */
  border: 2px solid rgba(255, 255, 255, 0.9) !important; /* Focused border */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); /* Focus effect (glowing) */
}



/* Custom CSS for positioning the buttons */
.button-container {
  position: fixed;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10%;
}

.button-container .button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button-container .button img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.button-container .left-button {
  justify-content: flex-start;
}

.button-container .center-button {
  justify-content: center;
}

.button-container .right-button {
  justify-content: flex-end;
}

/* Footer link styles */
footer a {
  color: #fff; /* Keep the text white */
  text-decoration: none; /* Remove underline */
}

footer a:hover {
  color: greenyellow; /* Add hover effect */
}