html, body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Выравнивание содержимого по центру по вертикали */
    align-items: center; /* Выравнивание содержимого по центру по горизонтали */
    font-family: Arial, sans-serif;
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Увеличенный интервал между клавишами */
    padding: 20px; /* Добавляем внутренние отступы */
    width: 90%; /* Устанавливаем ширину клавиатуры на 90% экрана */
    margin-top: 10px; /* Небольшой отступ сверху */
}

.key {
    width: 150px; /* Ширина клавиши */
    height: 100px; /* Высота клавиши */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    background-color: #f0f0f0;
}

.number, .letters span {
    font-size: 1.1em; /* Увеличенный размер шрифта для номеров и букв */
    margin: 7px;
}

.contact-info {
    font-size: 120%;
    text-align: center;
    margin: 5px 0;
}

.contact-info a, .contact-info span {
    display: inline-block;
    margin-right: 5px;
    text-decoration: none;
    color: black; /* Цвет текста */
    font-size: 20px; /* Размер текста */
}

.contact-info i {
    margin-left: 5px;
    color: darkgreen; /* Цвет иконок */
    font-size: 24px; /* Размер иконок */
}

/*.text-highlight {*/
/*    color: darkgreen;*/
/*    transform: scale(1.5);*/
/*    transition: transform 0.3s;*/
/*    font-weight: bolder; !* Жирный шрифт *!*/
/*    font-size: 2em; !* Размер шрифта *!*/
/*}*/

#result, #phone_result {
    color: darkgreen;
    margin-top: 5px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

#toggleAnimation {
    margin-bottom: 20px; /* Отступ снизу для кнопки анимации */
}
.button-link {
    display: inline-block;
    padding: 10px 20px; /* Подберите подходящие отступы */
    margin-bottom: 50px; /* Отступ снизу, аналогично кнопке анимации */
    background-color: darkgreen; /* Фоновый цвет, который вы выберете */
    color: white; /* Цвет текста */
    text-decoration: none; /* Убираем подчеркивание текста */
    text-align: center; /* Выравнивание текста по центру */
    border-radius: 5px; /* Скругление углов кнопки */
    font-weight: bold; /* Жирный шрифт */
    transition: background-color 0.3s; /* Плавный переход цвета фона */
}

.button-link:hover {
    background-color: #45a049; /* Цвет фона при наведении */
}

.contact-info h1 {
    display: block;
    position: relative;
    top: 3%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: black; /* Или любой другой цвет по вашему желанию */
    font-size: larger;
    margin-bottom: 0;
    /*z-index: 1000;*/
}


/* Медиа-запросы для адаптации под мобильные устройства */
@media (max-width: 768px) {
    .keypad {
        width: 80%; /* Уменьшаем ширину клавиатуры на мобильных */
        gap: 10px; /* Уменьшаем интервал между клавишами */
        padding: 10px; /* Уменьшаем внутренние отступы */
    }

    .key {
        width: 100px; /* Уменьшаем ширину клавиш */
        height: 80px; /* Уменьшаем высоту клавиш */
    }

    .number, .letters span {
        font-size: 1em; /* Уменьшаем размер шрифта для номеров и букв */
    }

    .contact-info a, .contact-info span {
        font-size: 14px; /* Уменьшаем размер текста для контактной информации */
    }

    .contact-info i {
        font-size: 20px; /* Уменьшаем размер иконок */
    }

    #toggleAnimation {
        margin-bottom: 10px; /* Уменьшаем отступ снизу для кнопки анимации */
    }
}


.facebook-link i { /* Стили для иконки (если нужно) */
    color: #1877F2;
    /* font-weight: bold;  Если нужна жирная иконка */
}