style.css

*{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    :root{
          --color-bg:rgb(183, 212, 254);
          --color-card:#ffffff;
          --color-gradient: linear-gradient(to top,#4aa3ff,#69c3f7);
    }
    
    
    body{
          display: grid;
          place-items: center;
          min-height: 100vh;
          font-family: 'Poppins',sans-serif;
          background-color: var(--color-bg);
    }
    
    .card{
          width: 24rem;
          background-color: var(--color-card);
          border-radius: 1rem;
          overflow: hidden;
          box-shadow: inset 0 -.5rem 2rem var(--color-bg),
                      0 0 1rem rgba(0, 0, 0, 0.1);
          transform: scale(0.8) translateX(-18px);
          transform-origin: center;
    }
    
    .card__image{
          width: 100%;
          height: 16rem;
          object-fit: cover;
    }
    .card__content{
          padding: 2rem;
          text-align: center;
    }
    
    .card__name{
          font-size: 1.8rem;
          background-image: var(--color-gradient);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-bottom: .5rem;
    }
    
    .card__desc{
          margin-bottom: 2rem;
          color: rgba(0, 0, 0, 0.856);
    }
    
    .card__btn{
          text-decoration: none;
          display: inline-block;
          padding: 1rem 3rem;
          background-image: var(--color-gradient);
          color: #fff;
          border-radius: 1.4rem;
          font-size: 1.2rem;
          box-shadow: inset 0 0 1rem rgba(255,255,255,.4);
          transition: box-shadow, transform .1s ease-in;
    }
    
    .card__btn:hover{
          box-shadow: inset 0 0 0 rgba(255,255,255,.4),
                      0 0 1rem rgba(0, 0, 0, 0.1);
                transform: scale(1.05);
    }