Есть задача.

Основная страница сайта index.html

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Світ Екстрасенсів - Шлях Долі</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Подключение стилей -->
    <link rel="stylesheet" href="styles.css">
    <!-- Подключение шрифтов Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Marck+Script&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>

    <!-- Главный заголовок -->
    <section class="hero">
        <h1>Світ Екстрасенсів</h1>
        <p>Відкрийте таємниці свого майбутнього з нашими експертами</p>
        <!-- Контейнер для зірок -->
        <div id="stars-container"></div>
    </section>

    <!-- Список експертів -->
    <section id="experts" class="experts-section">
        <h2>Наші Експерти</h2>
        <div class="filters">
            <select id="specialization-filter">
                <option value="all">Всі спеціалізації</option>
                <option value="Екстрасенс">Екстрасенс</option>
                <option value="Астролог">Астролог</option>
                <option value="Таролог">Таролог</option>
                <option value="Нумеролог">Нумеролог</option>
            </select>
        </div>
        <div class="experts-list" id="experts-online">
            <!-- Онлайн експерти будуть завантажені тут -->
        </div>
        <div id="offline-section" class="closed">
            <h3 id="toggle-offline">Експерти, які не в мережі <span class="arrow-down">&#9660;</span></h3>
            <div class="experts-list" id="experts-offline">
                <!-- Офлайн експерти будуть завантажені тут -->
            </div>
        </div>
    </section>

    <!-- Секция "Про нас" -->
    <section id="about" class="about-us">
        <h2>Про нас</h2>
        <p>Ми об'єднуємо найкращих експертів у галузі езотерики, щоб допомогти вам знайти відповіді на важливі питання та відкрити шлях до світлого майбутнього.</p>
        <p>Наші спеціалісти мають багаторічний досвід та допомогли тисячам людей знайти гармонію та баланс у житті.</p>
    </section>

    <!-- Секция "Контакти" -->
    <section id="contacts" class="contact-us">
        <h2>Контакти</h2>
        <p>Зв'яжіться з нами за телефоном: <a href="tel:+380123456789">+38 (012) 345-67-89</a></p>
        <p>Email: <a href="mailto:info@svitekstrasensiv.ua">info@svitekstrasensiv.ua</a></p>
    </section>

    <!-- Подвал сайта -->
    <footer>
        <p>&copy; 2024 Світ Екстрасенсів. Всі права захищені.</p>
    </footer>

    <!-- Подключение скриптов -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="scripts.js"></script>
</body>
</html>

Мой стиль /* Общие стили */
 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    background: linear-gradient(to bottom, #0d0d0d, #1a1a1a);
    color: #fff;
}

/* Главный заголовок */
.hero {
    position: relative;
    padding: 30px 20px;
    text-align: center;
    background: linear-gradient(to bottom, #000914, #091d29);
    overflow: hidden;
}

.hero h1 {
    font-family: 'Marck Script', cursive;
    font-size: 48px;
    margin-bottom: 10px;
    color: #e0b722;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    position: relative;
    z-index: 1;
}

.hero p {
    font-size: 24px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

/* Контейнер для зірок */
#stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 0;
    overflow: hidden;
}

/* Анімація зірок */
.star {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: twinkle 5s infinite ease-in-out;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Секция експертів */
.experts-section {
    padding: 40px 20px;
    background: linear-gradient(to bottom, #1a1a1a, #0d0d0d);
}

.experts-section h2 {
    font-size: 36px;
    margin-bottom: 30px;
    text-align: center;
}

.filters {
    text-align: center;
    margin-bottom: 30px;
}

.filters select {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 30px;
    border: none;
    outline: none;
    background: #fff;
    color: #000;
}

.experts-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.expert-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    margin: 20px;
    width: 300px;
    text-align: center;
    padding: 30px 20px;
    transition: transform 0.3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.expert-card:hover {
    transform: translateY(-10px);
}

.expert-card img {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin-bottom: 15px;
    box-shadow: 0 0 10px rgba(224, 183, 34, 0.7);
}

.expert-card h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.expert-card .specializations {
    font-size: 16px;
    margin-bottom: 10px;
    color: #e0b722;
}

.expert-card p {
    font-size: 16px;
    margin-bottom: 10px;
}

.expert-card .price {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #e0b722;
}

.expert-card .buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
}

.expert-card .button {
    flex: 1;
    text-align: center;
    padding: 10px 5px;
    font-size: 16px;
    border-radius: 30px;
    text-decoration: none;
    color: #000;
    background: #e0b722;
    transition: background 0.3s;
}

.expert-card .button:hover {
    background: #d1a319;
}

.expert-card .button.disabled {
    display: none;
}

.status {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 14px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
}

.status.online {
    background: #4caf50;
}

.status.offline {
    background: #f44336;
}

/* Кнопка для отображения офлайн экспертов */
#offline-section {
    text-align: center;
    margin-top: 30px;
}

#toggle-offline {
    font-size: 20px;
    background: #333;
    color: #fff;
    padding: 15px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s;
    display: inline-block;
}

