@import url('https://fonts.googleapis.com/css?family=Catamaran|Righteous');


body{
    font-family: 'Catamaran', sans-serif;
    background-color: indianred;
    background-image: url("img/casion.jpg");
  background-size: cover;
  height: 500px;
  background-repeat: no-repeat;
    color: white

    }

.wrapper2{
    height: 601px;
    width: 501px; 
    margin-top: 5%;
    margin-left: 30%; 
    border: 2px solid white;
    border-radius: 5px;
    background-color: rgb(4, 61, 4)
}
.wrapper{

    text-align: center;
    position: absolute;
    margin-top: 1%;
    margin-left: 1%; 
    height: 600px;
    width: 500px; 



    border: 5px solid white;
    border-radius: 5px;
    background-color: rgb(49, 83, 14)
 
}
h2{
    /* position: absolute; */
    margin-top: 100px;
    font-family: 'Righteous', cursive;


}

.buttonArr {

    position: absolute;
    
    margin-top: 20px; 
    margin-left: 200px;
    font-size: 30px;
    padding:4px 10px;


}

#reset {
    


}
#status { 

    margin-top: 5px;
   

} 

img{ 
    border:2px solid  black; 
    border-radius: 20px}
#image{

   height: 200px;
  
} 

button{
    position: absolute;

   height: 30px;
   width: 100px;
   font-size: 22px;
   border-radius: 2px;

}

img:hover{
animation: shake 0.5s infinite ;

}
p{margin: 3px}

.rollDice{
    border:2px solid  white; 
/* transform:scale(0.5) 1s infinite linear; */

}



@keyframes shake {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }
  
    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }