*
{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

:root
{
    --body-font-size: 16px;
    --columns: 3;
    --form-width: 100%;
    --layout-width: 100%;
    --min-font-size: 16px;
    --padding-side: 10px;
}

@media (min-width: 1280px)
{
    :root
    {
        --body-font-size: 14px;
        --columns: 8;
        --form-width: 400px;
        --layout-width: 1280px;
        --min-font-size: 12px;
        --padding-side: 0;
    }
}

body
{
    background-color: #222;
    color: #FFF;
    font-size: var(--body-font-size);
    margin: 0;
}

body, button, input, label, select, textarea
{
    font-size: var(--body-font-size);
}

h1
{
    margin: 5px 0;
}

a
{
    color: #FFF;
    text-decoration: none;

    &:hover
    {
        color: #999;
        text-decoration: none;
    }
}

button, input, select
{
    border: 1px solid #CCC;
    padding: 10px 5px;
}

input[type="checkbox"]
{
    appearance: none;
    background-color: #222;
    border: 1px solid #FFF;
    display: block;
    height: 22px;
    margin: 0;
    width: 22px;
}

input[type="checkbox"]:checked
{
    appearance: auto;
    accent-color: #FFF;
}

label
{
    color: #CCC;
}

.flex_column
{
    display: flex;
    flex-direction: row;
    gap: 5px;

    &.sbetween
    {
        justify-content: space-between;
    }

    &.flex
    {
        flex: 1;
    }

    &.hcenter
    {
        justify-content: center;
    }

    &.vcenter
    {
        align-items: center;
    }

    &.wrap
    {
        flex-wrap: wrap;
    }
}

.flex_row
{
    display: flex;
    flex-direction: column;
    gap: 5px;

    &.flex
    {
        flex: 1;
    }

    &.hcenter
    {
        align-items: center;
    }

    &.vcenter
    {
        justify-content: center;
    }
}

.forms
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: auto;
    padding: var(--padding-side);
    width: var(--form-width);

    button
    {
        background-color: #DDD;
        border: none;
        border-radius: 5px;

        &:hover
        {
            background-color: #CCC;
        }
    }

    input, textarea
    {
        background-color: #333;
        border: 1px solid #999;
        color: #FFF;
        padding: 10px;
    }
}

.hidden
{
    display: none;
}


#app
{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: min-content auto 100px;
    min-height: 100svh;
}

header.main
{
    padding: 0 var(--padding-side);

    nav.main
    {
        align-items: center;
        display: flex;
        gap: 5px;

        a
        {
            background-color: #024;
            font-weight: bold;
            padding: 10px;

            &:hover
            {
                background-color: #135;
                color: #FFF;
            }
        }
    }

    #search
    {
        display: grid;
        gap: 5px;
        grid-template-columns: min-content auto min-content;
        padding: 10px 0;

        & input
        {
            background-color: #222;
            border: 1px solid #777;
            color: #CCC;
            padding: 10px;
            width: 100%;
        }

        & button
        {
            background: no-repeat center/22px url("search_icon.png");
            border: none;
            border-radius: 5px;
            background-color: #777;
            color: #FFF;
            width: 38px;

            &:hover
            {
                background-color: #555;
            }
        }

        & select
        {
            appearance: none;
            background-color: #222;
            border: 1px solid #777;
            color: #CCC;
            padding: 10px;
        }
    }
}

.user_panel
{
    display: flex;
    gap: 5px;
    justify-content: end;
    margin: auto;
    padding: 5px 0;
    position: relative;

    button
    {
        background: #333 no-repeat center/32px url("icon_menu.png");
        border: none;
        border-radius: 5px;
        height: 42px;
        padding: 5px 10px;
        width: 42px;

        &:hover
        {
            background-color: #444;
        }
    }

    nav
    {
        background-color: #024;
        border-radius: 5px;
        position: absolute;
        top: 52px;
        z-index: 1000;

        .content
        {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 10px;

            a
            {
                padding: 10px;
                width: 200px;
                
                &:hover
                {
                    background-color: #135;
                    color: #FFF;
                }
            }

            .logout
            {
                align-items: center;
                background-color: #555;
                display: flex;
            }
        }
    }

    & .steam_connected
    {
        align-items: center;
        background-color: #136;
        border-radius: 5px;
        display: flex;
        gap: 5px;
        padding: 5px;

        & .avatar
        {
            display: flex;
            
            & img
            {
                border-radius: 5px;
                height: 32px;
                width: 32px;
            }
        }

        & .personaname
        {
            font-weight: bold;
        }
    }
}

.steam_disconnected
{
    align-items: center;
    background-color: #136;
    border-radius: 5px;
    color: #FFF;
    display: flex;
    font-weight: bold;
    gap: 5px;
    padding: 5px;

    &:hover
    {
        background-color: #247;
        color: #FFF;
    }

    & img
    {
        height: 32px;
    }
}

@media (min-width: 1600px)
{
    .user_panel
    {
        nav
        {
            --display: flex;
        }
    }

    header.main
    {
        margin: auto;
        width: var(--layout-width);
    }
}