/* MAIN.CSS - Regras compartilhadas para o conteúdo principal (<main>)
   Centraliza estilos usados por index.html e sobre.html para facilitar manutenção
*/

main {
	flex: 1;
	/* Largura máxima para alinhar com .page-container e footer */
	max-width: 1200px;
	margin: 0 auto;
	/* Espaço extra entre o conteúdo principal e o footer */
	margin-bottom: 40px;
	padding: 20px;
	background: rgba(17, 17, 17, 0.8);
	border-radius: 15px;
	border: 2px solid #0099ff;
	box-shadow: 0 0 20px rgba(0, 153, 255, 0.3);
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 32px;
	overflow-x: hidden;
}

/* Seções internas do main */
main section,
main > section {
	margin: 0;
	padding: 20px;
	background: rgba(26, 26, 26, 0.5);
	border-radius: 10px;
	border-left: 5px solid #0099ff;
	transition: all 0.3s ease;
}

main section:hover {
	background: rgba(26, 26, 26, 0.8);
	border-left-color: #ff8800;
	box-shadow: 0 0 10px rgba(255, 136, 0, 0.2);
}

main section:nth-child(odd) { border-left-color: #0099ff; }
main section:nth-child(even) { border-left-color: #ff8800; }
main section:nth-child(even):hover { border-left-color: #0099ff; }

h2 {
	color: #0099ff;
	margin: 0 0 20px 0;
	font-size: 1.5em;
	text-shadow: 0 0 10px rgba(0, 153, 255, 0.5);
	display: flex;
	align-items: center;
	gap: 10px;
}

main section:nth-child(even) h2 {
	color: #ff8800;
	text-shadow: 0 0 10px rgba(255, 136, 0, 0.5);
}

ul, ol { padding-left: 30px; margin: 15px 0; }
li { margin-bottom: 12px; line-height: 1.8; }

code {
	background: #0a0a0a;
	padding: 4px 8px;
	border-radius: 5px;
	color: #00ddff;
	border: 1px solid #00ddff;
	font-weight: bold;
}

img {
	width: 100%;
	max-width: 400px;
	border: 3px solid #0099ff;
	border-radius: 10px;
	margin: 20px 0;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}

img:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(0,153,255,0.5); }

p, li { line-height: 1.8; color: #eaeaea; font-size: 1.05em; }

strong { color: #00ddff; font-weight: bold; }

a { color: #ff8800; text-decoration: none; font-weight: bold; transition: all 0.3s ease; padding: 2px 4px; border-radius: 3px; }
a:hover { color: #0099ff; text-decoration: underline; }
a:focus { outline: 2px solid #0099ff; outline-offset: 2px; }

/* Listas de Mecânica e cards usados no conteúdo principal */
.mecanica-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0; }
.mecanica-item { background: rgba(0,153,255,0.1); border: 2px solid #0099ff; border-radius: 8px; padding: 15px; text-align: center; transition: all 0.3s ease; }
.mecanica-item:hover { background: rgba(0,153,255,0.2); box-shadow: 0 0 15px rgba(0,153,255,0.3); }
.mecanica-item.vegeta { border-color:#0099ff; background:rgba(0,153,255,0.15); }
.mecanica-item.goku { border-color:#ff8800; background:rgba(255,136,0,0.15); }
.mecanica-item.fundo { border-color:#222; background:rgba(17,17,17,0.15); }
.mecanica-item.highlight { border-color:#00ddff; background:rgba(0,221,255,0.15); }

/* Tech stack cards */
.tech-stack { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:15px; margin:20px 0; }
.tech-item { background: rgba(255,136,0,0.1); border:2px solid #ff8800; border-radius:8px; padding:15px; text-align:center; transition: all 0.3s ease; }
.tech-item:hover { background: rgba(255,136,0,0.2); box-shadow: 0 0 15px rgba(255,136,0,0.3); }

.flow-diagram { background: rgba(0,153,255,0.1); border:2px solid #0099ff; border-radius:8px; padding:20px; text-align:center; font-weight:bold; color:#00ccff; margin:20px 0; font-size:1.1em; }

.credits-section { text-align:center; padding:30px; background: linear-gradient(135deg, rgba(0,153,255,0.1), rgba(255,136,0,0.1)); border-radius:10px; border:2px solid #0099ff; margin-top:40px; }
.credits-section p { margin:10px 0; font-size:1.1em; }
.credit-title { justify-content:center; margin:0 0 15px 0; display:flex; }
.credit-note { font-size:0.9em; margin-top:15px; padding-top:15px; border-top:2px solid rgba(0,153,255,0.3); }

@media (max-width: 768px) {
	main { padding: 20px; border-radius: 10px; }
	main section { padding: 15px; margin-bottom: 30px; }
	h2 { font-size: 1.2em; }
	p, li { font-size: 0.95em; }
	img { max-width: 100%; }
	.mecanica-list, .tech-stack { grid-template-columns: 1fr; }
	.credits-section { padding: 20px; }
	.credits-section p { font-size: 0.95em; }
}