/* Основные стили */
* {
    /*border: 1px solid blue;*/
}

/* Подключение шрифта SF Compact Display */
@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/SFCompactDisplay-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/SFCompactDisplay-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/SFCompactDisplay-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/SFCompactDisplay-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/SFCompactDisplay-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/SFCompactDisplay-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/SFCompactDisplay-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/SFCompactDisplay-Ultralight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}


/* Подключение шрифта Lato */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

body {
    margin: 0;
    font-family: SF Compact Display; /* Добавляем запасной шрифт */
    color: #fff;
}

li {
    list-style: none;
}

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

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

p {
    white-space: pre-line;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Контейнеры */
.container {
    margin: 0 auto;
    max-width: 1330px;
}

.border__btn {
    border: 3px solid #3BCF64;
    border-radius: 4px;

    font-family: Lato;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0.02em;
    text-align: left;
}

.background__btn {
    background: rgba(59, 207, 100, 1);
    border-radius: 4px;
    box-shadow: 0 5px 11px 0 rgba(37, 37, 37, 0.1),
        0 20px 20px 0 rgba(37, 37, 37, 0.09),
        0 45px 27px 0 rgba(37, 37, 37, 0.05),
        0 79px 32px 0 rgba(37, 37, 37, 0.01),
        0 124px 35px 0 rgba(37, 37, 37, 0);

    font-family: Lato;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0.02em;
    text-align: left;
    color: #39394E;

    display: inline-flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.error-message {
    color: red;
    font-size: 0.875em;
    margin-top: 0.5em;
}

dialog {
    border: none;
    border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}