.wrapper{background:url(images/bg.png)}
    main{position:relative;width:1024px;height:612px;font-family: Roboto;color: #000;font-size: 20px;margin:6px auto;overflow:hidden;padding-top:10px}
    main > *{position: relative;}
            input{width: 40px;height: 40px;font-size: 30px;text-align:center;margin-bottom: 9px;border-radius:5px;background-color: rgba(255, 255, 255, 1);color: #C31919;border:none;outline:none}
                    .ok{background-color:#0c0}
                    .bad{background-color:#f66}


.box {
    width: 90%;
    height: 220px;
    background-color: #D2CCCC;
    margin: 60px auto 40px;
    border-radius: 7px;
    padding: 20px;
}

.l, .p {
    display: inline;
    width: 20px;
}

.box:after {
    width: 99%;    
    height: 92%;
    top: 0px;
    left: 0px;
    content: '';
    position: absolute;
    background-color: #fff;        border-radius: 7px;
    z-index: 1;
}
@font-face{font-family:'Roboto';src:url(./fonts/Roboto-Regular.ttf)}


.box > .sentence {
    position: absolute;
    z-index: 2;
    width: 95%;
}

.sentence:last-child {
    top: 104px;
}

.sentence:last-child input {
    width: 277px;
    background-color: #000;
    color: #FFF;
    font-size: 20px;
}



input.letterinput {}