/*! Базові стилі */

/** Включаємо border-box для всіх елементів (падінги не збільшують розмір блоку) */
*, *::before, *::after {
    box-sizing: border-box;
}

/** Прибираємо зовнішні та внутрішні відступи у тегів */
* {
    margin: 0;
    padding: 0;
}

/** Запобігаємо стрибкам шрифтів при зміні орієнтації на мобільних */
html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/** Робимо роботу з висотою зручнішою */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/** Робимо щоб графіка не вилазила за межі контейнерів */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/** Уніфікуємо шрифти для форм */
input, button, textarea, select {
    font: inherit;
}

/** Прибираємо стандартне підкреслення у посилань */
a {
    text-decoration: none;
    color: inherit;
}

/** Прибираємо маркери списків */
ul, ol {
    list-style: none;
}

/** Покращуємо UX в формах */
label {
    cursor: pointer;
}

/** Робимо плавний скрол */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/** Не даємо контенту виходити за рамки екрану */
html, body {
    overflow-x: hidden;
    position: relative;
}

/** Закріпляємо контент на своїх місцях */
main {
    width: 100%;
    flex: 1;
}