body {
      background-color: rgb(160, 160, 249);
}

.shiva{
   border: solid black 5px;
   height: auto;
   box-shadow: 10px 15px 10px #242222;
   border-radius: 15px;
   display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
   
}


.btn1{
    text-align: center;
    width: 100%;
}

.button1{
   
    margin-left: auto;
    margin-right: auto;
    font-size: 40px;
    padding: 10px;
    width:30%;
    background-color: rgb(6, 197, 6);
    border: solid  rgb(101, 2, 2) 5px;
    box-shadow: 10px 15px 10px #242222;
    border-radius: 10px;
    font-weight: 800;
}

.button1:hover{

background-color: rgb(247, 243, 7);
border: solid  rgb(4, 0, 0) 8px;

}


.r_button{
    text-align: center;
    margin-top: -20px;
    
}



.button2{
    margin-top: 30px;
    margin-left: auto;
    margin-right: 20px;
    font-size:large;
    padding: 3px;
    width:20%;
    background-color: rgb(105, 141, 248);
    border: solid  rgb(2, 28, 174) 2px;
    box-shadow: 10px 15px 10px #242222;
    border-radius: 10px;
    font-weight:700;
}

.button2:hover{
    border: solid  rgb(109, 2, 14) 5px;
    background-color: rgb(1, 183, 183);

}


#a1{
    background-color: rgb(240, 227, 49);
}
#a2{
    background-color: rgb(249, 75, 237);
}



/* this is for respnsive lord shiva image*/
@media screen and (max-width: 850px){
.shiva{
    width: 98%;
    height: auto; 

}

.button1{
    width: 100%
}

.button2{
    display: block;
    width: 100%;
    font-size: x-large;
    
}

.button3{
   
    height: auto;
}




}








/* om animation*/


.ani {
    position:relative;
    visibility: hidden;
  
}

h2 {
   
    font-size: 50px;
    font-family: serif;
    color: transparent;
    text-align: center;
    animation: effect 1s linear infinite;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgb(119, 2, 2);
    font-weight: bold;
    margin-top: 10px;
   
    
    
    
}

@keyframes effect {
    0% {
        background: linear-gradient(
                #52ff02, #ff7b00);
        -webkit-background-clip: text;
    }

    10% {
        background: linear-gradient(
                #02ff6b, #ffd900);
        -webkit-background-clip: text;
    }

    20% {
        background: linear-gradient(
            #02ffb7, #d9ff00);
        -webkit-background-clip: text;
    }

    30% {
        background: linear-gradient(
            #02fbff, #77ff00);
        -webkit-background-clip: text;
    }

    40% {
        background: linear-gradient(
            #02b7ff, #00ff00);
        -webkit-background-clip: text;
    }

    50% {
        background: linear-gradient(
            #0256ff, #00ff7b);
        -webkit-background-clip: text;
    }


    60% {
        background: linear-gradient(
            #0213ff, #00e1ff);
        -webkit-background-clip: text;
    }

    70% {
        background: linear-gradient(
            #3502ff, #0084ff);
        -webkit-background-clip: text;
    }
    

    80% {
        background: linear-gradient(
            #8102ff, #0015ff);
        -webkit-background-clip: text;
    }


    90% {
        background: linear-gradient(
            #d502ff, #4000ff);
        -webkit-background-clip: text;
    }

    100% {
        background: linear-gradient(
            #ff0274, #d900ff);
        -webkit-background-clip: text;
    }



}







.develop{
    text-align: center;
    

  
   
}



.ddd{
    
margin: auto;
width: 40%;
padding: 5px;
      background-color: rgb(255, 251, 3);
    font-size:large; 
    border: solid  rgb(2, 28, 174) 2px;
    box-shadow: 10px 15px 10px #242222;
    border-radius: 10px;
    font-weight:700;
    color: rgb(181, 9, 9);
      


    
}