@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i');

body { margin:0 auto; background-color:#000; font-family:'Roboto Condensed', sans-serif; }
main.app-view { position:relative; height:854px; width:480px; background-color:#fff; margin:0 auto; overflow:hidden; background-image:url('../images/background.jpg'); background-position:center; background-size:cover; }
.home-btn, .apps-btn { position:fixed; cursor:pointer; z-index:30; display:block; top:0px; left:0px; width:100%; height:40px; background-color:#333; background-size:auto 30px; background-repeat:no-repeat; background-position:center; }
.apps-btn { background-image:url('../images/app-drawer.png'); }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { border-radius:10px; background-color:#333; margin:10px; }
::-webkit-scrollbar-thumb { border-radius:10px; background-color:#aaa; }

#clock-wrap { height:114px; position:absolute; margin:auto; left:0; right:0; top:0; bottom:0; text-align:center; color:#fff; font-size:65px; transition:300ms; }
#clock-wrap #date { font-size:30px; }
#clock-wrap.drawer-active { opacity:0; }

.app-drawer { height:780px; width:400px; position:absolute; top:58px; left:41px; background-color:#fff; border-radius:10px; opacity:0; transition:600ms; overflow-y:scroll; font-size:16px; padding:15px; box-sizing:border-box; }
.app-drawer.drawer-active { opacity:0.9; }

.app-icon { width:111px; padding:5px; float:left; text-decoration:none; }
.app-icon .icon { background-color:#000; width:100%; background-color:#000; padding-top:100%; border-radius:10px; background-size:cover; background-position:center; }
.app-icon .title { color:#333; margin-top:10px; padding:0px 5px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }