* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: system-ui;
     text-transform: capitalize;
     text-align: center;
   }
   
   .cards {
     display: inline-block;
     padding: 20px 30px;
     border-radius: 20px;
     border: 1px rgba(211, 211, 211, 0.486) solid;
     margin: 10px;
     transition: 0.6s;
   }
   
   .cards:hover {
     transition: 0.6s;
     box-shadow: 5px 5px 20px lightgray;
   }
   
   .cards img {
     transition: 0.2s;
     width: 120px;
     border-radius: 50%;
     margin-bottom: 10px;
     padding: 2px;
   }
   
   .cards:hover img {
     transition: 0.2s;
     outline: 4px solid grey;
   }
   
   .cards p {
     color: grey;
   }
   
   .social-media a i {
     color: grey;
     font-size: large;
     transition: 0.5s;
     padding: 10px 0;
   }
   
   .social-media a i:hover {
     transition: 0.5s;
     transform: scale(2);
   }
   
   .social-media {
     margin-top: 20px;
     display: flex;
     justify-content: center;
     gap: 12px;
   }
   
   h1 {
     margin: 20px 0;
   }
   
   .main-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
   }
   
   footer {
     margin-top: 100px;
   }
   footer a {
     text-decoration: none;
     color: grey;
   }