:root
{
    --sss-blue: rgba(37, 57, 120, 1);
    --sss-red: rgba(189, 33, 69, 1);
    --sss-gold: rgba(251, 216, 0, 1);
    --sss-light-silver: #EAEAEA;
    --sss-dark-silver: #AAAAAA;
    --sss-medium-background: #454545;
    --sss-dark-background: #141414;
}


*
{
    margin: 0;
    padding: 0;
}

.bold
{
    font-weight: bold;
}
.green
{
    color: green;
}
.red
{
    color: red;
}
.blue
{
    color: blue;
}

a, button
{
    cursor: pointer;
}

a
{
    color: var(--sss-blue);
    text-decoration: none;
}
    a:hover
    {
        color: var(--sss-red);
    }
    a:active
    {
        color: var(--sss-gold);
    }

h1, h2, h3, h4, h5, p, a, span, label, small
{
    font-family: proxima-nova;
}

body
{
    font-family: proxima-nova;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

    header, main, footer
    {
        width: 100vw;
        min-width: 800px;
    }

    header
    {
        height: 100px;
    }
        header div
        {
            height: calc(100% - 20px);
            width: auto;
            position: relative;
            padding: 10px;
            z-index: 100;
        }
            header img
            {
                height: 100%;
                width: auto;
            }
                #soundsparkstudios
                {
                    float: left;
                }
                #spark
                {
                    float: right;
                }


    main
    {
        min-height: 450px;
        position: relative;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        #page
        {
            width: 800px;
            height: auto;
        }
            #portus
            {
                width: 225px;
                height: 50px;
                margin: 0 auto 0 auto;
            }
                #portus img
                {
                    width: auto;
                    height: 100%;
                    margin: 0 auto 0 auto;
                    display: block;
                    position: relative;
                }

            #mode
            {
                width: 100%;
                display: block;
                position: relative;
                float: left;
                margin-top: 25px;
                text-align: center;
            }
                #mode_title
                {
                    font-weight: bold;
                    display: block;
                    margin-bottom: 25px;
                    font-size: 1.5em;
                }

    footer
    {
        height: 200px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        footer div
        {
            text-align: center;
        }
            #portus_black
            {
                width: 145px;
                height: auto;
                cursor: pointer;
                margin: 0 auto 10px auto;
            }
                #portus_black img
                {
                    width: 100%;
                    height: auto;
                    opacity: .125;
                }

            #general_options
            {
                height: 50px;
                width: 100%;
                display: block;
                position: relative;
                float: left;
            }
                #general_options div
                {
                    width: 400px;
                    height: 25px;
                    margin: 0 auto 10px auto;
                }
                    #general_options a
                    {
                        width: calc(100%/5);
                        height: 100%;
                        color: var(--sss-dark-silver);
                        text-decoration: underline;
                        display: inline-block;
                        border: none;
                        font-size: 15px;
                        padding-top: 5px;
                    }
                        #general_options a:hover
                        {
                            text-shadow: 1px 0 0 var(--sss-dark-silver);
                        }

            #logged_in
            {
                width: 100%;
                height: 25px;
            }
                #logged_in_message
                {
                    color: var(--sss-light-silver);
                    font-size: 1em;
                }

            #legal
            {
                color: var(--sss-light-silver);
            }