/* ===== ПЛАВНАЯ ПРОКРУТКА ===== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;
}

/* ===== ОБЩАЯ МОДЕЛЬ РАЗМЕРОВ ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ===== ОСНОВНЫЕ СТИЛИ ===== */

body {
  min-width: 320px;
  margin: 0;

  /* Скрывает только горизонтальный выход элементов */
  overflow-x: clip;

  font-family: var(--font-main);
  font-weight: 400;

  background-color: var(--color-bg);
  color: var(--color-white);
}

/* ===== ЗАГОЛОВКИ ===== */

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ===== ОБЩИЙ КОНТЕЙНЕР ===== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== ПЛАНШЕТЫ И НЕБОЛЬШИЕ НОУТБУКИ ===== */

@media (max-width: 1180px) {
  .hero,
  .portfolio-page {
    margin-top: 72px;
  }
}

/* ===== ТЕЛЕФОНЫ ===== */

@media (max-width: 520px) {
  .hero,
  .portfolio-page {
    margin-top: 64px;
  }
}