*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    background:#0d1117;
}

canvas{

    display:block;
    width:100%;
    height:100%;

}
#hud{

    position:absolute;

    top:20px;

    left:20px;

    right:20px;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    pointer-events:none;

    color:white;

    font-family:Arial;

}

.player{

    background:rgba(0,0,0,.45);

    padding:15px;

    border-radius:12px;

    min-width:180px;

}

#center{

    text-align:center;

    pointer-events:auto;

}

#rollButton{

    margin-top:10px;

    padding:12px 24px;

    font-size:18px;

    border:none;

    border-radius:10px;

    cursor:pointer;

}