/* Здесь вы напишете основную часть стилей страницы.

Будьте внимательны! Для корректной работы скриптов на этом сайте нужно, чтобы в HTML некоторые классы были названы особым образом:
✦ like-icon — для svg-иконки анимированного сердца
✦ card__like-button — для кнопки Like рядом с иконкой
✦ card__icon-button — для кнопки, оборачивающей иконку
✦ card__icon-button — для кнопки, оборачивающей иконку
✦ is-liked — для обозначения состояния лайкнутой иконки в виде сердца
✦ button__text — для обозначения текстового элемента внутри кнопки
*/

.page {
  min-inline-size: 320px;
  min-block-size: 100dvb;
  font-family: var(--font, 'Inter'), 'Arial', sans-serif;
  font-variation-settings: 'wght' var(--description-font-weight, 400);
  background-color: var(--bg-color, #fff);
  background-image: var(--bg-image);
  background: var(--bg-image-gradient);
  background-size: cover;
  background-repeat: repeat;
  background-attachment: fixed;
  color: var(--text-color, #000);
  font-size: var(--text-size, 18px);
  margin-block: clamp(98px, 100.7042px + -0.1878vw, 100px);
}

.header {
  border: 2px solid var(--border-color);
  background-color: var(--bg-color);
  inline-size: clamp(375px, 260.5634px + 30.5164vw, 700px);
  min-block-size: clamp(327px, 312.5634px + 3.8498vw, 368px);
  margin-top: 100px;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 20px;
  margin-block-start: 100px;
  margin-block-end: clamp(98px, 100.7042px + -0.1878vw, 100px);
}

.header__logo {
  inline-size: clamp(343px, 303.5634px + 10.5164vw, 455px);
  font-family: var(--font-accent, 'PressStart2P'), 'Fixedsys', sans-serif;
  text-transform: uppercase;
  font-size: clamp(49px, 43.3662px + 1.5023vw, 65px);
  line-height: 100%;
  text-decoration: none;
}

.header__title {
  inline-size: clamp(210px, 162.4648px + 12.6761vw, 345px);
  font-family: var(--font-accent,'Press Start 2P'), 'Fixedsys', sans-serif;
  font-size: clamp(14px, 10.831px + 0.8451vw, 23px);
  line-height: 100%;
  text-transform: uppercase;
  text-align: center;
}

.card-container {
  display: grid;
  row-gap: 50px;
  justify-self: center;
  align-self: center;
  inline-size: clamp(375px, 260.5634px + 30.5164vw, 700px);
}

.card {
  display: grid;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
}

.card__title {
  font-size: 18px;
  font-weight: var(--heading-font-weight);
  font-variation-settings: 'wght' var(--heading-font-weight);
  padding: 4px 10px;
}

.card__image-container {
  margin: 0;
  position: relative;
  inline-size: 100%;
  block-size: clamp(375px, 260.5634px + 30.5164vw, 700px);
  border-top: 2px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
  overflow: hidden;
}

.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__logo {
  position: absolute;
  width: 98px;
  height: 14px;
  top: 25px;
  right: 25px;
  font-family: var(--font-accent);
  font-size: 14px;
  text-transform: uppercase;
  opacity: 0.5;
  mix-blend-mode: hard-light;
  z-index: 1;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

@supports ((-webkit-text-stroke: 1px var(--bg-color)) or (text-stroke: 1px var(--bg-color))) {
  .card__logo {
    -webkit-text-stroke: 1px var(--bg-color);
    text-stroke: 1px var(--bg-color);
    text-shadow: none;
  }
}

.card__description {
  display: grid;
  padding: 25px;
  gap: 25px;
  max-inline-size: 690px;
}

.card__text {
  font-size: 18px;
  line-height: 21px;
  inline-size: 100%;
}

.card__button-zone {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 0 25px 25px;
}

.button {
  border: 2px solid var(--border-color);
  background-color: var(--bg-color);
  position: relative;
  cursor: pointer;
  overflow: hidden;
  font-family: var(--font-accent);
}

.card__like-button {
  inline-size: 130px;
  block-size: 38px;
  transition: box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--text-color);
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out;
  z-index: 0;
}

.button:hover::before {
  transform: translateX(0);
}

.card__icon-button {
  overflow: hidden;
  font-family: var(--font-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  inline-size: 39px;
  block-size: 36px;
}

.like-icon {
  width: 100%;
  height: 100%;
  display: block;
}

.heart {
  transform-origin: center;
  transform: scale(1);
}

.contour {
  fill: var(--contour-color);
  transition: fill 0.1s linear;
}

.main-body {
  fill: var(--main-body-color);
  transition: fill 0.3s linear;
}

.core {
  fill: var(--core-color);
  transition: fill 0.3s linear 0.03s;
}

.sparks {
  opacity: 0;
  fill: var(--animation-fill-color);
}

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

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

.button:focus {
  outline: none;
  box-shadow: none;
}

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

.button__text {
  font-family: var(--font-accent);
  font-size: 14px;
  position: relative;
  z-index: 1;
  mix-blend-mode: difference;
  color: var(--bg-color);
}

.like-icon:hover .core {
  fill: var(--contour-color);
  transition-delay: 0s;
}

.like-icon:hover .main-body {
  fill: var(--contour-color);
  transition-delay: 0.05s;
}

.like-icon:hover {
  border: none;
}

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

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

.like-icon.is-liked .core {
  fill: var(--liked-color);
}

.like-icon.is-liked .main-body {
  fill: var(--liked-color);
}

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

.button-show-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  justify-content: center;
  inline-size: clamp(306px, 295.7887px + 2.723vw, 335px);
  block-size: clamp(55px, 94.2113px + -2.723vw, 84px);
  gap: 8px;
}

.button__diskette-icon {
  display: block;
  block-size: auto;
  justify-self: end;
  z-index: 1;
  mix-blend-mode: difference;
  color: var(--bg-color);
  margin: 0;
  inline-size: clamp(21px, 30.8592px + -0.6845vw, 28px);
  inline-size: clamp(21px, 30.8592px + -0.6845vw, 28px);
}

.button-show-text {
  font-family: var(--font-accent);
  justify-self: start;
}

.dialog-window {
  border: 2px solid var(--border-color);
  justify-self: center;
  inline-size: clamp(341px, 336.7746px + 1.1268vw, 353px);
  padding-inline: 37px;
  padding-block: 30px;
}

.dialog-window::backdrop {
  background-color: rgb(0 0 0 / 0.75);
}

.dialog-container {
  display: grid;
  grid-template-columns: 39px 1fr;
  column-gap: 20px;
  row-gap: 30px;
}

@media (width >= 700px) {
  .button__diskette-icon {
    justify-self: center;
  }

  .button-show-text {
    justify-self: center;
  }
  .dialog-window {
    padding: 30px;
  }
}

.dialog-container__diskette-icon {
  inline-size: 39px;
  block-size: 39px;
  align-self: center;
}

.dialog-container__text {
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
}

.dialog-container__button-ok {
  grid-column: 1 / -1;
  inline-size: 100%;
  min-block-size: 38px;
  text-transform: uppercase;
}

.card__image-saturation-down {
  filter: sepia(0.6) saturate(60%) brightness(80%);
}

.card__image-neon {
  filter: saturate(300%);
}

.card__image-vintage {
  filter: hue-rotate(0.1turn);
}

.card__image-unnatural-green {
  filter: invert(80%);
}

.card__image-monochrome {
  filter: sepia(0.6) contrast(60%);
}

.card__image-blur {
  filter: blur(15px);
}

.card__image-multifilter {
  filter: invert(80%) hue-rotate(0.7turn) brightness(60%);
}

@media (width <= 375px) {
  .button-show-modal {
    flex-direction: column;
  }

  .button__diskette-icon {
    margin: 15px 0;
  }

  .button-show-text {
    padding-block-start: 7px;
    margin-inline-start: 0;
  }
}

@media (min-width: 700px) {
  .button-show-modal {
    flex-direction: row;
  }
}