@import url('https://fonts.googleapis.com/css2?family=Unica+One&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Pixelify+Sans&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

*{box-sizing: border-box;}

body {
	font-family: 'Unica One';
	color: rgb(255, 255, 255);

	text-align: center;
	
background-color:rgb(0, 0, 0);
	margin: 0;

}

h1{	font-family: 'Unica One';}
h2, h3, h4, h5, h6{
	
font-family: 'Unica One';
margin-top: 6px;
margin-bottom: 6px;}

p {
	display: flex;
	max-width: 100%;

	color: rgb(255, 255, 255);
	;
	align-items: center;
	justify-content:center ;
	font-family: 'Unica One';
	font-size: 18px;
	margin-left: 10px;
	 
}

p span {
	background-color: rgb(0, 0, 0);
	line-height: 1;

}

.cont-header {
	margin: 20px;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
    background-image: linear-gradient(135deg, #121211 10%, #000000 100%);
    border-radius: 10px;
}


.cont-header-titulo {
	margin: 10px;

	flex: 90%;
}


/* Estilo para el botón de reproducción */
.btn-primary.play-button {
    background-color: transparent; /* Fondo transparente */
    color: rgb(85, 79, 79); /* Texto en color gris */
    border: 1px solid rgb(247, 246, 246); /* Borde negro sólido */
    border-radius: 6px; /* Bordes redondeados */
    padding: 4px 10px; /* Espaciado interior */
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
	font-size: 14px;
}

/* Cambia el estilo al pasar el ratón sobre el botón */
.btn-primary.play-button:hover {
    background-color: black; /* Fondo negro */
    color: white; /* Texto en color blanco */
}
/* Estilo para el botón Play/Pause */
.control-btns {
    display: flex;
    justify-content: center;
}

.play-pause-button {
    background-color: rgb(0, 0, 0); 
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}


/* Estilo para el control de volumen */
.volume-control {
    display: flex;
    justify-content: center;
    align-items: center;
}

.volume-control input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 5px;
    border-radius: 5px;
    background: linear-gradient(to right, red, white); /* Cambiado a degradado rojo a blanco */
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.volume-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: red; /* Cambiado a rojo */
    cursor: pointer;
}

::-webkit-scrollbar {
    display: none;
}