.main {
    width: 100%;
    height: 100%;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color:lightgrey;
}

.profile-card {
  flex: 40%;
  display:block;
  position: relative;
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  height: 200px;
  background: #fff;
  padding: 30px;
  border-radius: 50%;
  box-shadow: 0 0 22px #3336;
  transition: .6s;
  margin: 50px 20px 30px 20px;
}
.profile-card:hover {
  border-radius: 10px;
  height: 300px;
}
.profile-card .img {
  position: relative;
  width: 100%;
  height: 95%;
  transition: .6s;
  z-index: 1;
}
.profile-card:hover .img {
  transform: translateY(-60px);
}
.img img {
  width: 100%;
  height:100%;
  border-radius: 50%;
  box-shadow: 0 0 22px #3336;
  transition: .6s;
}
.profile-card:hover img {
  border-radius: 10px;
}
.caption {
  padding-top: 10px;
  text-align: center;
  transform: translateY(-80px);
  opacity: 0;
  transition: .6s;
}
.profile-card:hover .caption {
  opacity: 1;
}
.caption h3 {
  font-size: 21px;
  margin: 20px 0 8px 0;
}
.caption p {
  font-size: 15px;
  color: #0c52a1;
  margin: 1px 0 1px 0;
}
.caption a {
  padding: 1px;
}
.caption a img {
  padding-top: 6px;
  width: 30px;
  height: 30px;
}
p{
  font-size: 17px;
}

.tablefont{
  text-align: center; 
  color: black;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-decoration:underline;
}

.tableposition{
  text-align:center;
}

table{
width: 100%;
text-align: justify;
table-layout: fixed;
}

.alignment{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size:50px;
font-weight:bold;
text-align:center;
}

.motto{
  color:rgb(39, 129, 224);
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size:50px;
   text-align:center;
    margin: 10px 0px 10px 0px;
}

.secondary{
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size:50px;
 text-align:center;
   margin: 10px 0px 10px 0px;
}