@import url("css.css");
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap");
*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body{
   height:100vh;
   display:flex;
   justify-content:center;
   align-items:center;
   background:#0b0f1f;
   font-family:"Rubik",sans-serif;
   color:#ffffff;
}
.datetime{
  text-align:center;
  -webkit-box-reflect: below 1px 
  linear-gradient(transparent, rgba(255,255,255,0.08));
}
.date{
   font-size:48px;
   font-weight:600;
   letter-spacing:2px;
   margin-bottom:30px;
   opacity:0.9;
}

.time{
   display:flex;
   justify-content:center;
   align-items:flex-end;
   gap:40px;
   font-variant-numeric:tabular-nums;
   font-feature-settings:"tnum";
}
.clock{
   display:flex;
   align-items:flex-end;
}
#hour{
   font-size:160px;
   font-weight:700;
   text-shadow:0 0 30px rgba(255,255,255,0.35);
}
#minutes{
   font-size:160px;
   font-weight:700;
   text-shadow:0 0 25px rgba(255,255,255,0.25);
}
.seconds{
   font-size:160px;
   font-weight:700;
   opacity:0.85;
   width:90px;
   text-align:left;
}

.colon{
   font-size:140px;
   margin:0 12px;
   font-weight:600;
}

.period{
  position:relative;
  right:-100px;
  font-size:26px;
  font-weight:600;
  padding:10px 22px;
  border-radius:50px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(6px);
  letter-spacing:2px;
  min-width:80px;
  text-align:center;
}