body {
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Centrar verticalmente */
  text-align: center;
  width: 100%;
  height: 100%;
}

.content::before {
  content: "";
  background-image: url('/img/fondopagina.jpg'); /* Reemplaza con la ruta de tu imagen */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9; /* Ajusta este valor para cambiar la transparencia */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.top-text {
  margin-bottom: 10px;
  font-size: 14px;
  color: white;
}

.top-text p {
  margin: 0;
}

.logo {
  margin-bottom: 10px;
  font-size: 36px;
  letter-spacing: 10px;
  color: white;
}

#reproductor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#reproductor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 250px;
  background-image: url("/img/fondomedio.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 2px solid white; /* Borde blanco */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#playBtn {
  font-size: 48px;
  color: white;
  cursor: pointer;
  padding: 10px;
}

#playBtn:hover {
  color: #ff0000;
}

#volumeControl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px; /* Ajustar el ancho para que coincida con el reproductor */
  margin-top: 10px; /* Reducir el margen superior */
}

#volumeControl input[type='range'] {
  width: 80%;
}

#trackInfo {
  text-align: center;
  margin-top: 20px;
}

#trackTitle {
  font-size: 16px;
  color: #333;
}

.footer {
  margin-top: 10px;
  font-size: 14px;
  color: white;
}

.footer-contact {
  margin-top: 20px;
  font-size: 14px;
  color: white;
}

/* Estilos para botones de redes sociales añadidos aquí */
.social-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
}

.social-button .logo {
  font-size: 20px;
  margin-right: 8px;
}

.social-button.twitter {
  background-color: #1DA1F2;
}

.social-button.facebook {
  background-color: #4267B2;
}

.social-button i {
  margin-right: 8px;
}

.social-button.programming {
  background-color: #4CAF50; /* Un color verde para el botón de tarifas */
}

@media (max-width: 768px) {
  .social-buttons {
    align-items: center; /* Centra los botones en móviles */
  }
}

/* Estilos para el footer */
.site-footer {
  background-color: black; /* Color de fondo negro */
  color: white; /* Color del texto */
  padding: 20px;
  text-align: center;
  font-size: 14px;
  border-top: 1px solid #ddd; /* Borde superior para definir el footer */
}

.created-by img {
  width: 100px;
}

.direccion {
  margin-top: 20px;
}

.direccion h3 {
  color: white;
}

.direccion p {
  color: white;
}

h1 {
  font-size: 48px; /* Tamaño de fuente grande */
  font-weight: bold; /* Texto en negrita */
  color: white; /* Un color llamativo, por ejemplo, naranja */
  text-transform: uppercase; /* Transformar el texto a mayúsculas */
  text-align: center; /* Centrar el texto */
  margin-top: 20px; /* Añadir espacio en la parte superior */
  margin-bottom: 20px; /* Añadir espacio en la parte inferior */
}