*{box-sizing:border-box;margin:0;padding:0}:root{--container-width:90%;--max-container-width:1728px;--blue:#20a4f3;--black:#111}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}div#app{grid-template-rows:auto 1fr auto;gap:50px;width:100%;min-height:100dvh;display:grid}header{background-color:var(--blue);color:#fff}div.header_container{width:var(--container-width);max-width:var(--max-container-width);margin:0 auto;padding:25px 0}div.header_container a{color:#fff;text-decoration:none}footer{background-color:var(--black)}div.footer_container{width:var(--container-width);max-width:var(--max-container-width);margin:0 auto;padding:50px 0}ul.legal_container{color:#fff;flex-flow:wrap;justify-content:center;align-items:center;gap:25px;display:flex}ul.legal_container a{color:#fff;text-decoration:none}ul{list-style:none}main{flex-direction:column;justify-content:flex-start;align-items:center;display:flex}div.container{width:90%;max-width:1728px;margin:0 auto}ul.clocks_list{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:25px;width:100%;list-style:none;display:grid}@media (width<=768px){ul.clocks_list{grid-template-columns:repeat(1,1fr)}}div.card{border:1px solid #b9b9b9a6;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:25px;height:100%;padding:50px 25px 25px;display:flex;position:relative}div.card div.date_info_container{text-align:center;flex-direction:column;gap:5px;display:flex}div.header_card{background-color:var(--blue);color:#fff;border-top-left-radius:8px;border-bottom-right-radius:8px;padding:8px;font-weight:700;position:absolute;top:0;left:0}div.clock_container{aspect-ratio:1;border:1px solid #b9b9b9a6;border-radius:100vw;width:min(200px,100%);position:relative;overflow:hidden}div.clock_center_dot{background-color:#000;border-radius:100vw;width:15px;height:15px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}div.dial{transform-origin:0 0;background-color:#000;width:2px;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,46%)}div.hand{background-color:var(--secondary);transform-origin:0 0;background-color:#000;border-top-left-radius:25px;border-top-right-radius:25px;position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}div.small_hand{width:4px;height:25%}div.big_hand{width:4px;height:40%}div.second_hand{width:2px;height:45%}