.lock-screen {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
}
body {
    width: 100%;
    margin:0;
}
#adsense {
    margin-left:-20px;
    margin-right:-20px;
    margin-bottom:-20px;
}
@media (min-width: 1000px) {
    #ris {
        height: calc(100% - 100px);
    }
    #userimg {
        width:50%
    }
    h1 {
        margin-top:10px;
    }
    ul.hr li:hover {
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.22);
    background-color: #c2d1f0;
    }
    ul.hr {
        padding-left:0;
        
    }
    ul.hr li {
        background:#fff;
    display: inline-block; 
    margin-right: 5px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.22);
    margin-bottom:5px;
    border-radius: 4px;
    }
    ul.hr li a {
    padding: 5px; 
    display:block;
    color:black;
    text-decoration:none;
}
    .btn:last-child {
        margin-right:0;
    }
    .btn:hover {
        background:#F5F5F5;
    }
    .btn {
        font-size:20px;
        cursor:pointer;
        box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.22);
        margin-right:10px;
        display:inline-block;
        padding: 5px;
        margin-top:20px;
        background:#fff;
        text-align:center;
    }
    #alert:hover {
        opacity:1;
    }
    #alert {
        opacity:0.8;
        text-align:left;
        display:none;
        background:#F5F5F5;
        box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.22);
        padding: 20px;
        width:260px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    }
    body {
        overflow-y:hidden;
    }
    #top {
        height:100px;
    }
    #grid {
        height:calc(100vh - 100px);
        width:50%;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
}
@media (max-width: 999px) {
    #userimg {
        width:100%;
    }
        ul.hr li:hover {
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.22);
    background-color: #c2d1f0;
    }
    ul.hr {
        padding-left:0;
    }
    ul.hr li {
        background:#fff;
    display: inline-block; 
    margin-right: 5px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.22);
    margin-bottom:5px;
    border-radius: 4px;
    }
    ul.hr li a {
    padding: 5px; 
    display:block;
    color:black;
    text-decoration:none;
}
    .btn:last-child {
        margin-right:0;
    }
    .btn:hover {
        background:#F5F5F5;
    }
    .btn {
        cursor:pointer;
        box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.22);
        margin-right:10px;
        display:inline-block;
        padding: 5px;
        margin-top:20px;
        background:#fff;
        text-align:center;
    }
    #alert {
        opacity:0.9;
        text-align:left;
        display:none;
        background:#F5F5F5;
        box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.22);
        padding: 20px;
        width:100%;
        box-sizing:border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    }
    body {
        font-size:4vw;
        margin-top:10px;
    }
    h1,h2 {
        margin-left:10px;
        margin-right:10px;
    }
    #top {
        height:150px;
    }
    #grid {
        height:calc(100% - 150px);
        width:100%;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
}