@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,700&display=swap');

:root {
    --width-ratio: 1;
    --height-ratio: 1;
}

body {
    margin: 0;
    padding: 0;
    background: url('indeximg/aboutfon1.png') no-repeat center center fixed; /* Уникальный фон для страницы about */
    background-size: cover;
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: 768px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    height: 100%;
}

.top-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}

.profile-image {
    width: calc(75px * var(--width-ratio)); /* Уменьшенный размер */
    height: calc(75px * var(--height-ratio)); /* Уменьшенный размер */
    border-radius: 50%; /* Круглое изображение */
    overflow: hidden;
    margin-top: calc(20px * var(--height-ratio)); /* Отступ сверху */
    margin-right: calc(10px * var(--width-ratio)); /* Отступ справа */
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.back-button {
    display: flex;
    align-items: center;
    margin-left: calc(10px * var(--width-ratio)); /* Отступ слева */
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(155px * var(--width-ratio)); /* Уменьшенный размер кнопок */
    height: calc(67px * var(--height-ratio)); /* Уменьшенный размер кнопок */
    background: url('indeximg/bottom.png') no-repeat center center;
    background-size: cover;
    color: white;
    font-family: 'Open Sans', sans-serif; /* Шрифт Open Sans */
    font-size: calc(14px * var(--height-ratio)); /* Уменьшенный размер текста */
    font-style: italic; /* Курсив */
    font-weight: 700; /* Жирный */
    text-decoration: none;
    transition: transform 0.3s;
}

.button:hover {
    transform: scale(1.1);
}

.social-icons {
    display: flex;
    justify-content: space-around; /* Равномерное распределение */
    position: absolute;
    bottom: 0;
    margin-bottom: calc(10px * var(--height-ratio)); /* Отступ снизу для иконок */
    width: 100%; /* Убедитесь, что иконки занимают всю ширину контейнера */
}

.social-icons a {
    margin: 0 10px;
}

.social-icons img {
    width: calc(65px * var(--height-ratio));  /* Уменьшенный размер */
    height: calc(65px * var(--height-ratio)); /* Уменьшенный размер */
    transition: transform 0.3s;
}

.social-icons img:hover {
    transform: scale(1.1);
}