@charset "UTF-8";

/* Используем переменные для цветов */
:root {
  --primary-color:#DB7093;
/* Золотисто-желтый для акцентов */
  --secondary-color:#4B0082;
/* Темно-фиолетовый, напоминающий ночное небо */
  --link-color:#1E90FF;
/* Голубой для ссылок */
  --link-hover-color:#00BFFF;
/* Ярко-голубой для ссылок при наведении */
  --link-visited-color:#8A4F9E;
/* Фиолетовый для посещенных ссылок */
  --text-color:#FFFFFF;
/* Белый для текста */
  --background-color:#2C3E50;
/* Темный фон, напоминающий ночное небо */
  --shadow-color:rgba(0,0,0,0.4);
/* Темные тени для объема */
  --font-family:Arial,sans-serif;
  --star-color:rgba(255,255,255,0.8);
/* Белый с прозрачностью для звезд */
  --highlight-color:#FF69B4;
/* Розовый для акцентов */
}

/* Стиль для ссылок */
a:link,a:active,a:hover {
  color:var(--link-color);
  text-decoration:none;
  transition:color .3s ease,text-shadow .3s ease;
}

a:hover {
  color:var(--link-hover-color);
  text-shadow:0 0 10px var(--link-hover-color);
}

a:visited {
  color:var(--link-visited-color);
}

/* Основной стиль для тела страницы */
body {
  background-color:var(--background-color);
  color:var(--text-color);
  font-family:var(--font-family);
  font-size:16px;
  margin:0;
  padding:0;
  overflow-x:hidden;
  position:relative;
  background-image:url(https://images.wallpaperscraft.ru/image/single/oblako_nebo_rozovyj_193053_1920x1080.jpg);
/* Замените на реальное изображение */
  background-size:cover;
  background-position:center;
}

/* Добавление анимации для звездного фона */
@keyframes starField {
  0% {
    transform:translateX(0) translateY(0);
  }

  100% {
    transform:translateX(100px) translateY(100px);
  }
}

.star {
  position:absolute;
  background-color:var(--star-color);
  border-radius:50%;
  animation:starField 1.5s infinite ease-in-out;
}

/* Секция профиля */
.profile_section_content {
  color:var(--text-color);
  padding:20px;
  margin:10px 0;
  border-radius:12px;
  background:rgba(0,0,0,0.7);
/* Полупрозрачный фон для блока */
  box-shadow:0 4px 8px var(--shadow-color);
  animation:fadeIn 1s ease-out,floatUp 1s ease-in-out;
  position:relative;
  overflow:hidden;
  z-index:10;
}

/* Заголовок секции */
.profile_section_content .heading {
  padding:12px;
  background-color:var(--primary-color);
  color:white;
  font-size:18px;
  font-weight:bold;
  text-transform:uppercase;
  text-align:center;
  border-radius:8px;
  box-shadow:0 2px 6px var(--shadow-color);
  margin-bottom:20px;
  animation:slideInFromLeft .5s ease-out;
}

/* Картинка с тенью (аватарка) */
.profile-avatar {
  width:180px;
  height:180px;
  margin:0 auto;
  border-radius:50%;
  box-shadow:0 8px 16px rgba(0,0,0,0.2);
  transition:transform .3s ease,box-shadow .3s ease;
  object-fit:cover;
  animation:rotateIn 2s ease-out;
}

.profile-avatar:hover {
  transform:scale(1.1);
/* Увеличиваем аватарку при наведении */
  box-shadow:0 12px 24px rgba(0,0,0,0.3);
  animation:rotateIn 1s ease-out;
/* Вращение */
}

/* Стиль для контента */
.content {
  padding:20px;
  background-color:rgba(255,255,255,0.1);
/* Молочный фон */
  border-radius:12px;
  box-shadow:0 4px 8px var(--shadow-color);
  animation:fadeIn 1s ease-out;
}

/* Лента новостей */
.my_mfc_news_feed {
  width:100%;
  height:350px;
  border:1px solid #ddd;
  border-radius:12px;
  background-color:rgba(255,255,255,0.15);
/* Прозрачный светлый фон */
  box-shadow:0 4px 8px var(--shadow-color);
  padding:10px;
  overflow-y:auto;
  animation:fadeIn 1s ease-out;
}

/* Анимации */
@keyframes fadeIn {
  0% {
    opacity:0;
    transform:translateY(20px);
  }

  100% {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes slideInFromLeft {
  0% {
    opacity:0;
    transform:translateX(-30px);
  }

  100% {
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes rotateIn {
  0% {
    transform:rotate(-180deg);
    opacity:0;
  }

  100% {
    transform:rotate(0);
    opacity:1;
  }
}

@keyframes floatUp {
  0% {
    transform:translateY(20px);
    opacity:0;
  }

  100% {
    transform:translateY(0);
    opacity:1;
  }
}

/* Применение анимации для всех элементов с классом "animate-on-scroll" */
.animate-on-scroll {
  opacity:0;
  animation:fadeInScroll 1s ease-out forwards;
}

@keyframes fadeInScroll {
  0% {
    opacity:0;
    transform:translateY(100px);
  }

  100% {
    opacity:1;
    transform:translateY(0);
  }
}

/* Эффект для кнопок при наведении */
button,.button {
  background-color:var(--primary-color);
  color:white;
  padding:10px 20px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease;
  font-size:14px;
}

button:hover,.button:hover {
  transform:scale(1.05);
  box-shadow:0 6px 12px var(--shadow-color);
  animation:buttonPress .2s ease-out;
}

/* Анимация для кнопок при нажатии */
@keyframes buttonPress {
  0% {
    transform:scale(1.05);
  }

  100% {
    transform:scale(0.95);
  }
}

/* Стили для создания эффекта звезд */
.star {
  width:3px;
  height:3px;
  position:absolute;
  animation:twinkle 1s infinite ease-in-out;
}

@keyframes twinkle {
  0% {
    opacity:.2;
  }

  50% {
    opacity:1;
  }

  100% {
    opacity:.2;
  }
}