:root
{
    --color-link-inactive: #FBEEC1;
    --background-color-footer: #14191d;
    --border-color-footer: rgba(0,0,0,0.4);;
}

@font-face
{
    font-family: "Open Sans Condensed";
    font-style: normal;
    font-weight: bold;
    src: local("Open Sans Condensed, Bold"), url("/static/fonts/OpenSans-CondBold.ttf") format("truetype");
}

@font-face
{
    font-family: "FreeMono";
    font-style: normal;
    font-weight: normal;
    src: local("FreeMono"), url("/static/fonts/FreeMono.ttf") format("truetype");
}

@font-face
{
    font-family: "FreeMono";
    font-style: normal;
    font-weight: bold;
    src: local("FreeMono, Bold"), url("/static/fonts/FreeMonoBold.ttf") format("truetype");
}

@font-face
{
    font-family: "pIqaD";
    src: local("pIqaD"), local("piqad"), url("/static/fonts/pIqaD.woff") format("woff");
}

body
{
    margin: 0;
    padding: 0;
    background: #1C2429;
    height: auto;
    min-height: 100%;
}

main
{
    padding: var(--size-default);
    min-width: 33%;
}

body > footer
{
    background: var(--background-color-footer);
    padding: calc(var(--size-default) / 5);
    border-top: var(--border-width-default) solid var(--border-color-footer);
    width: 100%;
}

body > footer > a
{
    margin: calc(var(--size-default) / 5);
    display: inline-block;
    font-size: 5vmin;
}

.eye
{
    margin: calc(var(--size-default) / 2) var(--size-default) calc(var(--size-default) / 2) var(--size-default);
    background: var(--color-link-inactive);
    height: 5vmin;
    width: 5vmin;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.eye::after
{
    content: '';
    position: absolute;
    background: var(--background-color-footer);
    height: 30%;
    width: 110%;
    top: -5%;
    left: -5%;
    animation-name: blink;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-delay: 1s;
    transition: all .5s ease;
}

.eye:nth-of-type(1)::after
{
    transform: rotate(-10deg);
}

.eye:nth-of-type(2)::after
{
    transform: rotate(10deg);
}

@keyframes blink
{
    0%
    {
        height: 30%;
    }
    47%
    {
        height: 30%;
    }
    50%
    {
        height: 110%;
    }
    53%
    {
        height: 30%;
    }
    94%
    {
        height: 30%;
    }
    97%
    {
        height: 100%;
    }
    100%
    {
        height: 30%;
    }
}

.pupil
{
    position: absolute;
    background: var(--background-color-footer);
    border-radius: 50%;
    width: 50%;
    height: 50%;
    left: 25%;
    transform-origin: bottom;
}

#langlinks
{
    background: var(--background-color-footer);
    padding: calc(var(--size-default) / 5);
    border-bottom: var(--border-width-default) solid var(--border-color-footer);
    width: 100%;
}

#langlinks a, #langlinks span
{
    margin: calc(var(--size-default) / 5);
    display: inline-block;
}

#langlinks span
{
    margin: calc(var(--size-default) / 5);
    display: inline-block;
    color: var(--color-link-inactive);
}

main > form
{
    padding: var(--size-default);
    border-width: var(--border-width-default);
    border-radius: calc(var(--size-default) / 4);
    display: grid;
    align-items: center;
    grid-template-columns: auto auto 1fr;
    grid-gap: var(--size-default);
}

main > form > figure
{
    grid-column: 1/2;
    grid-row: 1/2;
    font-family: fontello;
    font-size: calc(var(--size-default) * 4);
    color: var(--color-input);
    margin: 0;
    background: var(--color-icon);
    border-radius: 50%;
    width: calc(var(--size-default) * 6);
    height: calc(var(--size-default) * 6);
    display: flex;
    justify-content: center;
    align-items: center;
}

main > form > label
{
    grid-column: 2/3;
}

main > form:not(#oldgame) > label
{
    font-weight: 700;
}

main > form > input, main > form > select, main > form > textarea
{
    grid-column: 3/4;
}

main > form header, main > form footer
{
    grid-column: 2/4;
}

main > form > header, dialog:not(#ui-alert):not(#ui-confirm):not(#ui-progress) > header
{
    padding: calc(var(--size-default) / 5) calc(var(--size-default) / 2);
    border-left-width: var(--size-default);
    border-radius: 0 calc(var(--size-default) / 5) calc(var(--size-default) / 5) 0;
    font-size: calc(var(--size-default) * 1.7);
}

main > form > header
{
    margin-left: -1.5rem;
}

main > form > footer
{
    border-top-width: var(--border-width-default);
}

main > form > footer > input
{
    margin-top: var(--size-default) !important;
}

.ui-info
{
    padding: calc(var(--size-default) / 2);
    border-radius: calc(var(--size-default) / 5);
    margin-bottom: var(--size-default);
    border-width: var(--border-width-default);
}

.ui-info > p:first-child, .ui-info > p:last-child
{
    margin: 0;
}

@media screen and (orientation:portrait)
{
    main
    {
        width: 100% !important;
    }

    main > form
    {
        position: relative;
    }

    main > form > *
    {
        grid-column: 1/4 !important;
    }

    main > form > header
    {
        margin-left: 0;
        position: relative;
    }

    main > form > figure
    {
        font-size: calc(var(--size-default) * 1.7) !important;
        background: transparent;
        width: calc(var(--size-default) * 1.7) !important;
        height: calc(var(--size-default) * 1.7) !important;
        position: absolute;
        right: calc(var(--size-default) / 2);
        color: var(--color-icon);
    }

    main > form > label
    {
        margin-bottom: calc(var(--size-default) * -0.8);
    }

    main > form > textarea
    {
        min-height: 100%;
    }
}