body {
    background-color: rgb(0, 0, 0);
    font: 14px sans-serif;
    color: white;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .wrapper {
        width: 320px; 
        padding: 20px;
        height: 300px;
    
        position: relative;
        top: 50%;
    }
    .lock {
        width: 700px; 
        padding: 20px;
        height: 200px;
    
        position: relative;
        top: 32%;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    .wrapper {
        width: 320px; 
        padding: 20px;
        height: 300px;
    
        position: relative;
        top: 30%;
    }
    .lock {
        width: 700px; 
        padding: 20px;
        height: 200px;
    
        position: relative;
        top: 32%;
    }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
    .wrapper {
        width: 320px; 
        padding: 20px;
        height: 300px;
    
        position: fixed;
        top: 30%;
        left: 50%;
        margin-top: -100px;
        margin-left: -200px;
    }
    .lock {
        width: 100%; 
        padding: 20px;
        height: 200px;
        
    
        position: fixed;
        top: 32%;
        left: 40%;
        margin-top: -100px;
        margin-left: -200px;
    }
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    .wrapper {
        width: 320px; 
        padding: 20px;
        height: 300px;
    
        position: relative;
        top: 30%;
        padding-top: 30%;
    }
    .lock {
        width: 100%; 
        padding: 20px;
        height: 200px;
    
        position: relative;
        top: 32%;
    }
}