@font-face {
    font-family: 'CormorantSC';
    src: url(/assets/fonts/CormorantSC-Bold.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kurale';
    src: url(/assets/fonts/Kurale-Regular.woff2) format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* *
  Нормализация блочной модели */
  *,
  /* ::before,
  ::after {
      box-sizing: border-box;
  } */
  
  /* *
     Убираем внутренние отступы слева тегам списков,
     у которых есть атрибут class */
  :where(ul, ol):where([class]) {
      padding-left: 0;
  }
  
  /* *
     Убираем внешние отступы body и двум другим тегам,
     у которых есть атрибут class */
  body,
  :where(blockquote, figure):where([class]) {
      margin: 0;
  }
  
  /* *
     Убираем внешние отступы вертикали нужным тегам,
     у которых есть атрибут class */
  :where(   h1,   h2,   h3,   h4,   h5,   h6,   p,   ul,   ol,   dl ):where([class]) {
      margin-block: 0;
  }
  
  /* :where(dd[class]) {
      margin-left: 0;
  }
  
  :where(fieldset[class]) {
      margin-left: 0;
      padding: 0;
      border: none;
  } */
  
  /* *
     Убираем стандартный маркер маркированному списку,
     у которого есть атрибут class */
  :where(ul[class]) {
      list-style: none;
  }
  
  :where(address[class]) {
      font-style: normal;
  }
  
  /* *
     Обнуляем вертикальные внешние отступы параграфа,
     объявляем локальную переменную для внешнего отступа вниз,
     чтобы избежать взаимодействие с более сложным селектором */
  p {
      --paragraphMarginBottom: 24px;
      margin-block: 0;
  }
  
  /* *
     Внешний отступ вниз для параграфа без атрибута class,
     который расположен не последним среди своих соседних элементов */
  p:where(:not([class]):not(:last-child)) {
      margin-bottom: var(--paragraphMarginBottom);
  }
  
  /* *
     Наследуем свойства шрифт для полей ввода */
  input,
  textarea,
  select,
  button {
      font: inherit;
  }
  
  html {
      /* *
       Пригодится в большинстве ситуаций
       (когда, например, нужно будет "прижать" футер к низу сайта) */
      height: 100%;
  
      /* *
       Убираем скачок интерфейса по горизонтали
       при появлении / исчезновении скроллбара */
      scrollbar-gutter: stable;
  }
  
  /* *
     Плавный скролл */
  html,
  :has(:target) {
      scroll-behavior: smooth;
  }
  
  body {
      /* *
       Пригодится в большинстве ситуаций
       (когда, например, нужно будет "прижать" футер к низу сайта) */
      min-height: 100%;
  
      /* *
       Унифицированный интерлиньяж */
      line-height: 1.5;
  }
  
  /* *
     Нормализация высоты элемента ссылки при его инспектировании в DevTools */
  a:where([class]) {
      display: inline-flex;
  }
  
  /* *
     Курсор-рука при наведении на элемент */
  button,
  label {
      cursor: pointer;
  }
  
  /* *
     Приводим к единому цвету svg-элементы
     (за исключением тех, у которых уже указан
     атрибут fill со значением 'none' или начинается с 'url') */
  :where([fill]:not(   [fill="none"],   [fill^="url"] )) {
      fill: currentColor;
  }
  
  /* *
     Приводим к единому цвету svg-элементы
     (за исключением тех, у которых уже указан
     атрибут stroke со значением 'none') */
  :where([stroke]:not(   [stroke="none"],   [stroke^="url"] )) {
      stroke: currentColor;
  }
  
  /* *
     Чиним баг задержки смены цвета при взаимодействии с svg-элементами */
  svg * {
      transition-property: fill, stroke;
  }
  
  /* *
     Приведение рамок таблиц в классический 'collapse' вид */
  :where(table) {
      border-collapse: collapse;
      border-color: currentColor;
  }
  
  

  /* *
   Удаляем все анимации и переходы для людей,
   которые предпочитают их не использовать */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
}

header {
    background: var(--color-palet-pink);
}

hr {
    height: 1px;
    background: #000;
    margin-top: 0;
    margin-bottom: 0;
}

h1 {
    font-size: var(--font-size-large);
    font-family: var(--font-family-Cormorant-bold);
    margin-top: 0;
    text-align: center;
}

h2 {
    font-size: var(--font-size-large);
    font-family: var(--font-family-Cormorant-bold);
    margin-top: 0;
}

h3 {
    font-size: var(--font-size-large);
    font-family: var(--font-family-Cormorant-bold);
    margin-top: 0;
}

:root {
    --color-palet-pink: #E9D6CC;
    --border-radius-small: 10px;
    --border-radius-middle: 20px;
    --border-radius-big: 30px;
    --border-radius-large: 50px;
    --font-family-Cormorant-bold: 'CormorantSC', sans-serif;
    --font-family-Kurale-normal: 'Kurale', sans-serif;
    --font-size-large: 32px;
    --font-size-middle: 20px;
    --font-size-small: 18px;
    --container-width: 1750px;
    --container-padding-x: 20px;
    --transition-duration: 0.2s;
}

.container {
    max-width: calc(var(--container-width) + var(--container-padding-x) * 2);
    margin-inline: auto;
}

footer {
    margin-top: 4rem;
    height: 430px;
    background: var(--color-palet-pink);
    font-family: var(--font-family-Kurale-normal);
}

.contact-us {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.art-contact-us {
    margin-top: 5rem;
}

.us {
    font-size: 20px;
}

.num {
    margin-top: 2rem;
    font-size: 20px;
}

.email {
    font-size: 20px;
}

.adres {
    margin-top: 2rem;
}

.icons {
    margin-top: 2rem;
}


.icons a {
    padding: .5rem;
}