html body {
  height: 100vh;
}

body {
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 680px;
  padding: 100px;
  /*background: #dedede;
  box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;*/
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
  border-radius: 50px;
}

.container {  
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr;
  gap: 3em 1em;
  grid-auto-flow: row;
  grid-template-areas:
    "logo logo logo logo logo"
    "mail twitter linkedin instagram mastodon";
  width: 30%;
  height: 10%;
  place-items: center;
}

.logo { grid-area: logo;}

.mail { grid-area: mail; }

.twitter { grid-area: twitter; }

.linkedin { grid-area: linkedin; }

.instagram { grid-area: instagram; }

.mastodon { grid-area: mastodon; }