@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900&display=swap');
:root {

  --base-background-color: #98FB98;

  --base-text-color: #006400;

  --reflection: #F0E68C;

}
* {

  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);

}
.ok {
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;


      }