@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

body {
	background: #222;
	font-family: 'Google Sans';
	color: #f0f0f0;
	margin: 0;
	padding: 0;
}

/* Header */
.header { background: #333; color: white; display: flex;
	justify-content: space-between; align-items: center; border-bottom: 2px solid white;
}
.htitle { padding-left: 1%; }
.htitle img { transform: translateY(7px); }
.header a { color: white; text-decoration: none; margin: 0 15px; }
.header a:hover { border-bottom: 3px solid #09f; }
/* ==================================================================================== */

.BX {
	background: #09f;
	color: white;
	text-decoration: none;
	font-weight: bold;
	padding: 8px 16px;
	border-radius: 2px;
	transition: 200ms;
} .BX:hover { background: #05f; }

/* Externo */

/* Estilos Single-Line */
.top-banner {
	background: url("https://elmichiyt.github.io/src/images/classicube/geometric.png"), #09f;
	text-align: center;
}
.top-banner p, h1 { margin-top: 0; margin-bottom: 0; }
.title { border-bottom: 1px solid gray; }
a { color: #09f; text-decoration: none; }
a:hover { color: #05f; text-decoration: underline; }


.main {
	width: 90%;
	margin: 0 auto;
}

.card img { text-align: center; }
.card {
	width: 90%;
	border: 2px solid gray;
	border-radius: 16px;
	margin: 0 auto;
	padding: 0 16px;
	transition: 300ms;
}
.card:hover {
	box-shadow: 0 0 8px 8px #111;
	scale: 1.01;
	transform: translateY(-2px);
}

@media screen and (max-width: 767px) {
	.main { width: 98%; }
	.htitle { padding-left: 4%; }
	.header a { color: white; text-decoration: none; margin: 0; }
	.card { width: 98%; }
}