@import url('https://fonts.googleapis.com/css2?family=Bellota+Text:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');


body
{
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   width: 100%;
   background: #f2f3f7;
}
.containera
{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
}
.containera .card
{
   width: 330px;
   height: 416px;
   padding: 60px 30px;
   margin: 20px;
   background: #f2f3f7;
   box-shadow: 0.6em 0.6em 1.2em #d2dce9,
               -0.5em -0.5em 1em #ffffff;
   border-radius: 20px;
}
.containera .card .content
{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.containera .card .content .imgBx
{
   width: 180px;
   height: 180px;
   border-radius: 50%;
   position: relative;
   margin-bottom: 20px;
   overflow: hidden;
}
.containera .card .content .imgBx img
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.containera .card .content .contentBx h4
{
   color: #36187d;
   font-size: 1.7rem;
   font-weight: bold;
   text-align: center;
   letter-spacing: 1px;
}
.containera .card .content .contentBx h5
{
   color: #6c758f;
   font-size: 1.2rem;
   font-weight: bold;
   text-align: center;
}
.containera .card .content .sci
{
   margin-top: 20px;
}
.containera .card .content .sci a
{
   text-decoration: none;
   color: #000000;
   font-size: 30px;
   margin: 10px;
   transition: color 0.4s;
}
.containera .card .content .sci a:hover
{
   color: #0196e3;
}
/*   colors
        #f2f3f7
        #d2dce9
        #36187d
        #6c758f
        #0196e3
 */