style.css

* {
	font-family: Arial, Helvetica, sans-serif;
}

body {
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
}


.main {
	width: 100vw;
	height: 100vh;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.imagenNube {
	height: 10em;
	margin-bottom: 1em;
}

.explicacion {
	color: rgb(119, 119, 119);
	font-size: 0.9em;
	text-align: center;
	padding: 0 0.5em;
	margin-bottom: 0.5em;
}

.fila {
	display: flex;
	justify-content: center;
	
	width: 100%;
	max-width: 40em;
}
@media (max-width: 660px) {
	.fila {
		width: 90%;
	}
}

.columna {
	display: flex;
	flex-direction: column-reverse;
	/* margin-right: 1px; */
	
	width: 100%;
}

.bloque {
	cursor: pointer;
	background: rgba(128, 128, 128, 0.1);
	height: 6em;
	min-width: 1em;
	max-width: 5em;
	
	width: auto;
	/* margin-top: 1px; */
	border: 1px solid rgba(0, 0, 0, 0.05);
	
	/* transition: all 0.2s ease-in-out; */
	
}

.bloque-pintado {
	background: grey;
	transition: all 0.2s ease-in-out;
}
.bloque-oculto {
	background: rgba(128, 128, 128, 0.1);
	/* transition: all 0.4s ease-in-out; */
}
.bloque-agua {
	background: rgba(4, 162, 253, 0.973);
	transition: all 1.5s ease-in;
	
	border: 1px solid rgba(4, 162, 253, 0.973);
	animation: agua 2s ease-in-out 0s alternate infinite none;
	
}


.botonVaciarTodo {
	margin-top: 2em;
	padding: 0.5em;
	width: 20em;
}



@keyframes agua {
  	0% {
		background:rgba(4, 162, 253, 0.973);
		border: 1px solid rgba(4, 162, 253, 0.973);
	}
	100% {
		background:rgba(54, 180, 253, 0.973);
		border: 1px solid rgba(54, 180, 253, 0.973);
	}
}