body{ 
    background-color: rgb(119, 189, 236);
    margin: 0px;
    padding: 0px;
}
h1{ 
    margin-bottom: 0px;
    font-size: 35px;
}
h2{
    margin-top: 10px;
   font-size: 30px;
}
.heading{
    text-align: center;
    color: aquamarine;
}

.icon p { 
    color: whitesmoke;
   font-size:4rem;
  animation: h3color 8s  infinite ease-in-out;
  margin-bottom: 2%;
  
}
.h3{ 
    display: flex;
    padding-left: 32%;
}


@keyframes h3color{ 
    0%{color: aqua}
    25%{color: blue;}
    50%{color: red;}
    75%{color: yellow;}
    100%{color: chartreuse;}
}

.icon img
{
     height: 40%;
    width: 80%;  
    padding-top: 2%;
}
.icon{
    display: flex;
  justify-content: center;
    
 }


.rock{ 
    margin-right: 4%;
    cursor: pointer;
        
}

 .paper{ 
     margin-right:4%;
 }
 #message{ 
     text-align: center;
     font-size: 30px;
     padding-top: -60px;
     margin-top: -30px;
     /* animation: message 8s  infinite ease-in-out; */
     color:rgb(115, 128, 0);
 }
 /* @keyframes message{ 
    0%{color: blue}
    25%{color: aqua;}
    50%{color: yellow;}
    75%{color: green;}
    100%{color: red;}
 } */
.button{ 
    display: flex;
    justify-content: center;
    margin-top: -60px;
}
 .btn{
   margin-top: 5%;
   font-size: 25px;
   padding: 0.5%  1.5%;
   font-weight: 600;
   border-radius: 10px;
background-color: transparent;
 }



 /* .icon:hover{
    border: 2px solid green;
    background-color: red;
 } */
 
 .btn:focus{ 
     background-color: green;
 }
#result{ 
    text-align: center;
    font-size: 25px;
    color: rgb(53, 26, 206);
}
 
@media only screen and (max-width:320px),(max-width:375px), (max-width:425px)
{ 
    .icon p { 
       font-size:2rem;
    }
    .button{ 
        margin-top: 10px;
    }
    #message{
        font-size: 25px;
    }
    .btn{ 
        font-size: 20px;
    }
}

@media only screen and (max-width:768px){
     .button{ 
         margin-top: 20px;
     }
}