.genealogy-tree {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
padding: 20px;
}
.tree-node {
background-color: #f3f3f3;
border: 2px solid #ccc;
border-radius: 8px;
padding: 10px 20px;
margin: 10px 0;
font-weight: bold;
text-align: center;
width: 100%;
max-width: 300px;
}
.tree-line {
width: 4px;
height: 20px;
background: #ccc;
}
.tree-button {
margin-top: 20px;
}
.tree-button a {
background: #0073aa;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}
.tree-button a:hover {
background: #005177;
}
@media (max-width: 600px) {
.tree-node {
width: 90%;
font-size: 16px;
}
}