* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   display: flex;
   min-height: 100vh;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   background-color: #333;
   font-family: Arial, Helvetica, sans-serif;
}

h1 {
   color: #FFF;
   margin-bottom: 20px;
}

.relogio {
   width: 300px;
   height: 300px;
   border: 5px solid #FFF;
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.2);
   background-color: #3a3232;
}

.riscos {
   width: 100%;
   height: 100%;
   padding-left: 50%;
   padding-top: 50%;
   margin-top: -3px;
}
.risco {
   width: 145px;
   height: 5px;
   position: absolute;
   transform-origin: left;
   display: flex;
   justify-content: flex-end;

}
.risco .ponto {
   width: 15px;
   height: 100%;
   background-color: #FFF;
   background-color: #00fff2;
}

.ponteiros {
   width: 100%;
   height: 100%;
   padding-left: 50%;
   padding-top: 50%;
   margin-top: -100%;

}
.p {
   transform-origin: left;
   transform: rotate(0deg);
   border-radius: 50%;
   position: absolute;

}

.p_s {
   width: 100px;
   height: 3px;
   background-color: #ff1d44;
}
.p_m {
   width: 120px;
   height: 7px;
   background-color: #FFF;
}
.p_h {
   width: 70px;
   height: 10px;
   background-color: #FFF;
}
.encaixe {
   width: 20px;
   height: 20px;
   background-color: #00fff2;
   border-radius: 50%;
   position: absolute;
   margin-top: -5px;
   margin-left: -5px;
}
.digital {
   color: #00fff2;
   font-size: 40px;
   margin-top: 20px;
}

footer {
   margin-top: 20px;
   color: #FFF;
   font-size: 13px;
}
footer a{
   text-decoration: none;
   color: rgb(191, 225, 254);
}
footer a:hover{
   color: #00fff2;
}