@import"https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300&display=swap";:root{--numThickness: 6px}*{box-sizing:border-box;font-family:"Roboto Condensed","Trebuchet MS",Arial,Helvetica,sans-serif;transform-style:preserve-3d;perspective:1000px}body{background-color:#000;margin:0}#app{display:flex;gap:25px;align-items:center;color:#fff;height:100vh;justify-content:center}#app .clock{display:flex;font-size:80px;gap:10px}#app .clock .sep{position:relative;width:2vw;height:8vw;transform:translate3d(15px, 15px, 20px)}#app .clock .sep span{position:absolute;background-color:#fff;transition:all .3s}#app .clock .sep span:nth-child(1){width:var(--numThickness);height:var(--numThickness);left:50%;top:33%;transform:translate(-50%, -50%)}#app .clock .sep span:nth-child(2){width:var(--numThickness);height:var(--numThickness);left:50%;top:66%;transform:translate(-50%, -50%)}#app .clock .number{position:relative;width:4vw;height:8vw}#app .clock .number span{position:absolute;background-color:#fff;opacity:.2;transition:all .3s}#app .clock .number span:nth-child(1){width:calc(100% - var(--numThickness)*2);height:var(--numThickness);left:var(--numThickness);top:0}#app .clock .number span:nth-child(2){width:var(--numThickness);height:calc(50% - var(--numThickness)/2*3);right:0;top:var(--numThickness)}#app .clock .number span:nth-child(3){width:var(--numThickness);height:calc(50% - var(--numThickness)/2*3);right:0;top:calc(50% + var(--numThickness)/2)}#app .clock .number span:nth-child(4){width:calc(100% - var(--numThickness)*2);height:var(--numThickness);left:var(--numThickness);bottom:0}#app .clock .number span:nth-child(5){width:var(--numThickness);height:calc(50% - var(--numThickness)/2*3);left:0;top:calc(50% + var(--numThickness)/2)}#app .clock .number span:nth-child(6){width:var(--numThickness);height:calc(50% - var(--numThickness)/2*3);left:0;top:var(--numThickness)}#app .clock .number span:nth-child(7){width:calc(100% - var(--numThickness)*2);height:var(--numThickness);left:var(--numThickness);top:calc(50% - var(--numThickness)/2)}#app .clock .number span.active{opacity:1;transform:translate3d(15px, 15px, 20px);box-shadow:0px 0px 6px 0px #fff}@media(max-width: 800px){:root{--numThickness: 3px}}/*# sourceMappingURL=clock-2.min.css.map */