body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-image: url('https://picbed.octalzhihao.top/img/202410011858986.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.overlay {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 3rem;
    font-weight: bold;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;      /* 垂直方向居中 */
    text-align: center;       /* 确保文本居中 */
}

/* 调整列表项文本的居中对齐 */
li a {
    text-align: center; /* 使链接内容居中 */
    flex-grow: 1; /* 确保链接内容占据li的剩余空间 */
}

li:first-child {
    border-top: 1px solid #ddd;
}

/* 奖牌样式 */
.rank-1::before {
    content: "🥇";
    margin-right: 10px;
}

.rank-2::before {
    content: "🥈";
    margin-right: 10px;
}

.rank-3::before {
    content: "🥉";
    margin-right: 10px;
}

/* codeforces各个等级的用户名和积分字体颜色 */
.newbie { color: #808080; }
.pupil { color: #228B22; }
.specialist { color: #03a89e; }
.expert { color: #0000FF; }
.candidate-master { color: #800080; }
.master { color: #FF8C00; }
.international-master { color: #FF8C00; }
.grandmaster { color: #FF0000; }
.international-grandmaster { color: #FF0000; }
.legendary-grandmaster { color: #FF0000; }

/* atcoder各个等级的用户名和积分字体颜色 */
.gray { color: #808080; }
.brown { color: #8B4513; }
.green { color: #228B22; }
.cyan { color: #00c0c0; }
.blue { color: #0000FF; }
.yellow { color: #FFFF00; }
.orange { color: #FFA500; }
.red { color: #FF0000; }

/* Nowcoder 积分颜色 */
.nc-gray { color: #b4b4b4; }
.nc-purple { color: #c177e7; }
.nc-blue { color: #5ea1f4; }
.nc-green { color: #25bb9b; }
.nc-yellow { color: #e8ca2d; }
.nc-orange { color: #fc7123; }
.nc-red { color: #FF0000; }

/* 新增最高评分的样式 */
.max-rating {
    font-size: 1rem;  /* 设置字体稍小 */
    font-weight: normal; /* 不加粗 */
}

/* 添加链接的基本样式 */
a {
    text-decoration: none; /* 去掉下划线 */
    transition: color 0.3s ease; /* 添加平滑过渡效果 */
}

/* 鼠标悬停时的样式 */
a:hover {
    color: #ff009d; /* 设置悬停时的颜色，您可以根据需要调整 */
}

/* 返回主页按钮的样式 */
.back-button {
    display: inline-block;
    margin-top: 20px;
    padding: 13px 20px;
    background-color: #007BFF; /* 绿色背景 */
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    text-align: center;
    cursor: pointer;
}

/* 鼠标悬停时按钮的效果 */
.back-button:hover {
    background-color: #0056b3; /* 鼠标悬停时变得更深 */
}

/* 使按钮在页面中居中 */
.overlay {
    text-align: center;
}