@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900&display=swap");
:root {
  --base-background-color: #7f92bd;

  --base-text-color: #000000;

  --reflection: #8371dd;
}
* {
  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Montserrat", sans-serif;
}
body {
  display: flex;

  margin-left: 70px;

  margin-top: -25%;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  background: var(--base-background-color);

  overflow-x: hidden;
}
.container {
  position: relative;

  display: flex;

  justify-content: space-around;

  align-items: center;

  flex-wrap: wrap;

  width: 1100px;
}
.container .card {
  width: 320px;

  margin: 20px;

  padding: 40px 30px;

  background: var(--base-background-color);

  align-items: center;

  border-radius: 40px;

  box-shadow: -6px -6px 20px var(--reflection), 6px 6px 20px rgba(0, 0, 0, 0.1);
}
.container .card:hover {
  box-shadow: inset -6px -6px 10px var(--reflection),
    inset 6px 6px 20px rgba(0, 0, 0, 0.1);
}
.container .card .imgNeoMorph {
  position: relative;

  text-align: center;

  width: 100px;

  height: 100px;

  border-radius: 50%;

  margin: 0 auto;

  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1),
    0 0 0 5px var(--base-background-color), 6px 6px 20px rgba(0, 0, 0, 0.5),
    -10px -8px 20px rgba(255, 255, 255, 0.5);
}

.container .card .imgNeoMorph img {
  width: 100px;

  height: 100px;

  border-radius: 50%;
}

.container .card .contentNeoMorph {
  position: relative;

  margin-top: 20px;

  text-align: center;
}

.container .card .contentNeoMorph h2 {
  color: var(--base-text-color);

  font-weight: 700;

  font-size: 1.4rem;

  letter-spacing: 2px;
}

.container .card .contentNeoMorph p {
  color: var(--base-text-color);
}

.container .card .contentNeoMorph a {
  display: inline-block;

  padding: 10px 20px;

  margin-top: 15px;

  border-radius: 40px;

  color: var(--base-text-color);

  font-size: 16px;

  text-decoration: none;

  box-shadow: -6px -6px 20px var(--reflection), 6px 6px 20px rgba(0, 0, 0, 0.1);
}

.container .card .contentNeoMorph a:hover {
  box-shadow: inset -4px -4px 10px var(--reflection),
    inset 4px 4px 10px rgba(0, 0, 0, 0.1);
}

.container .card a:hover span {
  display: block;

  transform: scale(0.98);
}
.girl {
  font-size: 16px;

  color: white;

  font-family: "Montserrat", sans-serif;

  border-radius: 40px;

  box-shadow: -6px -6px 20px var(--reflection), 6px 6px 20px rgba(0, 0, 0, 0.1);

  height: 200px;

  display: flex;

  padding: 10px 10px;

  justify-content: center;

  align-items: center;
}
.container .card p {
  font-size: 15px;
}