* {
     font-family: Tahoma, Arial, Helvetica, sans-serif;
 }

/* Body with flexbox to center the whole layout */
body, html {
    background-color: #efefef;
    color: #000000;
    text-color: #000000;
    height: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center; /* Center vertically */
}

 #coordinates {
     position: fixed;
     bottom: 10px;
     left: 10px;
     padding: 10px;
     background-color: rgba(0, 0, 0, 0.7);
     color: white;
     border-radius: 5px;
     font-size: 16px;
 }

/* Root container with grid layout */
.family-tree {
    max-width: 1800px;
    display: grid;
    grid-template-areas:
                "siblings parents spouses"
                "siblings selected spouses"
                "siblings children spouses";
    grid-template-rows: 250px 400px 250px; /* Adjusted heights for rows */
    /*grid-template-columns: 1fr 2fr 1fr; !* Make middle column larger *!*/
    grid-template-columns: 25% 50% 25%; /* Make middle column larger */
    grid-gap: 20px;
    width: calc(100% - 100px);
    height: auto;
    padding: 20px;
    /*border: 2px solid red;*/
}

/* Divs for each section */
.parents {
    grid-area: parents;
    /*border: 2px solid red;*/
    padding: 10px;
    display: flex;
    justify-content: center;
    align-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
}

.siblings {
    grid-area: siblings;
    /*border: 2px solid red;*/
    padding: 10px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
}

/*The man in the middle*/
.selected {
    grid-area: selected;
    /*border: 2px solid red;*/
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px; /* Make the middle box larger */
}

/*ægtefælle/samlever*/
.spouses {
    grid-area: spouses;
    /*border: 2px solid red;*/
    padding: 10px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: wrap;
}

.children {
    grid-area: children;
    /*border: 2px solid red;*/
    padding: 10px;
    display: flex;
    justify-content: center;
    align-content: start;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Individual family members (blue boxes) */
.family-member {
    border: 1px solid #999999;
    border-radius: 11px;
    background-color: white;
    padding: 20px;
    margin: 5px;
    width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.vertical_spacer {
    width: 50px;
}

.stroke {
    stroke: #cccccc;
    stroke-width: 2;
}