/* Установка шрифта Inter и фон rgb(20, 20, 20) */
body {
    font-family: 'Inter', sans-serif;
    background-color: #141414; /* rgb(20, 20, 20) */
	justify-content: center;
}
/* Стиль для круглого контейнера фото - 30% от ширины страницы, с ограничением */
.profile-container {
    /* 30vw для ширины/высоты */
    width: 60vw;
    height: 60vw;
    /* Ограничение для больших экранов (макс. 200px) */
    max-width: 500px;	
    max-height: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.zodiac_svg{
    width: 10vw;
    /*height: 4vw;*/
}
.profile-image {
    width: 100%;
    height: 100%;
    /* Placeholder для фото. Замените URL на свое фото. */ 
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    /* Легкий ободок */
    border: 2px solid rgba(255, 255, 255, 0.1);	
}
.social-button:hover {
    background-color: #374151;
}
@font-face {
	font-family: 'GogolFONT';
	src: url('assets/font/gogol_regular.otf');
	font-style: normal;
	font-weight: bold;
	font-display: swap;	
}
@font-face {
	font-family: 'GrandisFONT';
	src: url('assets/font/GrandisExtended-Black.ttf');
	font-weight: bold;
	font-style: normal;
	font-display: swap;	
}
@font-face {
	font-family: 'AnjhayFONT';
	src: url('assets/font/Anjhay.ttf');
	font-style: normal;
	font-display: swap;	
}
@font-face {
	font-family: 'Inter-SemiBoldFONT';
	src: url('assets/font/Inter-SemiBold.otf');
	font-style: normal;
	font-display: swap;	
}

/* Основной стиль для кнопки */
.social-link-btn {
    /* w-72 h-12 */
    width: 18rem; /* 72 * 0.25rem = 18rem (если 1rem = 4px) */
    height: 3rem;  /* 12 * 0.25rem = 3rem */
    
    /* bg-transparent border border-white text-white */
    background-color: transparent;
    border: 1px solid white;
    color: white;
    
    /* font-[AnjhayFONT,semibold] py-2 px-4 rounded-xl */
    font-family: 'AnjhayFONT', sans-serif;
    font-weight: 600; /* semibold */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border-radius: 0.75rem; /* rounded-xl */
    
    /* flex items-center justify-between */
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* shadow-lg transition duration-200 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition-property: all;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out (по умолчанию) */
    
    /* focus:outline-none */
    outline: none;
    
    /* Дополнительно: чтобы кнопка была по центру, если она меньше, чем родительский элемент */
    margin-left: auto; 
    margin-right: auto;
}

/* Стили при наведении (hover) */
.social-link-btn:hover {
    /* hover:shadow-xl transform hover:scale-[1.02] hover:text-gray-900 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
    transform: scale(1.02);
    color: #1f2937; /* text-gray-900 */
    /*background-color: white; /* Для hover:bg-white */
}

/* Стили при фокусе (focus) */
.social-link-btn:focus {
    /* focus:ring-4 (Для этого требуется, чтобы рамка (ring) была добавлена, но в исходной кнопке не указан цвет кольца) */
    /* Добавим белый ободок focus:ring-white, который отсутствовал в исходном классе, но был в других кнопках */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); 
}