* {
	margin: 0;
	padding: auto;
}

#nav-bar {
	position: sticky;
	top: 10;
	z-index: 10;
}

.nav-bar {
	background-image: linear-gradient(to right);
	padding: 0 !important;
}

.navbar-brand img {
	height: 70px; /* Ajuste a altura */
	width: auto; /* Ajuste a largura automaticamente, mantendo a proporção */
}

.carousel-img {
	object-fit: cover;
	height: 65vh;
}

@media (max-width: 768px) {
	.carousel-img {
		height: 100vh;
	}
}

/*------------Banner section------------*/

#banner {
	padding-top: 5%;
}

.promo-title {
	font-size: 40px;
	font-weight: 600;
	margin-top: 100px;
}

.play-btn {
	width: 45px;
	margin: 20px;
}

/*------------Simulator section------------*/

.simulation-container {
	background-color: #fdfdfd;
	border-radius: 12px;
	padding: 2rem;
	max-width: 900px;
	margin: 2rem auto;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.simulation-container h2 {
	margin-top: 0;
	color: #2c3e50;
}

.form-section {
	margin-bottom: 2rem;
}

textarea#pedigreeInput {
	width: 100%;
	height: auto;
	font-family: monospace;
	font-size: 0.95rem;
	padding: 1rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
	resize: vertical;
	background-color: #fefefe;
}

.input-group {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.simulate-button {
	margin-top: 1rem;
	background-color: #2c3e50;
	color: white;
	padding: 0.6rem 1.2rem;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.simulate-button:hover {
	background-color: #34495e;
}

.output-section {
	margin-top: 2rem;
}

.output-text {
	background-color: #fafafa;
	padding: 1rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-family: monospace;
	white-space: pre-wrap;
}

.heatmap {
	margin-top: 2rem;
	height: 500px;
}