@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/indexfon1.png') no-repeat center center fixed; /* Уникальный фон для каждой страницы */
    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: calc(768px * var(--width-ratio));
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    height: 100%;
}

.profile-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    margin-top: calc(-10% * var(--height-ratio)); /* Поднятие контейнера профиля на 10% */
}

.profile-image img {
    border-radius: 50%;
    height: calc(350px * var(--height-ratio)); /* Динамический размер по высоте */
    width: calc(350px * var(--height-ratio)); /* Устанавливаем такой же размер по ширине */
}

.buttons-top {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: calc(10% * var(--height-ratio)) 0 calc(30px * var(--height-ratio)) 0; /* Динамический отступ сверху */
}

.buttons-bottom {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: calc(5% * var(--height-ratio)) 0 calc(10px * var(--height-ratio)) 0; /* Динамический отступ сверху */
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(180px * var(--width-ratio)); /* Динамический размер кнопок */
    height: calc(80px * 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(16px * var(--width-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; /* Равномерное распределение */
    margin-bottom: calc(20px * var(--height-ratio)); /* Динамический отступ снизу для иконок */
    width: 100%; /* Убедитесь, что иконки занимают всю ширину контейнера */
}

.social-icons a {
    margin: 0 calc(10px * var(--width-ratio));
}

social-icons img {
    width: calc(70px * var(--width-ratio));  /* Динамический размер */
    height: calc(70px * var(--height-ratio)); /* Динамический размер */
    transition: transform 0.3s;
}

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