#toggle-offline:hover {
    background: #505050;
}

#toggle-offline .arrow-down {
    display: inline-block;
    margin-left: 10px;
    transition: transform 0.3s;
}

#experts-offline {
    margin-top: 20px;
}

#offline-section.closed #experts-offline {
    display: none;
}

#offline-section.closed #toggle-offline .arrow-down {
    transform: rotate(0deg);
}

#offline-section.opened #toggle-offline .arrow-down {
    transform: rotate(180deg);
}

#offline-section .experts-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#offline-section .expert-card {
    width: 300px;
    background: rgba(255, 255, 255, 0.1);
}

/* Секция "Про нас" и "Контакти" */
.about-us, .contact-us {
    padding: 60px 20px;
    text-align: center;
}

.about-us {
    background: linear-gradient(to bottom, #1a1a1a, #0d0d0d);
}

.contact-us {
    background: linear-gradient(to bottom, #0d0d0d, #1a1a1a);
}

.about-us h2, .contact-us h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.about-us p, .contact-us p {
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto 20px;
    line-height: 1.6;
}

.contact-us a {
    color: #e0b722;
    text-decoration: none;
    font-weight: 700;
}

.contact-us a:hover {
    text-decoration: underline;
}

/* Подвал */
footer {
    background: #0d0d0d;
    padding: 20px;
    text-align: center;
    color: #777;
    font-size: 14px;
}

/* Адаптивний дизайн */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 36px;
    }

    .hero p {
        font-size: 18px;
    }

    .experts-section h2,
    .about-us h2,
    .contact-us h2 {
        font-size: 28px;
    }

    .expert-card {
        width: 100%;
        max-width: 400px;
        margin: 20px auto;
    }

    .expert-card .buttons {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .expert-card .button {
        flex: 1;
    }

    #offline-section .expert-card {
        width: 100%;
        max-width: 400px;
        margin: 20px auto;
    }
}

у меня есть ещё expert.html 

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Профіль Експерта - Світ Екстрасенсів</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Підключення стилів -->
    <link rel="stylesheet" href="styles.css">
    <!-- Підключення шрифтів Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Marck+Script&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>

    <!-- Профіль експерта -->
    <section class="expert-profile">
        <div class="container">
            <div class="expert-info">
                <img src="images/1.jpg" alt="Оксана Петрова" class="expert-photo">
                <div class="expert-details">
                    <h1>Оксана Петрова</h1>
                    <div class="specializations">Таролог, Екстрасенс</div>
                    <div class="status online">В мережі</div>
                    <div class="price">Вартість від 300 грн.</div>
                    <div class="buttons">
                        <a href="chat.html" class="button">Почати чат</a>
                    </div>
                </div>
            </div>
            <div class="expert-description">
                <h2>Про експерта</h2>
                <p>Я Оксана Петрова, таролог та екстрасенс з більш ніж 10-річним досвідом. Допомагаю людям знайти відповіді на важливі питання, відкриваючи секрети майбутнього через карти Таро та інтуїтивні практики.</p>
                <p>Моя мета – надати підтримку та направити вас на шлях до гармонії та щастя.</p>

                <h2>Тарифи</h2>
                <p>
                    Ворожіння 30 хвилин - 100 грн<br>
                    60 хвилин - 200 грн<br>
                    Роблю ритуали - ціна залежить від роботи
                </p>

                <h2>Привітальне повідомлення</h2>
                <p>"Вітаю! Я рада вітати вас у своєму профілі. Не соромтеся задавати питання – разом ми знайдемо відповіді."</p>
            </div>

            <!-- Інші експерти -->
            <section class="other-experts">
                <h2>Інші експерти онлайн</h2>
                <div class="experts-list" id="other-experts">
                    <!-- Список експертів буде завантажено через скрипт -->
                </div>
            </section>
        </div>
    </section>

    <!-- Подвал сайта -->
    <footer>
        <p>&copy; 2024 Світ Екстрасенсів. Всі права захищені.</p>
    </footer>

    <!-- Підключення скриптів -->
    <script src="scripts.js"></script>
