*{
    box-sizing: border-box;
    padding: 0%;
    margin: 0%;
}
body{
    height: 100vh;
    background: linear-gradient(219.13deg, #063E3A -6.19%, #3B0050 69.38%, #383E3D 117.83%);    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Saira', sans-serif;

}

.relogio{
    overflow: hidden;
    width: min(500px,75vw);
    height: min(500px,75vw);
    background-color: rgb(34, 34, 34);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.815);
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.795);
    position: relative;
}
.relogio::after{
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    z-index: 15;
    background-color: black;
    transform: translate(-50%, -50%);
}
.numeros{
    --rotacao: 0;
    color: white;
    transform: rotate(var(--rotacao));
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    padding: 10px;
}
.n{
    transform: rotate(var(--rotacao));
}

.numero-1{
    --rotacao: 30deg;
}
.numero-2{
    --rotacao: 60deg;
}
.numero-3{
    --rotacao: 90deg;
}
.numero-4{
    --rotacao: 120deg;
}
.numero-5{
    --rotacao: 150deg;
}
.numero-6{
    --rotacao: 180deg;
}
.numero-7{
    --rotacao: 210deg;
}
.numero-8{
    --rotacao: 240deg;
}
.numero-9{
    --rotacao: 270deg;
}
.numero-10{
    --rotacao: 300deg;
}
.numero-11{
    --rotacao: 330deg;
}
/*-----------------------*/
.numero-1 .n{
    --rotacao: -30deg;
}
.numero-2 .n{
    --rotacao: -60deg;
}
.numero-3 .n{
    --rotacao: -90deg;
}
.numero-4 .n{
    --rotacao: -120deg;
}
.numero-5 .n{
    --rotacao: -150deg;
}
.numero-6 .n{
    --rotacao: -180deg;
}
.numero-7 .n{
    --rotacao: -210deg;
}
.numero-8 .n{
    --rotacao: -240deg;
}
.numero-9 .n{
    --rotacao: -270deg;
}
.numero-10 .n{
    --rotacao: -300deg;
}
.numero-11 .n{
    --rotacao: -330deg;
}
.ponteiro{
    --rotacao:0;
    background-color: black;
    position: absolute;
    bottom: 50%;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) rotate(calc(var(--rotacao) * 1deg));
    transform-origin: bottom;
    border-radius: 10px 10px 0 0 ;
}
.horas{
    background-color: rgb(0, 0, 0);
    width: 15px;
    height: 25%;
    z-index: 11;
}
.minutos{
    background-color: rgb(58, 58, 58);
    width: 10px;
    height: 35%;
    
}
.segundos{
    background-color: rgb(255, 0, 0);
    width: 3px;
    height: 40%;
}