body {
    overflow: hidden;
    background: #d7d7d7;
}
    #tetris {
        width: 360px;
        border: 1px solid black;
        padding: 20px;
    }
    #canvas {
        width: 200px;
        height: 440px;
        background-color: #000;
        position: relative;
        color: #fff;
    }
    #canvas h1 {
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 30px;
        padding-top: 200px;
        }
    .piece {
        border: 1px solid white;
        position: absolute;
        }
    .square {
        position: absolute;
        width: 19px;
        height: 19px;
        border: 1px solid white;
        }
    .type0 { background-color: #A000F0;}    
    .type1 { background-color: #00F0F0;}     
    .type2 { background-color: #F0A000;} 
    .type3 { background-color: #0000F0;} 
    .type4 { background-color: #00F000;} 
    .type5 { background-color: #F00000;} 
    .type6 { background-color: #F0F000;}
    #next_shape {
        position: relative;
        background-color: #000;
        border: 1px solid white;
        width: 110px;
        height: 110px;
        }
    #info {
        background-color: #000;
        color: #fff;
        float: right;
        width: 110px;
        height: 420px;
        padding: 10px;}