body {
    line-height: 1.4;
    max-width: 650px;
    margin: 50px auto;
    padding: 20px;
}

nav a {
    margin-right: 10px;
}

.name-link {
    color: black;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    font-size: 1.5em;
    font-weight: bold;
}

details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::after {
    content: "\00a0\00a0 [expand]";
    color: grey;
    font-style: italic;
}

details[open] > summary::after {
    content: "\00a0\00a0 [collapse]";
}

code {
    background-color: #eeeeee;
    border-radius: 3px;
    font-family: "Courier New", monospace;
    padding: 0 3px;
}

#bonsai {
    margin-bottom: 2em;
}

@media (min-width: 1300px) {
    body {
        max-width: 1300px;
    }

    #layout {
        display: flex;
        gap: 3em;
        align-items: flex-start;
    }

    #bonsai {
        flex: 0 0 600px;
        height: 540px;
        margin-bottom: 0;
    }

    #content {
        flex: 1;
        min-width: 0;
        max-width: 650px;
        margin-top: 100px;
    }
}