@charset "utf-8";
/* CSS Document */

/* CSS Document */

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

.signboard {
	width: 400px;  /* ANCHO DEL CARTEL */
	height: 150px;
	position: relative;
	animation: swinging 1.5s ease-in-out infinite alternate;
  transform-origin: 200px 13px;

}


.sign {   /*  LETRERO  */
	width: 46%; /* ANCHO DEL LETRERO  */
	height: 80px;
	 background-image: url("../images/papiro3.png"); /* foto de fondo  */

	
  background-size:100% 100%;
position: absolute;
	bottom: 50;
	left: 25%;
	top: 20%;
	font-size: 27px;
	color: saddlebrown;
font-family: 'Pirata One', cursive;
font-weight: 600; /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  /* tamaño del texto*/
letter-spacing: 0.2px; /* espacio entre cada letra*/
	text-align: center;
	line-height: 87px;

}

.sign:hover {
filter: drop-shadow(0px 0px 40px red);
    }

.strings {  /* cuerda*/
	width: 60px;
	height: 60px;
	border: 3px solid brown;
	position: absolute;
	border-right: none;
	border-bottom: none;
	transform: rotate(45deg);
	top: 16px;
	left: 160px;
}

.pin {  
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: absolute;
}



.pin.top {
	background: gray;
	left: 187px;
	
}

.pin.left,
.pin.right {
	background: brown;
	top: 40px;
	box-shadow: 0 2px 0 rgba(255, 255, 255, 0.3);
}

.pin.left {
	left: 146px;
}

.pin.right {
	right: 167px;  /* ubicacion del boton rojo derecho*/
}

@keyframes swinging {
	from {
		transform: rotate(10deg);
	}

	to {
		transform: rotate(-10deg);
	}
}