body {
        background: black;
        align-items: center;
        font-family: Arial, sans-serif;
        --webkit-appearance: none;
}

.main {
        display: grid;
        justify-content: center;
        align-items: center;
        height: fit-content;
}

#family_tree {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
}

.blurred {
        -webkit-transform: translateZ(0);
        -webkit-perspective: 1000;
        -webkit-backface-visibility: hidden;
        filter: blur(7px);
}

.centered {
        position: absolute;
        inset: 0;
        margin: auto;
        height: fit-content;

        text-align: center;
}

.container {
        z-index: 1;
        width: 300px;
        height: fit-content;

        display: grid;
        gap: 0.5rem;

        color: white;
}

.overlay {
        color: white;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 2rem;
        border-radius: 1rem;
        max-width: 500px;
}

.overlay a {
        color: rgb(0, 123, 255);
        text-decoration: underline;
}

.overlay h1 {
        color: rgb(0, 123, 255);
}

input {
        padding: 0.5rem;
        margin: 0.5rem 0;
        border-radius: 6px;
        border: none;
        font-size: 1rem;
        height: fit-content;
}

.form {
        display: grid;
        gap: 0.5rem;
        height: fit-content;
}

h2 {
        margin: 0;
}


button {
        padding: 0.5rem;
        border: none;
        border-radius: 6px;
        cursor: pointer;

        color: white;
        background-color: rgb(0, 123, 255);
        font-size: 1rem;
        height: auto;
}

button:hover {
        background-color: rgb(0, 86, 179);
}

svg {
        background: black;
}

.node {
        fill: lightblue;
}

.parent_child_link {
        stroke-width: 2;

        fill: none;
        stroke: darkgrey;
}

.partner_link {
        stroke: pink;
        stroke-width: 2;
}

.label {
        text-anchor: middle;
        font-size: 10;
}