*
{
    box-sizing: border-box;
}

html
{
    font-family: monospace;
}

header, main
{
    width: 90%; max-width: 40rem;
    margin: 0 auto;
}

header
{
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 2em;
    width: 20em;

    border-bottom: 1px solid lightgrey;
}

header pre 
{
    margin: 0.5em;
}

#back_to_home
{
    display: block;
    margin-bottom: 1em;
}

/*
    Bonsai
*/

#bonsai
{
    font-weight: bold;
}

.bonsai-bark    {color: #b06d3c;}
.bonsai-leaves  {color: #e15f5f;}
.bonsai-pot     {color: #00a0ee;}


/*
    Index
*/

#title
{
    flex-grow: 1;
    margin: 0.5em;

    font-size: 2em;
    text-align: right;
}

h2
{
    margin-top: 2em;
}

    h2:first-of-type
    {
        margin-top: auto;
    }

details 
{
    padding: 0.5em;
    /* border-bottom: 1px solid black; */
}

details[open]
{
    margin-bottom: 1em;
    background: #eee;
}

summary 
{
    cursor: pointer;
}

.feed_parameters pre
{
    overflow-x: scroll;
}


/*
    Login
*/

#form_login
{
    display: flex;
    flex-direction: column;

    width: 20em;
    margin: 0 auto;
}

    #form_login input
    {
        margin-bottom: 0.5em;
        text-align: center;
    }

#feedback.login 
{
    margin: 0 auto 1em auto;
    width: 20em;
}

/* 
    Feedback
*/

#feedback
{
    padding: 1em;
    border: 1px solid black;
    text-align: center;
    color: black;
}

    #feedback.success {background: lightgreen;}
    #feedback.error {background: lightcoral;}

    #feedback::first-letter { text-transform: capitalize; }

    
/* 
    Feed editor
*/

#form_feed_editor input
{
    width: 100%;
}

    #form_feed_editor input[type=submit]
    {
        display: block;
        margin: 0 auto;
        width: 5em;
    }

#editor_parameters
{
    margin-bottom: 1em;
    padding: 1em;
    border: 1px solid black;
}


/*
    Dark mode
*/

@media (prefers-color-scheme: dark) 
{
    html 
    {
        background: #23282d;
        color: white;
    }

    a
    {
        color: #e15f5f;
    }
}