body {
    background-color: #fafafa;
   /* background-color: #f7f2ef;*/
}

.content {
min-height: calc(100vh - 6rem)
}

article {
width: 100%;
padding: 0 3rem 2rem 3rem;
margin: auto;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}

article h1 {
font-size: .85rem;
font-weight: normal;
padding-bottom: 0.5rem;
display: inline-block;
color: #999;
letter-spacing: 0.01rem;
}

article p {
padding-bottom: 1rem;
line-height: 1.35rem;
display: inline-block;
display: block;
margin: auto;
}

.timeclock {
  position: absolute;
  right: 1rem;
  bottom: 4rem;
  display: block;
  line-height: 0;
}

#analog-clock {
    width: 140px;
    height: 140px;
}
#clock-face {
    fill: transparent;
    stroke: #ccc;
}
#h-hand, #m-hand{
    stroke: #ccc;
    stroke-linecap: round;
}
 #s-hand{
    stroke: #ccc;
    stroke-linecap: round;
}
#h-hand,
#m-hand,
#s-hand {
 stroke-width: 1px;
}

.time-text {
font-size: .6rem;
color: #ccc;
letter-spacing: 0.01rem;
position: absolute;
right: 0;
bottom: 0;
line-height: 1;
}

.hours-container {
  animation: rotate 43200s infinite linear;
}
.minutes-container {
  animation: rotate 3600s infinite linear;
}
.seconds-container {
  animation: rotate 60s infinite linear;
}

@media screen and (max-width: 50rem) {
 .timeclock {right: 2rem; left: 2rem; width: fit-content; bottom:auto; top: 60% !important;}
 .time-text {position: relative; padding: .5rem; text-align: center}
 article { top: 40% !important;}
}