*
{margin: 0;
    padding: 0;
    box-sizing: border-box;}

header
{display: flex;
width: 100%;
height: 30%;
}

body
{height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

button {
    cursor: pointer;
    background-color: #fff;
    border-radius: 24px;
    border-style: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    color: #3c4043;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: .25px;
    line-height: normal;
    padding: 11px 24px;}
   
   button:hover {
    background: #F6F9FE;
    color: #4895ff;
   }
   
   .container
   {display: flex;
    justify-content: center;
    align-items: center;}

   
.card
{
    border-radius: 5px;
    box-shadow: 7px 7px 13px 0px rgba(50, 50, 50, 0.22);
    padding: 30px;
    margin: 20px;
    width: 400px;
    transition: all 0.3s ease-out;
    background-color: whitesmoke;
    border-left: 3px solid #4895ff
    
  }

  .card:hover {
    transform: translateY(-5px);
    cursor: pointer;
  }
   
  .card p {
    color: black;
    font-size: 16px;
  }