@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap');

*{
    padding: 0;
    margin: 0;
    font-size: 1.5rem;
    box-sizing: border-box;
    font-family:'Chakra Petch', sans-serif;
}

:root {
    --seconds-pointer: rgb(255, 102, 0);
    --minutes-pointer: rgb(255, 153, 0);
    --hours-pointer: rgb(255, 196, 0);
    --oneSecond: rgba(255, 2, 179, 0.562);
    --middle: rgb(95, 23, 129);
    --end: rgb(17, 0, 78);

    --shadow-inset: inset 0rem 0rem 1rem rgb(29, 0, 95);
    --shadow-pointers: 0rem 0rem .5rem rgba(42, 0, 46, 0.438);
}

.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

.scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body {
    /* overflow: hidden; */
    height: 100vh;
    width: 100vw;
    background-color: rgb(8, 0, 44);

}

.container {
    display: flex;
    justify-content: center;
}

.base {
    height: 21rem;
    width: 21rem;
    z-index: -1;
}

.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background-color: var(--end);
    position: absolute;
    height: 11.5rem;
    width: 11.5rem;
    border-radius: 10rem;
}

.clock {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.pointers {
    display: flex;
    position: relative;
    align-items: center;
    margin: 0 auto;
    left: 50%;
}

#second, #minute, #hour {
    position: absolute;
    transform: rotate(0deg) translate(0%, -50%);
    border-radius: 0rem;
    left: -.25rem;
    width: .5rem;
    box-shadow: var(--shadow-pointers);
}

#oneSecondBorder {
    background: conic-gradient(var(--end), var(--middle), var(--oneSecond));
    border-radius: 13rem;
    height: 12rem;
    width: 12rem;
    top: 4.5rem;
    left: 4.5rem;
    margin: 0 auto;
    z-index: 1;
    position: absolute;
    box-shadow: var(--shadow-inset);
}

#second {
    z-index: 10;
    background-color: var(--seconds-pointer);
    height: 12rem;
    z-index: 5;
    position: absolute;
}

#secondsBorder {
    background: conic-gradient(var(--end), var(--middle), var(--seconds-pointer));
    border-radius: 13rem;
    height: 24rem;
    width: 24rem;
    top: -1.5rem;
    left: -1.5rem;
    margin: 0 auto;
    z-index: -4;
    position: absolute;
    box-shadow: var(--shadow-inset);
}

#minute {
    z-index: 4;
    background-color: rgb(255, 153, 0);
    height: 11rem;
    position: absolute;
}

#minutesBorder {
    background: conic-gradient(var(--end), var(--middle), var(--minutes-pointer));
    border-radius: 12rem;
    height: 22rem;
    width: 22rem;
    top: -.5rem;
    left: -.5rem;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    z-index: -3;
    position: absolute;
    box-shadow: var(--shadow-inset);
}

#hour {
    z-index: 3;
    background-color: var(--hours-pointer);
    height: 7rem;
    position: absolute;
}

#hoursBorder {
    background: conic-gradient(var(--end), var(--middle), var(--hours-pointer));
    border-radius: 11rem;
    height: 14rem;
    width: 14rem;
    top: 3.5rem;
    left: 3.5rem;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    z-index: 0;
    position: absolute;
    box-shadow: var(--shadow-inset);
}

.numbers {
    position: absolute;
    left: .5rem;
    top: .5rem;
}

.numbers ul li {
    list-style-type: none;
    font-size: 2rem;
    color: white;
    z-index: 0;
    position: absolute;
}

.numbers ul li:nth-child(1) {
    left: 9.7rem;
    transform: translateX(-50%);
}
.numbers ul li:nth-child(2) {
    top: 1.35rem;
    left: 13.8rem;
}
.numbers ul li:nth-child(3) {
    top: 4.5rem;
    left: 17rem;
}
.numbers ul li:nth-child(4) {
    top: 8.9rem;
    left: 18.4rem;
}
.numbers ul li:nth-child(5) {
    top: 13.4rem;
    left: 17rem;
}
.numbers ul li:nth-child(6) {
    top: 16.45rem;
    left: 13.8rem;
}
.numbers ul li:nth-child(7) {
    top: 17.8rem;
    left: 9.5rem;
}
.numbers ul li:nth-child(8) {
    top: 16.45rem;
    left: 5.2rem;
}
.numbers ul li:nth-child(9) {
    top: 13.4rem;
    left: 2rem;
}
.numbers ul li:nth-child(10) {
    top: 8.9rem;
    left: .6rem;
}
.numbers ul li:nth-child(11) {
    top: 4.5rem;
    left: 1.5rem;
    transform: translateX(-20%);
}
.numbers ul li:nth-child(12) {
    top: 1.35rem;
    left: 4.8rem;
    transform: translateX(-30%);
}

#visor {
    color: white;
    border-radius: 1rem;
    position: absolute;
    z-index: 8;
    top: 9.5rem;
    font-size: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--middle);
    padding: .1rem;
    width: 7rem;
    text-align: center;
    box-shadow: var(--shadow-pointers);
}

@media (max-width: 660px) {
    * {
        font-size: 1.3rem;
    }
}
@media (max-width: 560px) {
    * {
        font-size: 1rem;
    }
}
@media (max-width: 460px) {
    * {
        font-size: .8rem;
    }
}
@media (max-width: 400px) {
    * {
        font-size: .7rem;
    }
}