</body>
</html>

вот обновленные стили с учётом файла expert.html

/* Кнопка */
.button {
    display: inline-block;
    padding: 15px 30px;
    background: #e0b722;
    color: #000;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    border-radius: 30px;
    transition: background 0.3s;
}

.button:hover {
    background: #d1a319;
}

/* Профіль експерта */
.expert-profile {
    padding: 40px 20px;
    background: linear-gradient(to bottom, #0d0d0d, #1a1a1a);
    color: #fff;
}

.expert-profile .container {
    max-width: 1000px;
    margin: 0 auto;
}

.expert-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 30px;
}

.expert-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 30px;
    box-shadow: 0 0 10px rgba(224, 183, 34, 0.7);
}

.expert-details {
    flex: 1;
}

.expert-details h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

.expert-details .specializations {
    font-size: 18px;
    margin-bottom: 10px;
    color: #e0b722;
}

.expert-details .status {
    font-size: 16px;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-block;
}

.status.online {
    background: #4caf50;
}

.status.offline {
    background: #f44336;
}

.expert-details .price {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.expert-details .buttons .button {
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 30px;
}

.expert-description h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.expert-description p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Інші експерти */
.other-experts {
    margin-top: 40px;
}

.other-experts h2 {
    font-size: 28px;
    margin-bottom: 20px;
    text-align: center;
}

.other-experts .experts-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Сторінка чату */
.chat-section {
    padding: 0 20px 40px;
    background: linear-gradient(to bottom, #1a1a1a, #0d0d0d);
}

.chat-container {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-header {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #333;
}

.expert-photo-small {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}

.expert-name {
    font-size: 20px;
    color: #fff;
}

.chat-messages {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    background: #1a1a1a;
}

.message {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.message.expert {
    flex-direction: row;
}

.message.client {
    flex-direction: row-reverse;
}

.message.expert .message-content {
    background: #333;
    color: #fff;
    margin-left: 10px;
}

.message.client .message-content {
    background: #e0b722;
    color: #000;
    margin-right: 10px;
}

.message-content {
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 16px;
    line-height: 1.4;
}

.message.expert .sender-name {
    font-size: 14px;
    color: #fff;
    margin-left: 10px;
}

.chat-input {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #333;
}

.chat-input textarea {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border-radius: 10px;
    border: none;
    resize: none;
    height: 50px;
    margin-right: 10px;
    background: #fff;
    color: #000;
}

.chat-input button {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 10px;
    background: #e0b722;
    color: #000;
    border: none;
    cursor: pointer;
}

.chat-input button:hover {
    background: #d1a319;
}

.attachment-icon {
    font-size: 24px;
    color: #e0b722;
    margin-right: 10px;
    cursor: pointer;
}

.attachment-icon:hover {
    color: #d1a319;
}


Отправь мне готовые стили с учётом изменений, если они повторяются, то оставь те которые обновлены.
Чтобы не изменился дизайн главной страницы и экспертов.