/*  Cards  */

.card0{
  display: inline-block;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 0.75rem;
  width: -moz-fit-content;
  width: fit-content;
}

.card1{
  display: inline-block;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 1.75rem;
  width: -moz-fit-content;
  width: fit-content;
}

.card2{
  display: inline-block;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 2.75rem;
  width: -moz-fit-content;
  width: fit-content;
}

.card3{
  display: inline-block;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 3.75rem;
  width: -moz-fit-content;
  width: fit-content;
}

.quote-card{
  display: inline-block;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 0.75rem;
  text-align: center;
  align-items: center;
  width:200px;
  height:200px;
  cursor: grab;
}

.quote-card:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}
.quote-author{float: right;font-weight: bold;}
.quote-author::before{content: "- By "}

.card-hover {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 1.75rem;
  width: -moz-fit-content;
  width: fit-content;
}

.card-hover:hover {box-shadow: 0 3px 6px 0 rgba(0,0,0,0.5);}

/* .draag{
  position:absolute;
  top:50px;
  left:10px;
  width:200px;
  height:200px;
} */

/*
.dragging{
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
} */

/*
.container {
  padding: 2px 16px;
} */

/* .card{
  padding: 0.75rem;
  box-shadow: 2px 4px 8px #585858;
  border-radius: 5px;
} */
/* 50px 30px 5px; */
/* filter: drop-shadow(2px 4px 8px #585858); */

/* .mycard{
  top:50px;
  left:10px;
  width:200px;
  height:200px;
} */