:root
{
    --tyrian-purple: #682745;
    --seashell: #fff0e9;
    --thistle: #d7c1c7;
    --night: #151314;

    --button-positive: #c1d7c7;
}

body
{
    background-color: var(--tyrian-purple);
    color: rgb(255, 208, 21);
    display: flex;
    flex-direction: column;

    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 0.9em;
    gap: 1em;
}

main
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    color: black;
}

.panel
{
    display: flex;
    flex-direction: column;
    background-color: var(--seashell);
    border: 1px solid rgba(0, 0, 0, 0.346);
    padding: 2em;
    width: 50em;
    box-shadow: 0em 0em 0.5em rgba(0, 0, 0, 0.2);
    border-radius: 0.75em;
    margin-top: 2em;
    margin-bottom: 10em
}

h1
{
    margin: 0;
}

#hymn-name
{
    font-family:Georgia, 'Times New Roman', Times, serif;
}

#hymn-text
{
    color: var(--night);
    margin: 0;
    line-height: 1.5em;

    display: flex;
    flex-direction: column;
    gap: 2em;
}

.hymn-text-content
{
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.content-line-chords
{
    display: flex;
}

.chord-positional
{
    position: relative;

      -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/*
* NAV
*/

nav
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.nav-row
{
    display: flex;
    justify-content: center;
    width: 90%;
    flex-direction: row;
    gap: 1em;
    align-items: center;
}

.nav-row button
{
    background-color: var(--seashell);
    width: 3.5em;
    height: 3.5em;
    border: 1px solid rgba(0, 0, 0, 0.346);
    border-radius: 5em;
    box-shadow: 0em 0em 0.5em rgba(0, 0, 0, 0.2);
    transition: background-color;
    transition-duration: 250ms;
}

.nav-row button:hover
{
    background-color: rgb(255, 255, 255);
}

.search-bar
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    background-color: var(--thistle);
    border: 1px solid rgba(0, 0, 0, 0.346);
    border-radius: 5em;
    box-shadow: 0em 0em 0.5em rgba(0, 0, 0, 0.2);
    align-items: center;
}

input
{
    border: 0.2em var(--thistle);
    border-radius: 0.5em;
    outline: var(--thistle) solid 0.2em;
    padding: 0.75em;
}

#tab-input
{
    background-color: var(--thistle);
    font-family: inherit;
    width: 14em;
    height: 2em;
    border: 0px solid rgba(0, 0, 0, 0.346);
    border-radius: 5em;
    margin: 0em;
    font-size: 1.25em;
    padding: 0.5em;
    outline: none;
}

#tab-search-button
{
    margin: 0em;
    box-shadow: none;
}

button
{
    font-family: inherit;
    width: 10em;
    height: 2em;
    border: none;
    border-radius: 1em;
    background-color: var(--thistle);
    outline: var(--night) solid 0.1em;
    margin: 0.25em;
    cursor: pointer;
    transition: background-color;
    transition-duration: 250ms;
}

button:hover
{
    background-color: rgb(255, 255, 255);
}

button img
{
    width: 75%;
    pointer-events: none;
    user-select: none;
}


.nav-title
{
    font-size: 2.5em;
}

textarea
{
    font-family: inherit;
}

form
{
    display: flex;
    flex-direction: column;
}

.row
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.multiline-p
{
    white-space: pre-line;
}

/* Mobile */
@media screen and (max-width: 600px) {
    .nav-row button
    {
        flex: 1;
    }

    .panel
    {
        border-radius: 0;
        width: 90%;
        padding: 1em 5%;
        margin: 0;
    }

    body
    {
        margin: 0;
        font-size: 0.75em;
    }

    main
    {
        margin: 0;
    }

    #hymn-name
    {
        font-size: 1.25em;
    }
}