@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap");
:root {
  --main-color: #00b39b;
  --second-color: #ababab;
  --third-color: #747474;
  --fourth-color: #ffffff;

  --main-font: roboto;
  --second-font: "Work Sans", sans-serif;

  --main-bg-color: #ffffff;
  --second-bg-color: rgb(229, 250, 248);
}

body {
  font: var(--main-font);
}

.item {
  width: 90%;
  margin: 0.4em auto;
  border: #747474 solid 1px;
}

.item:hover {
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 45%);
  /* cursor: pointer; */
}

.item-img {
  width: 15%;
  margin: auto;
}

img {
  height: 50px;
  display: block;
  margin: 0 auto;
}

.item-content {
  width: 50%;
  padding-top: 0.6em;
}

.item-price {
  width: 15%;
  display: flex;
  align-items: center;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.like-button {
  transform: translate(-30px, 20px);
  display: inline-block;
  position: relative;
  font-size: 18px;
  cursor: pointer;
  /* // border: 1px solid black; */
}
.like-button::before {
  font-size: 3em;
  color: gray;
  content: "♥";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.like-button::after {
  font-size: 3em;
  color: #ff3252;
  content: "♥";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s;
}
.like-button.liked::after {
  transform: translate(-50%, -50%) scale(1.1);
}