body {
   background-color:#1a1a1a;
   line-height: 1.6;
   padding: 20px;
   font-family: Arial, Sans-serif;
}
p {
   color: white;
}
h1, h2, h3, h4, h5, h6 {
   color: #ff8800;
   font-size: 28px;
}
.gold {
    color: gold; /* или #FFD700 */
}

.silver {
    color: silver; /* или #C0C0C0 */
}

.bronze {
    color: #cd7f32; /* классический бронзовый оттенок */
}
ol, ul {
   color: white;
}
a {
   color: rgb(132, 2, 255);
   text-decoration: none;
}
a:hover {
   text-decoration: underline;
}
.gallery {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
}
.gallery img {
   width: 300px;
   height: auto;
   border: #12011d;
   border-radius: 3px;
}
.admin-cool {
    color: rgb(0, 255, 242);
    text-shadow: #12011d 1px 1px 2px;
}
.admin-senior {
    color: rgb(157, 255, 0);
    text-shadow: #12011d 1px 1px 2px;
}
.admin-anime {
    color: rgb(190, 8, 206);
    text-shadow: #12011d 1px 1px 2px;
}
.admin-old {
    color: rgb(255, 0, 55);
    text-shadow: #12011d 1px 1px 2px;
}
/* Настройка всего тела страницы */
body {
    background-color: #1a1a1a; /* Твой темный фон */
    color: white;
    margin: 0;
    padding: 0;
    
    /*режим Flexbox — он лучший для центрирования */
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирует всё по горизонтали */
    text-align: center;  /* Центрирует текст внутри строк */
}

/* Настройка навигации, чтобы ссылки не слипались */
nav {
    width: 100%;
    padding: 20px 0;
    background-color: #111;
    margin-bottom: 30px;
}

nav a {
    margin: 0 15px;
    text-decoration: none;
    color: #8a2be2; /* Твой фиолетовый цвет */
}

/* Чтобы картинки были по центру и не ломали верстку */
img {
    display: block;
    margin: 20px auto; 
    max-width: 90%; /* Чтобы на телефонах картинки не вылезали за экран */
    height: auto;
}

/* Чтобы списки в рейтинге выглядели аккуратно */
ol, ul {
    text-align: left; /* Текст в списке читаем слева */
    display: inline-block; /* Но сам блок списка стоит по центру */
    margin-bottom: 20px;
}
.avatar-rating {
    position:relative;
    z-index: 1;
    transition: transform 0.4s ease-out, z-index 0s, box-shadow 0.4s ease-in;
    border-radius: 10px;
    display: block;
    display: inline-block;
}
.avatar-rating:hover {
    transform: translateY(-15px);
    z-index: 10;
    box-shadow: 0 10px 20px rgba(100, 100, 100, 0.5);
}
.info {
    text-size: 25px;
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease-out;
    transform: translateY(15px);
}
.card:hover .info {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.card:hover .avatar-rating {
    transform: translateY(-25px);
}