body{background-color:light-grey;
display:flex;
justify-content:center;
align-items:center;
height:100vh;}




#cards{width:900px;
      height:500px;
      background-color:#7FFFD4;
      display:flex;
      gap:2%;
      border-radius:10px;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;}

#card-img{border-radius:10px 0 0 10px;
width:80%;}

#text-card{display:flex;
          flex-direction:column;
          justify-content:center;
          padding:20px 15px 0 15px;
}

h2{font-size:40px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom:15px;
    border-bottom: 4px solid #7B68EE;
    width:70%;}

h3{font-size:15px;
  font-family: 'Montserrat', sans-serif;
  margin-bottom:20px;}


p{font-size:12px;
  font-family: 'Montserrat', sans-serif;
  line-height:16px;
  margin-top:0;}

#card-button{display: flex;
        align-items:center;
        margin-top: 20px;}


button{width:50%;
  height:30px;
background-color:#7B68EE;
color:white;
border-radius:5px;
border:none;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transition: background-color 1s ease-in-out, transform 0.3s ease-out, box-shadow 0.3s ease-out;}


button:hover{cursor:pointer;}
button:active
 {
    
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
    transform: translateY(1px);
   filter: hue-rotate(90deg);
    transition: all 0.1s ease-in;
}