:root{--time-switcher-border-radius: 28px;--selected-btn-inner-padding: 8px;--unselected-btn-inner-padding: 4px;--content-width: 1035px;--clock-widget-width: 247px;--font-family-default: "Roboto", sans-serif;--font-family-mono: "Roboto Mono", monospace}*{box-sizing:border-box}body{margin:0;font-family:var(--font-family-default);height:100vh;background-color:#e8e8e8}a{text-decoration:none}a:visited{color:inherit}div#root{height:100%}main{display:flex;flex-direction:column;align-items:center;padding-bottom:30px}button{font-family:var(--font-family-default);cursor:pointer;border:none;background-color:inherit}header{padding-inline:24px;margin:0 auto;max-width:1400px;height:90px;display:flex;align-items:center}.logo{display:flex;align-items:center;gap:10px}.logo img{height:26px}.logo-text{font-weight:500}.main-container{display:flex;flex-direction:column;width:var(--content-width)}.main-clock{height:17rem;font-family:var(--font-family-mono)}.main-clock-24h{font-size:14rem;cursor:default}.main-clock-12h{font-size:12.5rem;cursor:default;display:flex;align-items:baseline}.main-clock-12h-period{font-size:5.75rem;font-weight:600}.main-clock-info-controls{display:flex;justify-content:space-between;font-weight:600}.time-format-switcher{background-color:#fff;border-radius:var(--time-switcher-border-radius)}.time-format-switcher button{border:none;padding-block:5px;border-radius:var(--time-switcher-border-radius)}.btn-12h-unselected,.btn-24h-unselected{background-color:transparent;color:#000}.btn-12h-selected,.btn-24h-selected{background-color:#000;color:#fff;width:2.8em}.btn-12h-unselected{padding-right:var(--unselected-btn-inner-padding)}.btn-24h-unselected{padding-left:var(--unselected-btn-inner-padding)}.main-container>hr{width:100%;margin-block:48px;border:1px solid white}.search{width:450px;margin-inline:auto;margin-bottom:48px}.clock-container{display:grid;grid-template-columns:repeat(auto-fill,var(--clock-widget-width));justify-content:space-between;row-gap:25px}.clock-face{display:flex;flex-direction:column;justify-content:space-between;align-items:center;border:2px solid white;border-radius:10px;padding:14px 16px;cursor:pointer;height:167px;position:relative}.clock-face-selected{background-color:#010101;color:#fff;border:2px solid black}.clock-face-selected .close-button{display:none}.clock-face span{display:inline-block;line-height:1}.clock-face hr{width:100%;border:1px solid white}.offset{font-size:1rem}.zone{font-size:1.5rem}.time{font-size:2rem}.date{font-size:.875rem}.close-button{position:absolute;top:5px;right:2px}.close-button-img{height:15px}