body
{
    font-family: sans;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #112233;
    margin: 0;
    padding: 0;
    background-image: url("./images/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

a
{
    color: #FFCC00;
}

h1
{
    width: 100%;
}

img
{
    vertical-align: middle;
}

.body-container
{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

.top-bar
{
    background-color: #111122;

    .center-bar
    {
        .button, .image-button
        {
            color: #FFFFFF;
            text-decoration: none;
            font-weight: bold;
        }

        .button:hover, .image-button:hover
        {
            background-color: #336699;
            color: #FFFFFF;
        }

        .selected, .selected:hover
        {
            color: #000000;
            background-color: #88AACC;
        }
    }
}

@media (width >= 800px)
{
    .top-bar
    {
        display: flex;
        flex-direction: row;
        margin: 0;
        padding: 0;
        height: 50px;
        justify-content: center;

        .center-bar
        {
            display: flex;
            flex-direction: row;
            flex: 0 1 1200px;
            justify-content: space-between;
        }

        .left-bar
        {
            display: flex;
            flex-direction: row;
        }

        .right-bar
        {
            display: flex;
            flex-direction: row;
            padding-right: 20px;
        }

        .button
        {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
        }

        .image-button
        {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
        }
    }
}

@media (width < 800px)
{
    .top-bar
    {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;

        .center-bar
        {
            display: flex;
            flex-direction: column;
        }

        .left-bar
        {
            display: flex;
            flex-direction: column;
        }

        .right-bar
        {
            display: flex;
            flex-direction: row;
            padding-left: 10px;
        }

        .button
        {
            padding: 5px 20px;
        }

        .image-button
        {
            padding: 5px 10px;
        }
    }
}

.content
{
    display: flex;
    justify-content: center;
    padding: 20px;
    flex-direction: row;
    flex: 1;

    @media (width >= 800px)
    {
        .content-paragraph
        {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            flex-direction: column;
        }

        .content-line
        {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            align-items: center;
        }

        .image-box
        {
            flex: 1 0 auto;
        }

        .text-box
        {
            padding: 0 20px;
        }
    }

    @media (width < 800px)
    {
        .content-paragraph
        {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
        }

        .content-line
        {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
        }

        .image-box
        {
            text-align: center;
            padding: 20px 0;
        }

        .text-box
        {
        }
    }

    .centered-width
    {
        flex: 0 1 1200px;
    }

    .content-centered
    {
        display: flex;
        flex: 0 1 1200px;
        justify-content: center;
        align-items: center;
        flex-direction: row;

        *
        {
            max-width: 100%;
        }
    }
}

.bottom-bar
{
    display: flex;
    margin-top: auto;
    background-color: #111122;
    width: 100%;

    .center-bar
    {
        flex: 0 1 1200px;
        margin: 0 auto;
        padding: 20px;
        height: 100%;
        font-size: 0.8rem;
    }
}

.right
{
    float: right;
}

.align-right
{
    text-align: right;
}

.align-center
{
    text-align: center;
}

.hidden
{
    display: none !important;
}

.justified
{
    justify-content: space-between;
}

.margin
{
    padding:20px;
}

.margin-small
{
    margin:10px;
}

.center-text
{
    text-align: center;
}

.form-label
{
    width: 200px;
}

.message-error
{
    color: #ff0033;
}

.message-success
{
    color: #ccff00;
}