body { width: 100vw; height: 90vh; color: #fff; background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% 400%; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; margin: 0; overflow: hidden; display: flex; /* Используем flexbox для центрирования контента */ flex-direction: column; /* Элементы будут располагаться по вертикали */ justify-content: center; /* Центрируем по вертикали */ align-items: center; /* Центрируем по горизонтали */ } @-webkit-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @-moz-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } h1, h6 { font-family: 'Open Sans', sans-serif; font-weight: 300; text-align: center; position: absolute; /* Эти стили могут конфликтовать с flexbox body, если вы их не уберете или не переделаете. Пока оставляю, но имейте в виду. */ top: 45%; right: 0; left: 0; margin: 0; } h2 { color: #ffe0e0; /* Мягкий розово-белый */ /* padding-top: 20px; */ font-family: 'Pacifico', cursive; /* Этот шрифт должен дать вам желаемый эффект наклона */ font-size: 4.2em; text-align: center; /* position: relative; */ margin-top: 0; margin-bottom: 20px; text-shadow: 0 0 28px rgba(255, 170, 170, 0.95), 0 0 55px rgba(255, 220, 220, 0.85); letter-spacing: 2px; line-height: 1.2; transform: scale(1); animation: pulse-heart 2.5s ease-in-out infinite; font-weight: normal; } /* ОБЯЗАТЕЛЬНО ДОБАВЬТЕ ЭТУ СТРОКУ В ВАШЕГО HTML-файла: */ /* */ @keyframes pulse-heart { 0% { transform: scale(1); text-shadow: 0 0 28px rgba(255, 170, 170, 0.95), 0 0 55px rgba(255, 220, 220, 0.85); } 50% { transform: scale(1.08); /* Чуть большее увеличение при пульсации */ text-shadow: 0 0 40px rgba(255, 190, 190, 1), 0 0 80px rgba(255, 240, 240, 0.95); /* Максимально яркое и глубокое свечение */ } 100% { transform: scale(1); text-shadow: 0 0 28px rgba(255, 170, 170, 0.95), 0 0 55px rgba(255, 220, 220, 0.85); } } /* Стиль для кнопок, чтобы они выглядели более нежно */ .btn-outline-light { color: #ffe0e0 !important; /* Цвет текста кнопок */ border-color: #ffe0e0 !important; /* Цвет рамки кнопок */ font-weight: 600 !important; /* Чуть легче, чем 800 */ transition: all 0.3s ease; /* Плавный переход при наведении */ } .btn-outline-light:hover { background-color: rgba(255, 224, 224, 0.2) !important; /* Легкое полупрозрачное свечение при наведении */ color: #fff !important; border-color: #fff !important; } .shake { animation: shake-animation 4.72s ease infinite; transform-origin: 50% 50%; } .element { margin: 0 auto; width: 150px; height: 150px; background: red; } @keyframes shake-animation { 0% { transform:translate(0,0) } 1.78571% { transform:translate(5px,0) } 3.57143% { transform:translate(0,0) } 5.35714% { transform:translate(0,0) } 7.14286% { transform:translate(0,0) } 8.92857% { transform:translate(5px,0) } 10.71429% { transform:translate(0,0) } 100% { transform:translate(0,0) } } .backdrop { -moz-box-shadow: 0px 6px 5px #111; -webkit-box-shadow: 0px 6px 5px #111; box-shadow: 0px 2px 10px #111; -moz-border-radius:190px; -webkit-border-radius:190px; border-radius:190px; } .linktree { width: 220px; height: 220px; background-image: url("ainata.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }