:root{ 
    --card-background-color: seashell;  
    --card-separator-color: #8d8b8b;
    --card-separator-name-color: seashell;
    --card-separator-onmouseover: white;
    --card-alltextcolor: #110441;
    --card-companytext-color: #f7f6fa;
 
}



.card {
    background-color:var(--card-background-color);
    width: 300px;
    height: 400px;
    color: black;
    box-shadow: 0px 0px 13px 1px #7a72ee;
    max-width: 300px;
    margin: 13px;
    text-align: center;
    border-radius: 10px;
    opacity: 94%;
  }

  .card .name {
    color: var(--card-alltextcolor);
    text-shadow: 1px 1px;
  }


  .card .title {
    color: var(--card-companytext-color);
    font-size: 19px;

  }

  .card .phonenumber {
    color: var(--card-alltextcolor);
    font-size: 25px;
    vertical-align: center;
    text-shadow: 1px 1px;
  }

  .card .card-email {
    color: var(--card-alltextcolor);
    font-size: 15px;
    vertical-align: bottom;

  }


  

  .card a {
    text-decoration: none;
    font-size: 22px;
    color: black;
  }


  .card a:hover {
    opacity: 1;
    color:  var(--card-separator-onmouseover);
    
  }

  .card .cardimage {
    margin-top: 25px;
    align-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: -4px -4px 12px rgba(0, 0, 0, 0.4);

  }

  .card .separator{
    padding-top: 4px;
    padding-bottom: 1px;
    background-color: var(--card-separator-color);

  }

  .card .separator-mini{
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: var(--card-separator-color);
  }

  .card .separator-name{
        padding-top: 3px;
        padding-bottom: 3px;
        background-color: var(--card-separator-name-color);
    
  }