/* clean */
body, p
{
    margin: 0;
    padding: 0;
}

body
{
    background: #111111;
    overflow: hidden;
}

canvas
{
    position: fixed;
}

#overlay
{
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#controls
{
    pointer-events: all;
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.hidden
{
    display: none;
}

.unavailable
{
    display: none;
}

#infos
{
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 10rem;
}

#infos p
{
    text-align: right;
}

#portrait
{
    background: white;
    width: 100%;
    height: 100%;
    position: absolute;
}

#portrait_center
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#portrait img
{

}