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

html {
	
	width:100%
}

body {
	padding:0;
	margin:0;
	font-family: Lato;
}

h1 {
	text-align: center;
	padding: 2vh;
	font-size: 250%;
	font-family: 'Oswald';
}

h2 {
	font-family: Lato;
	font-size: 200%
}

.instrucciones {
	width: 40%;
	margin:auto
}

.container{
	display:flex;
	align-items:center;
	justify-content:center;
	width:80%;
	margin:auto
}

.colores {
	width:30%;
	margin:0;
}

.imagen {
	min-width:45%;
	max-width:69%;
}

.imagen svg {
	width: auto;
	border:1px solid #eee
}

.footer{
	text-align:center;
	background: #FE7A15;
	padding:1% 0;
	margin-top:3%;
	width:100%;
	color:white;
}

path, #escalagrises {
	cursor:pointer;
}

.footer p a{
	color:white;
	transition:.5s;
}

.footer p a:hover{
	color:#F8D90F;
}

#quearmonia{width:80%;margin:auto;display:flex;border:0;border-bottom:2px solid black;font-size:200%;text-align:center}
#escalagrises{height:50px;width:80%;margin:auto;display:flex}
#blanco{height:100%;width:16.6%;border:1px solid #ddd}
#gris1{height:100%;width:16.6%;border:1px solid #ddd;background: #ddd}
#gris2{height:100%;width:16.6%;border:1px solid #aaa;background: #aaa}
#gris3{height:100%;width:16.6%;border:1px solid #777;background: #777}
#gris4{height:100%;width:16.6%;border:1px solid #555;background: #555}
#negro{height:100%;width:16.6%;border:1px solid #000;background: #000}