/* LINKS PAGE */

body {
  background-color: #fffcfe;
}

/* ♡ highlight selection ♡ */

::selection {
  color: #ffc4d4;
}

@font-face {
  font-family: "loverine";

  src: url("/fonts/loverine.otf")
       format("opentype");

  font-weight: normal;
  font-style: normal;
}

/* page wrapper */

html {
  scroll-behavior: smooth;
}

.sweet-page {
  width: 950px;

  margin: 70px auto;

  color: #8a7070;

  font-family: Verdana, sans-serif;
  font-size: 10px;
}


/* heading */

.sweet-header {
  position: relative;

  width: 520px;

  margin: 0 auto 50px;

  padding: 18px 25px;

  text-align: center;

  background: #fff;

  border: 8px solid transparent;
  border-image:
    url("/img/laceborder.png")
    8 fill round;
}

.sweet-header::after {
  content: "";

  position: absolute;

  inset: 8px;

  border: 1px dashed #e7c9d3;

  pointer-events: none;
}

.sweet-bow {
  position: absolute;

  width: 48px;

  pointer-events: none;

  z-index: 5;
}

.sweet-bow-left {
  top: -18px;
  left: -18px;

  transform: rotate(-25deg);
}

.sweet-bow-right {
  top: -18px;
  right: -18px;

  transform:
    scaleX(-1)
    rotate(-25deg);
}

.sweet-header h1 {
  margin: 0 0 8px;

  font-family: "rainy hearts";

  font-size: 28px;
  font-weight: normal;

  color: #9f7f87;
}

.sweet-note {
  margin: 0;
  padding: 0;

  color: #ae929a;

  font-size: 9px;

  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* shelves */

.sweet-shelf {
  margin-bottom: 60px;
}

.sweet-row {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 20px;

  align-items: end;

  padding: 0 25px;
}


/* treats */

.sweet-treat {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;

  color: inherit;
}


/* desserts */

.sweet-image {
  max-width: 150px;
  max-height: 145px;

  object-fit: contain;
  display: block;

  filter:
    saturate(.82)
    drop-shadow(0 8px 14px rgba(194, 153, 170, .22));

  transition:
    transform .55s ease,
    filter .55s ease;
}

.sweet-treat:hover .sweet-image {
  transform: translateY(-4px);

  filter:
    saturate(.92)
    drop-shadow(0 12px 18px rgba(194, 153, 170, .28));
}


/* bakery cards */

.sweet-card {
  position: relative;

  margin-top: 8px;

  min-width: 125px;

  padding: 7px 10px;

  background: #fff;

  border: 1px solid #ecd2dc;

  color: #a88690;

  text-align: center;

  font-family: "loverine";

  font-size: 12px;

  box-shadow:
    0 2px 5px
    rgba(211,164,185,.08);

  transition:
    border-color .45s ease;

  overflow: hidden;
}

.sweet-dessert-name,
.sweet-site-name {
  display: block;

  transition:
    opacity .45s ease;
}

.sweet-site-name {
  position: absolute;

  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;

  font-family: Verdana, sans-serif;

  font-size: 9px;

  letter-spacing: .3px;

  transition:
    opacity .45s ease .08s;
}

.sweet-treat:hover .sweet-dessert-name {
  opacity: 0;
}

.sweet-treat:hover .sweet-site-name {
  opacity: 1;
}

.sweet-treat:hover .sweet-card {
  border-color: #e2b8c8;
}


/* shelf */

.sweet-board {
  position: relative;

  height: 20px;
  margin-top: 14px;

  background: #fff;

  border: 1px solid #ecd3dc;

  box-shadow:
    0 10px 20px rgba(194, 153, 170, .16),
    0 2px 0 rgba(255,255,255,.9) inset;
}

.sweet-board::after {
  content: "";

  position: absolute;

  left: -1px;
  right: -1px;
  top: 100%;

  height: 12px;

  background: #fff7fa;

  border-left: 1px solid #ecd3dc;
  border-right: 1px solid #ecd3dc;
  border-bottom: 1px solid #ecd3dc;
}

.sweet-lace {
  position: relative;

  display: block;

  width: 100%;

  margin-top: -2px;

  transform: translateY(-27px);

  pointer-events: none;
}