html{
	width: 100%;
}
*{
	margin: 0px;
}
h1{
	box-shadow: 0px 2px 0px #FFF;
	margin: 0px;
	width: 100%;
	background-color: black;
	color:#FFF;
	text-align: center;
}
p{

	width: 100%;
	text-align: center;
}
.fecha{
	margin-left: 15%;
	margin-right: 18%;
	display: inline;
}
#historial{
	background-color: rgba(204, 197, 184, 1);
	width: 94%;
	min-height: 30px;
	float: left;
	color: white;
	margin-left: 2.5%;
	margin: 0px auto 0px 2.5;
	border-radius: 8px;
	border-style: dashed;
}
#numero{
	padding-top: 8px;
	padding-bottom: 8px;
	margin: 10px auto;
	border-radius: 10px;
	border-style: solid;
	height: 35px;
	font-size: 2rem;
	background-color: #E3E1E1;
	width: 95%;
	text-align: center;
}
#mas{
	border-radius: 8px;
	height: 60px;
	font-size: 2.3rem;
	width: 95%;
	background-color: black;
	color:white;
	text-align: center;
	padding-top: 20px;
	margin: 8px auto;
	border-style: outset;
}
#clear{
	margin-top: 3px;
	float: left;
	border-radius: 8px;
	height: 50px;
	font-size: 2rem;
	width: 95%;
	background-color: black;
	color:white;
	text-align: center;
	margin-bottom: 8px;
	padding-top: calc(4%);
	margin-left: 2%;
	border-style: outset;
}
#menos, #reset{
	margin-bottom: 3px;
	margin-left: 3%;
	border-radius: 8px;
	height: 35px;
	font-size: 1.2rem;
	text-align: center;
	color:white;
	width: 44%;
	background-color: black;
	border-style: outset;
	float: left;
	padding-top:10px;
}
#menos:hover, #reset:hover, #mas:hover, #clear:hover{
	animation:boton 0.5s forwards;
}
body{
	width: 100%;
	background-color:#FFF;
	background-image: url("pattern.png");
}
@keyframes boton {
  0%   { color:white;
background-color: black; }
  50% { background-color: white;
color: black; }
  100%   { color:white;
background-color: black;  }
}