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

body{
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    min-width: 20rem;
    background: linear-gradient(to right, rgb(201, 194, 194) 1%, rgba(142, 209, 202, 0.728));
    background-size: contain;
}
.container{
    min-height: 2rem;   
    padding-left: 4rem;
    padding-right: 4rem;
    position: relative;
    top: -32rem;
    display: flex;
    margin: 20rem;
    justify-content: center;
    min-width: 1rem; 
}

/* ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ UPPER AND LOWER BRACELET ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ */

.Bracelet{
    width: 210px;
    height: 85rem ;
    background:linear-gradient(to top,rgb(255, 255, 255)-20rem, rgb(234, 91, 91) 200rem) ;
    display: flex;
    box-shadow: 30px 30px 30px 10px rgba(0,0,0,.605),
    inset 15px 15px 10px rgba(255, 255, 255, 0.75),
    -15px -15px 35px rgba(255, 255, 255, 0.50),
    inset -1px -1px 10px rgba(0,0,0, 9.9);
    border-bottom: 5px solid white;
    border-radius: 10%;
}

/* ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ X ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ */
/* ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ CLOCK ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ */

.clock{
    color: white;
    filter: drop-shadow(1.5px 1.5px 1.5px white);
    border-radius: 20%;
    border-top: 5px solid rgb(76, 74, 74);
    border-bottom: 2.5px solid rgba(0, 0, 0, 0.374);
    min-height: 415px;
    min-width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(0rem, -60rem);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.983) 500%, rgba(255, 255, 255, 0.163)) ; 
    box-shadow: 40px 5px 20px 10px rgba(0, 0, 0, 0.566),
    inset 15px 15px 10px rgba(255, 255, 255, 0.43),
    -15px -15px 35px rgba(255, 255, 255, 0.268),
    inset -1px -1px 40px  rgba(0,0,0, 9.9),
    inset 10px 10px 100px rgba(56, 169, 255, 0.467); 
}

.screen{
    background: url(./imgs/pexels-photo-1037992.webp);
    background-size: cover;
    background-position: center;
    animation: bg  10s  linear;
    color: rgba(49, 49, 49, 0.65);
}

/* @keyframes bg {
    0%{background:  url(./imgs/matcha.jpeg);    background-size: cover;
    background-position: center;}
    50%{background:  url(./imgs/pexels-photo-1037992.webp);    background-size: cover;
    background-position: center;}
    100%{background:  url(./imgs/pexels-photo-5726030.webp);    background-size: cover;
    background-position: center;}

} */

@keyframes bg {
    0%{background: linear-gradient(to bottom,rgba(105, 159, 170, 0.536),rgba(112, 112, 112, 0.652)); color: rgb(181, 213, 123); }
    25%{background: rgba(0, 0, 0, 0.65) ; color: bisque;}
    50%{background: url(./imgs/window.jpeg); background-size:cover; background-position:center; color: rgba(172, 255, 47, 0.439); }
    75%{background: url(./imgs/pexels-photo-5726030.webp); background-size:contain; background-position:60rem; color: rgba(172, 255, 47, 0.439); }
    100%{background: url(./imgs/pexels-photo-1037992.webp); background-size: contain; background-position: center; color: rgba(127, 255, 212, 0.451);}
}



/* ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ X ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ */
/*  ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ HANDS ( SEC, MIN and HR) */


.hand{
    --rotation: 0;
    transform: translateX(0%)rotate(calc(var(--rotation) * 1deg));
    transform-origin: bottom;
    

}
.seconds{
        height: 45%;
        position: absolute;
        top: 5%;
        left: 49.7%;
        background-color: rgb(104, 18, 18);
        border-radius: 50%;
        filter: drop-shadow(2px 1px 10px rgb(0, 0, 0));
        border: 2px solid rgb(244, 32, 32);
        z-index: 13;
}


.minutes{
    width: 10px;
    height: 30%;
    filter: drop-shadow(5px 2px 10px rgb(0, 0, 0));
    border-radius: 40px 40px 150px 150px;
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(255, 255, 255);
    position: absolute;
    left: 49%;
    top: 20%;
    z-index: 12;
}
.hours{
    width: 15px;
    height: 20%;
    background-color: rgb(140, 228, 228);
    position: absolute;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.767));
    border-radius: 40px 40px 150px 150px;
    left: 48%;
    top: 30%;
    z-index: 11;
}

/* ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ X ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ */
/*  ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ NUMBERS ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ */

.number{
    display: flex;
}

.num12,.num3,.num6, .num9{
    /* color: whitesmoke; */
    filter: drop-shadow(1.5px 1.5px 1.5px white);
    margin: 10px;
    padding: 10px;
    font-size: 30px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    transform: translate(-50px, -50px);
}
.num12{
    transform: translate(4.7rem, -10rem);
}
.num3{
    transform: translate(11rem, 0rem);

}
.num6{
    transform: translate(-3rem, 10rem);
}
.num9{
    transform: translate(-16rem, 0rem);
}

/* ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ X ∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆ */



.circle{
    background: linear-gradient(to right, rgb(244, 244, 244), rgb(13, 16, 40));
    height: 25px;
    width: 25px;
    border-radius: 30%;
    z-index: 100;
    transform: translate(8rem, 0rem);


}


@media (min-width: 320px) and (max-width: 480px){
    .container{
        min-height: 60rem;
        min-width:  10rem;
        
    }
    .Bracelet{
        height: 100rem;
    }
    .clock{
        transform: translate(0rem, -75rem);
        min-width: 335px;
        min-height: 350px;
    }
    
    .num12{
        transform: translate(4.7rem, -8.5rem);
    }
    .num3{
        transform: translate(9rem, 0rem);

    }
    .num6{
        transform: translate(-3rem, 8.5rem);
    }
    .num9{
        transform: translate(-15rem, 0rem);
    }
    
}