
body
{
    background-color: #cccccc;
}

a
{
    text-decoration: none;
}

div#input-wrapper
{
    display : block;
    position : fixed;
    text-align: center;
    width: 250px;
    height: 600px;
    top : calc(50% - 300px);
    left : calc(50% - 125px);
}

div#input-wrapper > *
{
    margin-bottom: 30px;
}

div#player-info
{
    color: #fff;
    display : block;
    position : fixed;
    width: 250px;
    height: 50px;
    font-size:2rem;
    top : calc(50% - 400px);
    left : 100px;

    border:none;
}

div.button
{
    border-radius: 8px;
    color: #fff;
    font-size: 1.5rem;
    background: #006aee;
    text-decoration: none;
    height: 3rem;
    padding-top: 0.5rem;
    padding-bottom: 0.0rem;
    cursor: pointer;
}

div.button:hover
{
    background: #0059dd;
}

#next
{
    padding : 1rem;
    padding-top: 0.8rem;
    padding-bottom: 0.3rem;
    display : block;
    position : fixed;
    bottom : calc(50% - 400px);
    right : 100px;
}

div.message
{
    border-radius: 5px;
    color: #fff;
    font-size:2rem;
    text-decoration: none;
}

input[type="text"]
{
    display: block;
    width: 95%;
    background: #fff;
    color: #333;
    font-size:1.5rem;
    padding : 0.4rem;
    padding-top : 0.5rem;
    padding-bottom : 0.5rem;
    border-radius: 8px;
    border:none;
    border-right:0px; border-top:0px; 
    boder-left:0px; boder-bottom:0px;
}

input[type="text"]:focus
{
    background: #fff;
    color: #000;
}