.page {
  min-inline-size: 320px;
  min-block-size: 100dvb;
  font-family: var(--main-font, 'Inter'), sans-serif;
  font-variation-settings: 'wght' var(--weight-main-text, 410);
  background-image: repeating-linear-gradient(to right, #d3d3d3 0 2px, transparent 2px 4px),
    repeating-linear-gradient(to bottom, #d3d3d3 0 2px, transparent 2px 4px),
    linear-gradient(#e7e7e7 0.01%, #1a1a1a 100%);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  justify-self: center;
  margin-block-start: 98px;
  margin-block-end: 96px;
  padding-block-start: clamp(7.5rem, 7.28rem + 0.939vw, 8.125rem);
  padding-block-end: clamp(7.5rem, 7.28rem + 0.939vw, 8.125rem);
  background-color: var(--main-color);
  border: var(--accent-color) solid 2px;
  font-family: var(--decorative-font, 'Press Start 2P');
  text-transform: uppercase;
}

.main__list {
  display: flex;
  flex-direction: column;
  gap: 50px;

}

.header__title {
  font-size: clamp(3.063rem, 2.71rem + 1.502vw, 4.063rem);
}

.header__text {
  font-size: clamp(0.875rem, 0.677rem + 0.845vw, 1.438rem);
}

.weight-card {
  inline-size: var(--inline-size-article, clamp(23.438rem, 16.197rem + 30.892vw, 44rem));
}

.card {
  background-color: var(--main-color);
  border: var(--accent-color) solid 2px;
  justify-self: center;
}

.card__title {
  font-size: 18px;
  font-variation-settings: 'wght' var(--weight-title-text, 715);
  margin: 4px 11px;
}

.card__container-image {
  position: relative;
}

.card__lable {
  position: absolute;
  z-index: 1;
  inset-block-start: 27px;
  inset-inline-end: 27px;
  font-family: var(--decorative-font, 'Press Start 2P');
  font-size: 14px;
  opacity: 50%;
  mix-blend-mode: hard-light;
  -webkit-text-stroke: 1px var(--color-border-lable);
}

@supports (text-stroke: 1px var(--color-border-lable)) {
  .card__lable {
    text-stroke: 1px var(--color-border-lable);
  }
}

@supports not (text-stroke: 1px var(--color-border-lable)) {
  .card__lable {
    text-shadow: -0.5px 0 var(--color-border-lable), 0 0.5px var(--color-border-lable), 0.5px 0 var(--color-border-lable), 0 -0.5px var(--color-border-lable);
  }
}

.card__image {
  inline-size: clamp(23.188rem, 15.947rem + 30.892vw, 43.75rem);
  block-size: clamp(23.313rem, 16.116rem + 30.704vw, 43.75rem);
  object-fit: cover;
  object-position: center;
  border-top: var(--accent-color) solid 2px;
  border-bottom: var(--accent-color) solid 2px;
}

.filter-contrast {
  filter: contrast(1.2);
}

.filter-graycale {
  filter: grayscale(1);
}

.filter-brightness {
  filter: brightness(1.3);
}

.filter-saturate {
  filter: saturate(1.5);
}

.filter-sepia {
  filter: sepia(100%);
}

.filter-rotate {
  filter: hue-rotate(-100deg);
}

.multi-filter {
  filter: saturate(1.5) hue-rotate(90deg) contrast(75%);
}

.card__container-text {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 21px 27px;
  font-size: 18px;
  line-height: 21px;
}

.card__button-container {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  margin-inline-end: 27px;
  margin-block-end: 27px;
  transition: border 0.3s ease;
}

.card__icon-button {
  border: none;
  padding: 0;
  background-color: transparent;
  outline: 2px solid transparent;
  transition: outline 0.3s linear;
}

.card__icon-button:focus {
  outline: none;
}

.card__icon-button:focus-visible {
  outline: 2px solid var(--accent-color);
}

.button {
  position: relative;
  border: none;
  justify-content: center;
  background-color: var(--main-color);
  outline: var(--accent-color) solid 2px;
  transition: box-shadow 0.3s ease;
  padding-block-start: 12.5px;
  padding-block-end: 12.5px;
  cursor: pointer;
}

.card__like-button {
  display: flex;
  margin: 0;
  line-height: 90%;
  width: 130px;
}
.main__save-button {
  display: flex;
  justify-self: center;
  align-items: center;
  gap: 8px;
  margin-block-start: 50px;
  margin-block-end: 100px;
  padding: 17px 20px;
}

.card__button-text {
  font-family: var(--decorative-font, 'Press Start 2P');
  font-size: 14px;
  line-height: 90%;
  padding: 0;
  text-align: center;
  mix-blend-mode: difference;
  color: var(--main-color);
}

.dialog__close-button {
  text-transform: uppercase;
  inline-size: clamp(16.313rem, 15.608rem + 3.005vw, 18.313rem);
}

.button::before {
  position: absolute;
  inset: 0;
  content: '';
  background-color: var(--accent-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}

.button:hover::before {
  transform: scaleX(1);
} 

.button:focus-visible {
  box-shadow: 4px 4px 0 var(--accent-color);
}

.floppy {
  z-index: 1;
  inline-size: 21px;
  block-size: 21px;
  color: var(--main-color);
  mix-blend-mode: difference;
}

.dialog__container {
  display: flex;
  gap: 20px;
}

.dialog__floppy {
  inline-size: 39px;
  block-size: 39px;
  margin-top: 12px;
}

.dialog__title {
  font-family: var(--decorative-font, 'Press Start 2P');
  font-size: 14px;
  line-height: 150%;
  font-weight: 400;
  text-transform: uppercase;
  inline-size: 234px;
}

.dialog[open] {
  display: flex;
}

.dialog {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  border: var(--accent-color) solid 2px;
  inline-size: clamp(21.313rem, 21.048rem + 1.127vw, 22.063rem);
  padding-block-start: 25px;
  padding-block-end: 25px;
}

dialog::backdrop {
  background-color: var(--accent-color);
  opacity: 75%;
}

.sparks {
  opacity: 0;
}

.contour {
  transition: fill 0.1s linear;
}

.core {
  transition: fill 0.3s linear 0.03s;
}

.main-body {
  transition: fill 0.3s linear;
}

.like-icon:hover {
  cursor: pointer;
}

.like-icon:hover .core {
  fill: var(--accent-color);
  transition: fill 0.3s linear 0s;
}

.like-icon:hover .main-body {
  fill: var(--accent-color);
  transition: fill 0.3s linear 0.05s;
}

.like-icon:active .core {
  fill: var(--animation-fill-color);
  transition: fill 0.3s linear 0s;
}

.like-icon:active .main-body {
  fill: var(--animation-fill-color);
  transition: fill 0.3s linear 0.05s;
}

.like-icon.is-liked .core {
  fill: var(--animation-fill-color);
  transition: fill 0.3s linear 0s;
}

.like-icon.is-liked .main-body {
  fill: var(--animation-fill-color);
  transition: fill 0.3s linear 0.05s;
}

.like-icon.is-liked .contour {
  fill: var(--animation-fill-color);
  transition: fill 0.3s linear 0.06s;
}

.like-icon.is-liked .heart {
  transform-origin: center;
  animation: heart-pulsation 0.3s ease-in 0.1s 1;
}

.like-icon.is-liked .sparks {
  animation: fading-sparks 0.3s ease-in 0.3s 1;
}

@media (width <=375px) {
  .header {
    margin-block-start: 100px;
    margin-block-end: 100px;
  }

  .card__text {
    padding: 23px 25px;
  }

  .footer__save-button {
    flex-direction: column;
  }

  .floppy {
    inline-size: 28px;
    block-size: 28px;
  }
}