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

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("/assets/wallpaperflare.com_wallpaper.jpg");
    background-size: 100%; 
    font-family: 'Playfair Display', serif;
}



.clock {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60vh;
    height: 60vh;
    margin-top: 14vh;
    background-image: url("/assets/background.jpg");
    background-size: 90vh; 
    border-radius: 50%;
    border: 1px solid rgb(255, 29, 187);
    outline: solid #cf0098 6vh;
    outline-offset: 0.2vh;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .7);
}

.n12, .n3, .n6, .n9 {
    position: absolute;
    font-size: 9vh;
    color: gold;
    text-shadow: 1px 1px 4px rgba(0, 0, 0,.4);
}
.n12 {
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    
}
.n3 {
    right: 10px;
    top: 46%;
    transform: translateY(-50%);
}
.n6 {
    bottom: 6px;
    right: 50%;
    transform: translateX(50%);
}
.n9 {
    left: 10px;
    top: 46%;
    transform: translateY(-50%);
}



.clock .number {
    --rotation:0;
    position: absolute;
    width: 100%;
    height: 100%;
    color: gold;
    text-shadow: 1px 1px 4px rgba(0, 0, 0,.4);
    font-size: 4vh;
    text-align: center;
    transform: rotate(var(--rotation));
}



.clock .n1 {--rotation: 30deg;}
.clock .n2 {--rotation: 60deg;}
.clock .n4 {--rotation: 120deg;}
.clock .n5 {--rotation: 150deg;}
.clock .n7 {--rotation: 210deg;}
.clock .n8 {--rotation: 240deg;}
.clock .n10 {--rotation: 300deg;}
.clock .n11 {--rotation: 330deg;}

img {
    position: absolute;
    width: 18%;
    top: 16%;
    left: 50%;
    transform: translate(-50%);
    z-index: 2;
}



.clock::after {
    content: "";
    position: absolute;
    width: 4vh;
    height: 4vh;
    background-color: gold;
    z-index: 11;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(0, 0, 0,.8);
}

.clock .arrow {
    --rotation: 0;
    position: absolute;
    border-radius: 50% 50% 0 0;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom;
    z-index: 10;
    transform: translate(-50%) rotate(calc(var(--rotation) * 1deg));
    
}

.clock .arrow.seconds {
    width: 0.7vh;
    height: 46%;
    background-color:red;
    box-shadow: 1px 1px 4px rgba(0, 0, 0,.4);
}

.clock .arrow.minutes {
    width: 1.4vh;
    height: 40%;
    background-color: black;
    box-shadow: 1px 1px 4px rgba(0, 0, 0,.4);
}

.clock .arrow.hours {
    width: 1.5vh;
    height: 30%;
    background-color: black;
    box-shadow: 1px 1px 4px rgba(0, 0, 0,.4);
}


.clock .blockCal {
    position: absolute;
    background-color: aliceblue;
    width: 20%;
    height: 6%;
    top: 47%;
    left: 65%;
    border: 0.5px solid rgb(175, 174, 174);
    border-radius: 8%;
    outline: 0.5px solid rgb(7, 7, 7);
    outline-offset: 1px;
}

.blockCal #calendar {
    position: absolute;
    top: 18%;
    right: -10%;
    transform: translate(-50%, -18%);
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 3.3vh;
}

.blockCal #week_day {
    position: absolute;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 3.3vh;
    right: 44%;
}






@media(max-width:767px) {
 

    body {
        height: 100vh;
        background-image: url("/assets/Frame\ 8-min.jpg");
        background-size: 170vh; 
        background-position: center;
        background-position-y:top;
        background-position-x: 47%;
        font-family: 'Playfair Display', serif;
    }


    .clock {
        width: 40vh;
        height: 40vh;
        margin-top: 19vh;
        background-size: 62vh; 
        border-radius: 50%;
        outline: solid #cf0098 4vh;
        outline-offset: 0.2vh;
        left: 8%;
    }

    .n12, .n3, .n6, .n9 {
        font-size: 6vh;
    }

    .clock .blockCal {
      
        width: 20%;
        height: 6%;
        top: 50%;
    }
    
    .blockCal #calendar {
        font-size: 2.3vh;
    }
    
    .blockCal #week_day {
        font-size: 2.3vh;
    }
}