/*:root
{
    --dark-background:  rgb(236, 192,  94);
    --dark-color:       rgb(176,  81,  85);
    --ligth-background: rgb(242, 233, 192);
    --ligth-color:      rgb(218, 132,   0);
}*/

body
{
    color: rgb(176,  81,  85);/*var(--dark-color);*/
    background-color: rgb(236, 192,  94);/*var(--dark-background);*/
}

main
{
    color: rgb(218, 132,   0);/* var(--ligth-color);*/
    background-color: rgb(242, 233, 192);/*var(--ligth-background);*/
}

nav
{
    background-color: rgb(176,  81,  85);/*var(--dark-color);*/
}

nav a
{
    color: rgb(236, 192,  94);/*var(--dark-background);*/
}

*
{
    box-sizing: border-box;
}

body
{
    background-image: url("tree.png"), url("tree2.png");
    background-repeat: no-repeat;
    background-position: left top, right top;
    background-attachment: fixed;
    font-size: 150%;
}

h1, h2, .center
{
    text-align: center;
}

main, header
{
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

header
{
    margin-top: 100px;
}

main
{
    /*background-image: url("noice.png");*/
    padding: 5px 14px;
    border-radius: 7px;
    border: 1px solid;
}

nav
{
    /*display: inline-block;
    width: 100%;*/
    display: flex;
}

nav a
{
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-right: 1px solid;
    box-sizing: content-box;
}

nav a:last-child
{
    border-right: none;
}

section:last-child, section:target
{
    display: block;
}

section, section:target ~ section:last-child
{
    display: none
}

a[data-user]::before
{
    content: attr(data-user) "\0040";
}

a[data-domain]::after
{
    content: attr(data-domain);
}

output img
{
    max-width: 250px;
    margin: 3px;
}

.gallery img
{
    width: 200px;
    height: 200px;
}

#overlay
{
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.8);
    position: fixed;
    left: 0px;
    top: 0px;
    display: none;
    align-items: center;
}

#overlay img
{
    margin: auto;
}

@media screen and (max-width: 500px)
{
    nav a
    {
        width: 100%;
        border-right: 0px solid;
        border-bottom: 1px solid;
        margin-left: auto;
        margin-right: auto;
    }

    nav a:last-child
    {
        border-bottom: 0px solid;
    }

    nav
    {
        flex-direction: column;
    }
}