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

body{
  display: flex;  
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(45deg, rgb(248, 248, 80), rgb(122, 225, 96));
  position: relative;
 
}
.clock{
    width: max(300px,40vw);
    height: max(300px, 40vw);
    border:10px solid #1bbef4;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 20px rgb(0, 0, 0,0.5);
    margin: auto;
    overflow: hidden;
    background-color: aliceblue;
    user-select: none;
}
.clock::after{
   content: ""; 
   min-width: 15px;
   width: 1vw;
   min-height: 15px;
   height: 1vw;
   position: absolute;
   background-color: black;
   border-radius: 50%;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   z-index: 10;
}
.hand{
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom;
    transform: translateX(-50%) rotate(0deg);
    background-color: black;
    border-radius: 10px;
}

.hour{
    width: 8px;
    height: 70px;
    z-index: 3;
}

.minute{
 width: 4px;
 height: 100px;
 background-color: rgb(80, 80, 80);
 z-index: 2;
}
.second{
    width: 2px;
    height: 120px;
    background-color: red;
    z-index: 1;
}

.number{
   position: absolute; 
   top: max(128px, calc(20vw - 22px));
   width: 100%;
   height: 100%;
   text-align: center;
   transform-origin: center;
   color: rgb(0, 0, 0);
   font-weight:900;
}

.number1{
  transform: rotate(30deg) translateY(min(-120px,calc(30px - 19vw))) rotate(-30deg);
}

.number2{
transform: rotate(60deg) translateY(min(-120px,calc(30px - 19vw))) rotate(-60deg);
}

.number3{
transform: rotate(90deg) translateY(min(-120px,calc(30px - 19vw))) rotate(-90deg);
}

.number4{
transform: rotate(120deg) translateY(min(-120px,calc(30px - 19vw))) rotate(-120deg);
}

.number5{
transform: rotate(150deg) translateY(min(-120px,calc(30px - 19vw))) rotate(-150deg);
}

.number6{
transform: rotate(180deg) translateY( min(-120px,calc(30px - 19vw))) rotate(-180deg);
}
.number7{
transform: rotate(210deg) translateY( min(-120px,calc(30px - 19vw))) rotate(-210deg);
}
.number8{
transform: rotate(240deg) translateY( min(-120px,calc(30px - 19vw))) rotate(-240deg);
}
.number9{
transform: rotate(270deg) translateY( min(-120px,calc(30px - 19vw))) rotate(-270deg);
}
.number10{
transform: rotate(300deg) translateY( min(-120px,calc(30px - 19vw))) rotate(-300deg);
}

.number11{
transform: rotate(330deg) translateY( min(-120px,calc(30px - 19vw))) rotate(-330deg);
}
.number12{
transform: rotate(360deg) translateY( min(-120px,calc(30px - 19vw))) rotate(-360deg);
}

.stop_watch{
   flex: 1;
   min-height: 100vh;
   color: aliceblue;
   font-weight: 800;
   font-family: monospace;
   font-size: 4vw;
   position: relative;
   background: linear-gradient(45deg,#08001f,#30197d);
   margin: auto;
   user-select: none;
}
#container{
    width: 47vw;
    height: 14vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(234, 0, 255, 0.486);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;

}
.stop_watch_btn{
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 1vw;
    display: flex;
}
.stop_watch_btn button{
font-size: min(50px,3vw);
border-radius: 10px;
padding: 10px;
border: none;
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
background-color: rgb(235, 0, 255, 0.11);
cursor: pointer;
margin: 10px;

}

#container::before{
    content: '';
    width: 10vw;
    height: 10vw;
    background-color: #f41b7576;
    border-radius: 5px;
    position: absolute;
    left: -2vw;
    top: -2vw;
    z-index: -1;
}

#container::after{
    content: '';
    width: 10vw;
    height: 10vw;
    background-color: #419affb5;
    border-radius: 50%;
    position: absolute;
    right:  -1.5vw;
    bottom: -2.5vw;
    z-index: -1;
}

.nav{
    color: aliceblue;
    position: absolute;
    left: 3%;
    top: 10%;
    display: flex;
    flex-direction: column;
    text-align: center;
    user-select: none;
}
.nav i{
    margin-bottom: max(2vh,40px);
    cursor: pointer;
}
.nav i.activated{
    color: #f41b758c;
}
.nav label{
    font-family: inherit;
    font-size: 2vw;
}



@media screen and (min-width:1270px) {
    .hour{
        height: 10vw;
    }
    .minute{
        height: 12vw;
    }
    .second{
       height:14vw ; 
    }
    .number{
        font-size: 2.2rem;
        top: max(128px, calc(19vw - 22px));
    }
}

@media screen and (max-width:700px){
  
    #container{
        width: 60vw;
        height: 24vw;
    }
    #container::before{
        width: 15vw;
        height: 15vw;
        left: -3vw;
        top: -3vw;
    }
    #container::after{
        width: 15vw;
        height: 15vw;
        right: -2.5vw;
        bottom: -3.5vw;
    }
    .stop_watch_btn {
        margin-top: -7.5vh;
    }

    .nav label {
        font-size: 2vh;
    }

    .stop_watch_btn button {
        font-size: 2vh;
        
    }
    
}