.key{display:grid;row-gap:3px;width:min(720px,100%);margin-bottom:36px}.key>div{width:100%;display:flex;height:36px;align-items:center;justify-content:center}.key span{margin-left:3px}.key .years{background-color:orange;color:#212121}.key .months{background-color:#ff0;color:#212121}.key .days{background-color:green}.key .hours{background-color:#00f}.key .minutes{background-color:indigo}.key .seconds{background-color:#fff;color:#212121}svg.clock{width:min(100%,60vh);margin-bottom:36px;margin-left:0;margin-right:0;display:block;transform:rotate(-90deg);transform-origin:center center}svg.clock circle{fill:transparent;stroke-width:9px;stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.68, -.55, .27, 1.55)}#center{fill:red}#years{stroke:orange}#months{stroke:yellow}#days{stroke:green}#hours{stroke:blue}#minutes{stroke:indigo}#seconds{stroke:white}.display-time{mixin:type--heading-2;mixin:type--headings;mixin:type--bold-sans-serif;font-family:Roboto,sans-serif;font-weight:500;text-align:left;text-shadow:0 2px 4px #000;mixin:font-size;font-size:33px;line-height:49.5px;margin-bottom:36px}