*{box-sizing:border-box;}html,body{background:#222426!important;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Open Sans","Helvetica Neue",sans-serif,"Sans Serif",Icons;-webkit-font-smoothing:antialiased;font-weight:lighter;user-select:none;}body{position:relative;width:100%;height:100%;margin:0;padding:0;font-size:14px;}#flex-container{display:flex;align-items:center;justify-content:center;height:100%;}#flex-container>div{padding-bottom:3vh;}#time-container{position:relative;z-index:1;}#time,#date{pointer-events:none;}label{cursor:pointer;}.button{background:transparent;padding:.4em .5em;box-shadow:0 0 1px RGBA(0,0,0,0);border:none;cursor:pointer;opacity:.25;}.button svg{fill:#fff;}.button:active{outline:none;}#settings{position:fixed;top:10px;right:10px;z-index:2;width:150px;height:90%;}#settings>.button{float:right;}#settings:hover>.button:hover,#settings:hover>.button:focus{opacity:.8;}#settings:hover>.button.active{opacity:1;}#open-settings{transition:opacity .1s linear,transform .4s cubic-bezier(.2,.4,.5,1);transform:rotate(0deg) translateZ(0);}#open-settings.active{transform:rotate(180deg) translateZ(0);}#open-settings.active ~ #settings-dropdown label{transform:translateX(0);}#settings-dropdown{position:absolute;top:2.7rem;right:0;width:150px;text-align:right;list-style:none;padding:0;margin:0;}#settings-dropdown li{position:relative;overflow:hidden;}#settings-dropdown input{position:absolute;right:120%;top:0;}#settings-dropdown input:checked + label{color:#fff;font-weight:bold;}#settings-dropdown label{padding:.4em 1em;display:block;color:rgba(255,255,255,.6);transition:color .1s linear,transform .3s cubic-bezier(0,.4,.45,1);transform:translateX(100%);}#settings-dropdown label:hover{color:rgba(255,255,255,.8);}#settings-dropdown li:nth-child(2) label{transition-delay:.04s;}#settings-dropdown li:nth-child(3) label{transition-delay:.08s;}h1,h2{font-weight:400;text-align:center;margin:0;}h1{font-size:14vh;line-height:1.2;color:rgba(255,255,255,.90);}h1 span,h1 small{color:rgba(255,255,255,.50);}h2{font-size:3vh;margin:0 auto;color:rgba(255,255,255,.50);transition:color .2s linear;}a{color:#13add3;font-weight:600;}a:hover,a:focus{text-decoration:none;}@media screen and (max-height:500px){h1{font-size:4.4rem}h2{font-size:.95rem}}@media screen and (min-height:800px){h1{font-size:7rem}h2{font-size:1.5rem}}.analogue-clock,#clock-face{width:34vh;height:34vh;}.analogue-clock{z-index:2;position:relative;display:block;margin:0 auto 1.5em;}#clock-face{display:none;position:absolute;left:50%;top:0;transform:translateX(-50%);}#clock-face circle{transition:fill .2s linear;fill:rgba(255,255,255,.5);}.analogue-clock + #clock-face{display:block;}#hour-hand,#minute-hand,#second-hand{transform-origin:50% 50%;position:absolute;top:0;}#hour-hand:before,#minute-hand:before,#second-hand:before{content:"";position:absolute;top:0;right:0;bottom:50%;left:0;margin-bottom:.8em;}#hour-hand{z-index:1;width:7px;height:50%;top:25%;left:calc(50% - 3.5px);}#hour-hand:before{background:#fff;}#minute-hand{z-index:2;width:3px;height:70%;top:15%;left:calc(50% - 1.5px);}#minute-hand:before{background:#fff;}#second-hand{z-index:3;width:1px;height:80%;top:10%;left:calc(50% - .5px);transition:transform .06s cubic-bezier(.6,1.7,.6,1.3);}#second-hand:before{background:red;transform:translateZ(0);}@media screen and (max-height:500px){.analogue-clock,#clock-face{width:10.5rem;height:10.5rem}}@media screen and (min-height:900px){.analogue-clock,#clock-face{width:19rem;height:19rem}}#digital-clock span{text-transform:uppercase;font-size:.25em;vertical-align:top;position:relative;top:1em;right:0;margin:0 .3em 0 -.5em;}#digital-clock small{margin-left:.1em;margin-right:-.5em;font-size:.5em;}