@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; }
/* ==================================================================================== */

.welcome {
	background: linear-gradient(#2253, #222), url("bg.png");
	text-align: center;
}
.welcome h1 { font-size: 48px; margin-bottom: 0; }
.welcome p { font-size: 24px; }

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

/* Externo */
.winaero-titlebar span { color: #f0f0f0; }

/* Estilos Single-Line */
.title { border-bottom: 1px solid gray; }
.xtitle { color: #f0f0f0; }
#proyectos { letter-spacing: 2px; }

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

.notes { image-rendering: optimizeSpeed; }
.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; }
	.welcome h1 { font-size: 48px; }
	.welcome p { font-size: 20px; }
	.card { width: 98%; }
}