body {
  color: #102A43;
  background: #F0F4F8;
}

p {
  line-height: 1.8;
}

::selection {
  color: #FFF;
  background: #27AB83;
}

a:link, a:visited, a:active {
  text-decoration: none;
  color: #334E68;
}

a:hover {
  text-decoration: none;
  color: #627D98;
}

.img-card {
  border-radius: 10px 10px 0px 0px;
  max-width: 100%;
}

.img-circle {
  border-radius: 50%;
  max-width: 70px;
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .5);
}

.img-circle-sm {
  border-radius: 50%;
  max-width: 35px;
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .5);
}

.img-rounded {
  border-radius: 50%;
  width: 100%;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
  padding-bottom: 50px;
}

.recipe-card, .inbox-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 14px 28px -5px rgba(50,50,93,.25),
              0 8px 16px -8px rgba(0,0,0,.3);
  cursor: pointer;
  transition-property: transform, box-shadow;
  transition-duration: .30s;
}

.recipe-card:hover, .inbox-card:hover {
  box-shadow: 0 30px 60px -12px rgba(50,50,93,.25),
              0 18px 36px -18px rgba(0,0,0,.3);
  transform: translateY(-2px);
}

.editable {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.editable:hover {
  cursor: pointer;
  color: #334E68;
  opacity: 0.7;
}