h1{font-size:2rem}h2{font-size:1.5rem}p{font-size:16px}body{font-family:Arial,sans-serif;background-color:#f4f2ef;color:#333;line-height:1.6}header{text-align:center;padding:20px}header h1{margin:0;color:#6b5b95}nav{display:flex;justify-content:center;padding:10px 0;background-color:#6b5b95}nav a{color:#fff;text-decoration:none;padding:10px 20px}nav a:hover{background-color:#563d7c}#family-tree{margin:20px;padding:20px;border:2px solid #6b5b95;border-radius:8px}footer{text-align:center;padding:20px;background-color:#333;color:#fff}@media (max-width: 600px){nav{flex-direction:column}nav a{padding:10px}}:root{--background-skeleton-color: #ddd;--shine-color: #e8e8e8;--animation-duration: 1.6s;--avatar-offset: 52 + 16}g [disabled]{cursor:auto;color:#3a3a4b50}.skeleton{background-color:var(--background-skeleton-color);background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) var(--background-skeleton-color);background-size:200% 100%;background-position-x:180%;animation:1s loading ease-in-out infinite}@keyframes loading{to{background-position-x:-20%}}