.flip-card {
   background-color: transparent;
   width: 300px;
   height: 300px;
   perspective: 1000px;
 }
 
 .flip-card-inner {
   position: relative;
   width: 100%;
   height: 80%;
   text-align: center;
   transition: transform 0.6s;
   transform-style: preserve-3d;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   padding-top: 3px;
 }
 
 .flip-card:hover .flip-card-inner {
   transform: rotateY(180deg);
 }
 
 .flip-card-front, .flip-card-back {
   position: absolute;
   width: 100%;
   height: 100%;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   text-decoration-color: black;
 }
 
 .flip-card-front {
  
   color: black;
 }
 
 .flip-card-back {
   background:linear-gradient(to top, #ffffff 0%, #ccccff 100%);
   color: black;
   transform: rotateY(180deg);
   padding: 3px, 2px, 1px, 2px;
   
 }
 .button{
    width:200px;
  height:50px;
  font-size: 25px;
  color:aliceblue;
}