@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');


body{
    background: url('img/jj.jpg');
    display: flex;
    flex-direction: column;
    height: 80%;
}

.t1{
width: 100%;
margin-top: 40px;
text-align: center;
font-family: 'Montserrat','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 30px;
font-weight: bold;
color: white;
}



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

}


.cr{
    background: conic-gradient(
        rgba(13, 20, 248, 0.281) 0%,
        rgba(9, 86, 252, 0.281)40%,
        rgba(29, 13, 248, 0.281) 40%,
        rgba(46, 39, 143, 0.281) 60%,
        rgba(13, 68, 248, 0.281) 60%,
        rgba(13, 17, 248, 0.281) 100%
    );
    width: 300px;
    height: 300px;
    border-radius: 100%;
    margin: auto;
    align-items: center;
    display: flex;
    color: white;
    font-family: 'Montserrat','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;

}


.cr2{
    background: url('img/w.png');
    background-position: center;
    width: 280px;
    height: 280px;
    border-radius: 100%;
    margin: auto;
    align-items: center;
    display: flex;
     color: white; 
    font-family: 'Montserrat','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     text-align: center; 
    

}


.matn1{
    width: 100%;
    font-size: 25px;
     font-weight: bold;
    text-align: center;
    color: #000000;
}


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


.p{ 
    width: 360px;
    height: 360px;
    position: absolute; 
    animation: charkhesh 5s linear infinite; 
    transform: rotate(45deg);

}


.moon{
    background : url(img/moon2.jpg);
    background-position: center;
    margin: auto;
    align-items: center;
    display: flex;
    width: 60px;
    height: 60px;
    position: absolute;
    border-radius: 100%;

}

.dam{
    
    animation: step1 5s linear infinite;
}


.hold{
    
    transform: scale(1.2);    
}



.bazdam{
    animation: step2 5s linear infinite;
}


@keyframes charkhesh {

    from{
        transform: rotate(45deg)
    }

    to{
         transform: rotate( 405deg) 
    }
    
}


@keyframes step1 {
    from{
        transform: scale(1);
    }

    to{
         transform: scale(1.5); 
    }
}


@keyframes step2 {
    from{
        transform: scale(1.2);
    }

    to{
         transform: scale(0.7); 
    }
}