html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial;overflow:hidden}
body{display:table;width:100%;background-color:#000;position:relative}
body:before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1;
 background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
 background:radial-gradient(ellipse at center,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%)}
#glow1,#glow2{position:fixed;border-radius:50%;pointer-events:none;z-index:1;opacity:.4}
#glow1{width:520px;height:520px;top:-120px;left:-120px}
#glow2{width:600px;height:600px;bottom:-160px;right:-160px}
#wrap{display:table-cell;text-align:center;vertical-align:middle;position:relative;z-index:2}
#card{display:inline-block;padding:0;border-radius:40px;-webkit-transition:background .3s,border-color .3s;transition:background .3s,border-color .3s}
#card.framed{padding:70px 110px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.14);-webkit-box-shadow:0 15px 35px rgba(0,0,0,.5);box-shadow:0 15px 35px rgba(0,0,0,.5)}
#time{font-size:190px;font-weight:bold;letter-spacing:8px;line-height:1;margin:0;-webkit-text-shadow:0 0 20px rgba(255,255,255,.35);text-shadow:0 0 20px rgba(255,255,255,.35)}
.colon{-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out}
#ampm{font-size:.26em;font-weight:bold;letter-spacing:3px;margin-left:16px;vertical-align:middle;opacity:.7}
#divider{width:70px;height:2px;margin:22px auto 0;opacity:.35}
#day{font-size:44px;font-weight:bold;letter-spacing:5px;margin-top:16px;opacity:.95}
#date{font-size:30px;letter-spacing:4px;margin-top:6px;opacity:.6;text-transform:uppercase}
#gear{position:fixed;top:16px;right:18px;font-size:26px;width:46px;height:46px;line-height:46px;text-align:center;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);opacity:.7;cursor:pointer;z-index:10;-webkit-transition:-webkit-transform .3s;transition:transform .3s}
#gear.active{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:1;background:rgba(255,255,255,.22)}
#mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:20}
#mask.show{display:block}
#panel{position:fixed;left:50%;margin-left:-260px;bottom:-1000px;width:520px;max-height:480px;overflow-y:auto;background:#1c1c1f;padding:22px 20px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:24px 24px 0 0;-webkit-transition:bottom .3s ease;transition:bottom .3s ease;border-top:1px solid rgba(255,255,255,.1);-webkit-box-shadow:0 -6px 18px rgba(0,0,0,.4);box-shadow:0 -6px 18px rgba(0,0,0,.4);z-index:30}
#panel h2{margin:0 0 14px;font-size:20px;letter-spacing:1px;font-weight:bold}
#panel b{display:block;margin-bottom:6px;font-size:13px;letter-spacing:1px;opacity:.6;text-transform:uppercase}
.sw{display:inline-block;width:38px;height:38px;border-radius:50%;margin:5px;border:2px solid rgba(255,255,255,.25);cursor:pointer}
.sw.selected{border-color:#fff;-webkit-box-shadow:0 0 0 3px rgba(255,255,255,.25);box-shadow:0 0 0 3px rgba(255,255,255,.25)}
button{padding:10px 14px;margin:4px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#2c2c30;color:#fff}
#closeBtn{display:block;width:100%;margin:14px 0 0;padding:13px;background:#3a3a40;font-weight:bold;border-radius:12px}
.row{margin:16px 0}
.fontButtons button{margin:3px;padding:6px 10px;font-size:14px;}
#bgImageInput{color:#fff;background:#2c2c30;border:1px solid rgba(255,255,255,.15);border-radius:8px;margin:6px 6px 6px 0;padding:9px;max-width:260px}
.bgThumb{width:90px;height:56px;margin:4px;border:2px solid rgba(255,255,255,.25);border-radius:8px;cursor:pointer}
.bgThumb.selected{border-color:#fff;-webkit-box-shadow:0 0 0 3px rgba(255,255,255,.25);box-shadow:0 0 0 3px rgba(255,255,255,.25)}
@media (max-width:560px){#panel{width:100%;left:0;margin-left:0}}
@media (max-width:850px){#time{font-size:110px;letter-spacing:3px}#day{font-size:28px}#date{font-size:18px}#card.framed{padding:40px 55px}#glow1,#glow2{width:300px;height:300px}}