div.subtitle {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 5%;
    background: var(--accentColor);
    color: var(--lighterColor);
    font-family: var(--serifFont);
    font-size: 1.4em;
    line-height: 2em;
    font-weight: bold;
    letter-spacing: 2px;

    & > * {
        flex: 0 1 auto;
    }

    & .tree-svg {
        text-align: center;
        line-height: 0;
        background: radial-gradient(ellipse, rgba(255, 255, 255, 0.25), var(--accentColor) 70%);
        padding: 25px;

        & > svg {
            height: 175px;

            & rect {
                fill: #666;
                stroke: var(--darkerColor);
                stroke-width: 9px;
            }

            & #root .parent {
                fill: #4caf50;
                stroke: #4caf50;
            }

            & #child1 rect, & #child2 rect {
                stroke: transparent;
            }
            & #child1 .parent {
                fill: rgb(41, 182, 246);
            }
            & #child2 .parent {
                fill: rgb(255, 235, 59);
            }
            & #links > * {
                stroke: rgb(224, 224, 224);
            }
            & #subchild1 rect,& #subchild2 rect {
                stroke: rgb(41, 182, 246);
            }
            & #subchild3 rect {
                stroke: rgb(255, 235, 59);
            }
        }
    }
}
