body{
    background: url('bg.jpg');
    display: flex;
    flex-direction: column;
    height: 80%;
    background-size: cover;
}

.title1{
width: 100%;
margin-top: 40px;
text-align: center;
font-size: 80px;
font-weight: bold;
color: white;
}



.main{
    width: 100%;
    height: 300px; 
    text-align: center;
    display: flex;
    margin: auto;

}


.circle{
    background: conic-gradient(rgb(38, 219, 243) 0%,
    rgb(103, 222, 235) 33%,
    rgb(255, 255, 255) 33%,
    rgb(255, 255, 255) 50%,
    rgb(136, 236, 204) 50%,
    rgb(0, 175, 93) 100%
    );
    width: 280px;
    height: 280px;
    border-radius: 100%;
    margin: auto;
    align-items: center;
    display: flex;
    color: white;
    text-align: center;

}


.circle2{
    background-color: rgb(14, 0, 41);
    width: 260px;
    height: 260px;
    border-radius: 100%;
    margin: auto;
    align-items: center;
    display: flex;
    color: white;
    text-align: center; 

}


.text1{
    width: 100%;
    text-align: center;
    font-size: 30px;
}


.main2{
    width: 320px;
    height: 320px; 
    
    display: flex;
    margin: auto;
}


.pointer{ 
    width: 320px;
    height: 320px;
    position: absolute; 
    animation: charkhesh 12s linear infinite; 
    transform: rotate(45deg);

}


.maah{
    width: 30px;
    height: 30px;
    background-color: white;
    position: absolute;
    border-radius: 100%;

}
@keyframes charkhesh {
    from{
        transform: rotate(45deg);
    }
    to{
        transform: rotate(405deg);
    }

}
@keyframes step1 {
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.3);
    }
}
@keyframes step2 {
    from{
        transform: scale(1.3);
    }
    to{
        transform: scale(1);
    }
}
.dam{
        animation: step1 linear 4s infinite;
}
.bazdam{
        animation: step2 linear 6s infinite;
}
.hold{
    transform: scale(1.3);
}