:root {
    /* Основной фон */ /*TODO: выбрать цвет фона*/
    /*--color-bg-main: #faf6f0;*/
    --color-bg-main: #faf6eb; /*+++*/

    /* Текст */
    --color-text-main: #2e2e2e;
    --color-text-soft: #4d0655;

    /* Акценты (зелёный + жёлтый) */ /*TODO: выбрать цвет акцентов*/
    --color-accent: rgb(61, 213, 6);           /*мягкий зелёный  +++*/
    /*--color-accent: #f4c430;   !* тёплый жёлтый *!*/

    /* Светлые */
    --color-light: #ffffff;
    --color-black: #4d0655;

    /* Градиенты (светлые) */
    --color-gradient-accent: #e3dccf;

    /* Дополнительные */
    --color-overlay: rgba(0, 0, 0, 0.4);
    --color-footer: #f9e7b0;
    --color-shadow: rgba(0, 0, 0, 0.08);
    --header-h: 55px;
}

html, body {
    overflow-x: hidden;
}

/*TODO: выбрать цвет шрифта*/
body {
    margin: 0;
    font-family: 'Comfortaa', cursive;
    font-size: 120%;
    background: var(--color-bg-main);
    /*color: var(--color-text-main);*/
    color: var(--color-black);
}

.header {
    height: var(--header-h);
    background: var(--color-bg-main);
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    top: 0;
    font-size: min(150%, 46px);
    z-index: 3;
}

.nav {
    display: flex;
    gap: 15px;
    align-items: center;
}

.nav a {
    text-decoration: none;
    color: var(--color-black);
    font-weight: bold;
}

.btn {
    cursor: pointer;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    font-size: 120%;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-light);
    border-radius: 999px;
}

.btn-primary:hover {
    background: #5a9e3f; /*TODO: выбрать цвет hover*/
    color: #ffffff;
}

.hero {
    padding-top: 100px;
    font-size: 170%;
    max-width: 900px;
    margin-left: auto;

    text-align: left;
    background: radial-gradient(
            ellipse 200px 170px at 70% 60%,
            var(--color-gradient-accent),
            var(--color-bg-main)
    );
}

.section {
    padding: 40px 20px;
}

.section-title {
    font-size: 200%;
    font-weight: bold;
    text-align: center;
}

.subtitle {
    font-size: calc(1em + 30px);
    font-weight: bold;
}

.footer {
    text-align: center;
    padding: 15px;
    background: var(--color-footer);
}