html,body{height:100%;width:100%;margin:0;padding:0}body{position:relative;font-size:20px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;background-color:black;color:white}.time-container{background-color:#423196;position:absolute;top:60px;right:60px;bottom:95px;left:85px;z-index:2}.time{position:absolute;left:0;bottom:0;background-color:#423196;transition:all 0.5s}.line-v-container{position:absolute;top:0;left:0;bottom:-20px;display:flex;flex-direction:column-reverse;justify-content:space-between;z-index:100}.line-v{z-index:100;transform:translate(-50px, -50%);width:23px;height:23px;text-align:right}.line-v:after{content:'–';position:absolute;right:0;transform:translateX(20px)}.line-h-container{position:absolute;left:0;bottom:-50px;right:-22px;display:flex;flex-direction:row;justify-content:space-between;z-index:100}.line-h{z-index:100;transform:translate(-10px, 0);width:23px;height:23px;text-align:center}.line-h:after{content:'•';position:absolute;top:0;left:50%;transform:translate(-3px, -26px) rotate(-90deg)}.line-h:nth-child(5n + 1):after{content:'–';position:absolute;top:0;left:50%;transform:translate(-7px, -23px) rotate(-90deg)}