@charset "UTF-8";

* {
    margin: 0px;
    box-sizing: 0px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

body {
    background-color: brown;   
}

header {
    color: aliceblue;
    background-color: black;
    padding: 25px;
    font-size: 25px;
}

main {
    min-width: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
}

.relogio {
    background-color: azure;
    border: 15px solid black;
    border-radius: 50%;
    min-width: 600px;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 30px 0 rgb(10, 10, 10) ;
}

.pont-segundos {
    width: 5px;
    height: 270px;
    background-color: brown;
    transform: translate(0, -50%);
    position: absolute;
    border-radius: 10px;
    transform-origin: bottom center;
}

.pont-minutos {
    width: 10px;
    height: 200px;
    background-color: black;
    transform: translate(0, -50%);
    position: absolute;
    border-radius: 10px;
    transform-origin: bottom center;
}

.pont-horas {
    width: 10px;
    height: 170px;
    background-color: rgb(36, 34, 34);
    transform: translate(0, -50%);
    position: absolute;
    border-radius: 10px;
    transform-origin: bottom center;
}


.numeros {
    text-align: center;
    position: absolute;
    min-width: 100%;
    min-height: 100px;
    width: 600px;
    height: 600px;
}

.numero-1 {
    transform: rotate(30deg);
}

.numero-2 {
    transform: rotate(60deg);
}

.numero-3 {
    transform: rotate(90deg);
}

.numero-4 {
    transform: rotate(120deg)
}

.numero-5 {
    transform: rotate(150deg);
}

.numero-6 {
    transform: rotate(180deg);
}

.numero-7 {
    transform: rotate(210deg);
}

.numero-8 {
    transform: rotate(240deg);
}

.numero-9 {
    transform:  rotate(270deg);
}

.numero-10 {
    transform: rotate(300deg);
}

.numero-11 {
    transform: rotate(330deg);
}

.numero-12 {
    transform: rotate(360deg);
}