:root
{
    --bg-color: black;
    --main-color: #ff7f27;
    --main-contrast: black;
    --alt-color: white;
    --alt-contrast: black;
    --alt-link: #ff7f27;
}

@media((min-width: 800px) and (orientation:landscape)) /* Common desktop */
{
    body
    {
        display: grid;
    }

    div.top
    {
        font-size: 12px;
        height: 280px;
        display: grid;
    }

    div.m_top
    {
        display: none;
    }

    div.top_fortspinnung, div.top_games
    {
        display: grid;
        grid-template-rows: auto 72px auto;
        font-size: 72px;
    }

    div.top_fortspinnung, div.top_games
    {
        color: var(--main-color);
        background-color: var(--main-contrast);
    }

    div.option, div.selected
    {
        display: grid;
        grid-template-rows: auto 64px auto;
        display: inline-block;
    }

    div.footer, div.footerside
    {
        font-size: 12px;
        height: 136px;
    }
}

@media((min-width: 1680px) and (orientation:landscape))
{
    body
    {
        grid-template-columns: auto 1680px auto;
    }

    div.option, div.selected
    {
        width: 418px;
        float: left;
    }
}

@media((min-width: 1024px) and (max-width: 1679px) and (orientation:landscape))
{
    body
    {
        display: grid;
        grid-template-columns: auto 1024px auto;
    }

    div.option, div.selected
    {
        width: 254px;
        float: left;
    }
}

@media((min-width: 800px) and (max-width: 1023px) and (orientation:landscape))
{
    body
    {
        display: grid;
        grid-template-columns: auto 800px auto;
    }

    div.option, div.selected
    {
        width: 198px;
        float: left;
    }
}

@media((max-width: 799px) or (orientation:portrait))/* Common mobile */
{
    div.top
    {
        display: none;
    }

    div.side, div.footerside, div.topleft, div.topright
    {
        display: none;
    }

    div.footer, div.footerside
    {
        height: 164px;
        width: 100%;
        bottom: 0px;
    }

}

@media((min-width: 1680px) and (orientation:portrait))
{
    div.m_top
    {
        font-size: 64px;
    }

    div.footer
    {
        font-size: 24px;
    }
}

@media((min-width: 800px) and (max-width: 1023px) and (orientation:portrait))
{
    div.m_top
    {
        font-size: 64px;
    }

    div.footer
    {
        font-size: 24px;
    }
}

@media((min-width: 800px) and (orientation:portrait))
{
    div.m_top
    {
        font-size: 64px;
    }

    div.footer
    {
        font-size: 24px;
    }
}

@media((max-width: 799px)) 
{
    div.menu
    {
        top: 32px;
    }

    div.content
    {
        top: 184px;
        bottom: 64px;        
    }

    div.footer
    {
        font-size: 12px;
    }

    div.footer, div.footerside
    {
        height: 164px;
        width: 100%;
        bottom: 0px;
    }
}

@media((min-width: 400px) and (max-width: 799px))
{
    div.m_top img
    {
        width: 300px;
    }
}

@media((max-width: 400px))
{
    div.m_top img
    {
        width: 200px;
    }
}

/* Common */

body
{
    font-family: Arial, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    background-color: var(--bg-color);
}


div.topleft, div.topright
{
    background-color: var(--main-contrast);
}

div.top_bottom
{
    background-color: var(--main-color);
}

div.top, div.m_top
{
    background-color: var(--main-contrast);
    font-weight: bold;
    text-align: center;
    margin: 0px;
}

div.menu
{
    text-align: center;
    background-color:var(--main-color);
    text-decoration: none;
}

div.menu a
{
    text-decoration: none;
}

div.top img
{
  padding: inherit;
  margin:auto;
  display: block;
}

div.option, div.selected
{

    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

div.option
{
    border: 1px;
    border-color: var(--main-color);
    color: var(--main-contrast);
    border-style: solid;
}

div.selected
{
    border: 1px;
    border-style: solid;
    border-color: var(--alt-color);
    background-color: var(--alt-color);
    margin: 0px;
    color: var(--alt-contrast);
}

div.option:hover, div.selected:hover
{
    border-width: 1px;
    border-color: var(--alt-contrast);
    border-style: solid;
}

div.content a, a:hover, a:visited
{
    color: var(--alt-link);
}

div.content
{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--alt-color);
    color: var(--alt-contrast);
}

div.post
{
    padding: 20px 10px 20px 50px;
}

div.footer
{
    color: var(--main-color);
    background-color: black;
    width: 100%;
    bottom: 0px;
    z-index: 1;
}

div.footer p
{
    padding-left: 20px;
}

div.footer > a
{
    color: var(--alt-link);
}

div.menuside
{
    background-color: var(--main-color);
}

div.side
{
    background-color: white;
}

div.footerside
{
    background-color: black;
}

div.cookie
{
    background-color: #ff7f27;
    position: fixed;
    width: 200px;
    bottom: 10px;
    left: 10px;
    padding: 10px;
    z-index: 2; /* Show above footer */
}