body{
    background: #000000;
}

.video-background {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    z-index: -999;
}

.layout-per{
    margin-top: -12px;
    width:100%;
    min-height: 1080px;
    height: auto;
    z-index: 10;

}

/*介绍页面 头像部分*/
.PerUp{
    display: grid;
    grid-template-columns: auto 1fr 282px;
    width: 100%;
    padding: 20px;
    min-height: 220px;
    justify-content: space-between;

    background:
            radial-gradient(
                    farthest-side at bottom right,
                    var(--gradient-right),
                    transparent 500px
            ),
            radial-gradient(
                    farthest-corner at bottom left,
                    var(--gradient-left),
                    transparent 600px
            ),
            var(--gradient-background);
    background-repeat: no-repeat;
    background-position: center;
}

.PerUp-image{
    position: relative;
    width: 144px;
    height: 144px;
}
.avatar-container {
    position: relative;
    width: 144px;
    height: 144px;
}

.avatar-image-container {
    position: absolute;
    width: 100%;
    height: auto;
}

.avatar-border {
    transform: scale(1.23);
    position: absolute;
    width: 100%;
    height: auto;
}

.username {
    color: white;
    margin-top: 10px;
    margin-left: 20px;
    width: 100%;
}
.addFriend-button{
    padding: 20px 0 0 22px;

}
.button-container {
    height: 35px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
}

.button-container:hover {
    background: #898989;
    color: whitesmoke;
}

.button-link {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 38px;
    text-decoration: none;
}

.button-text {
    margin: 0;
    color: whitesmoke;
}


/*左下部分 游戏*/
.PerDown{
    display: flex;
    width: 100%;
    min-height: 700px;
    padding: 20px 20px 0 20px;
    background:
            radial-gradient(
                    farthest-side at top right,
                    var(--gradient-right), transparent 500px
            ),
            radial-gradient(
                    farthest-corner at top left,
                    var(--gradient-left), transparent 600px
            ),
            radial-gradient(
                    farthest-corner at bottom right,
                    var(--gradient-background-right), transparent 500px
            ),
            radial-gradient(
                    farthest-corner at bottom left,
                    var(--gradient-background-left), transparent 600px
            ),
            var(--gradient-background);
}

.container-1 {
    width: 68%;
    position: relative;
}

.header {
    width: 100%;
    height: 45px;
    border-radius: 2px;
    display: flex;
    background: linear-gradient(
            90deg,
            var(--gradient-showcase-header-left) 0%,
            var(--color-showcase-header) 90%);
}

.header p {
    font-size: 15px;
    color: whitesmoke;
    position: absolute;
    margin-top: 12px;
}

.header .left {
    margin-left: 20px;
}

.header .right {
    right: 1px;
}

.content {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: relative;
}

.content .spacer {
    width: 100%;
    height: 5px;
    padding: 10px;
}

.game-item {
    width: 100%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    padding: 10px;
    margin-bottom: 20px;
}

.game-item .flex {
    display: flex;
}

.game-item .image-container {
    width: 32%;
    height: auto;
    padding: 8px;
    margin-left: -8px;
}

.game-item .game-details {
    flex: 1;
    position: relative;
}

.game-item .game-details a {
    position: absolute;
    font-size: 13px;
    color: white;
    padding: 5px;
    text-decoration: none;
}

.game-item .game-details .runtime,
.game-item .game-details .last-run {
    font-size: 11px;
    margin-bottom: 0;
    color: white;
}


.achievement_progress_bar_ctn{
    height: 8px;
    padding: 1px;
    width: 145px;
    position: relative;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, .1);
}

.progress_bar{
    height: 5px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(57, 24, 61, 0.93) 80%);
}

/*右下 好友及其他*/
.container-2 {
    width: 29%;
    margin-left: 28px;
}

.badge-box {
    padding: 10px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 2px;

}


.badge-header {
    margin-top: 20px;
    text-decoration: none; /* 默认无下划线 */
    color: lightgray;
    transition: text-decoration 0.2s;
}

.badge-header:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
}

.badge-header a {
    text-decoration: none;
    color: whitesmoke;

}

.badge-header .badge-title {
    font-size: 14px;
}

.badge-header .badge-number {
    font-size: 26px;
}

.badge-list {
    display: flex;
}

.badge-item {
    padding: 3px;
}

.badge-item img {
    width: 45px;
    height: 45px;
}

.game-box,
.screenshot-box,
.review-box,
.friend-box {
    margin-top: 10px;
}

.friend-box .friend-item {
    width: 100%;
    height: 40px;
    margin-top: 5px;
}

.friend-item a {
    text-decoration: none;
}

.friend-item .friend-card {
    display: flex;
    border-radius: 2px;
    transition: background-color 0.3s;
}

.friend-item .friend-avatar {
    width: 40px;
    height: 40px;

}

.friend-item .friend-avatar img {
    width: 36px;
    height: 36px;
    margin-top: 2px;
    margin-left: 2px;
}

.friend-item .friend-info {
    position: absolute;
    margin-left: 50px;
}

.friend-item .friend-info p {
    font-size: 12px;
    color: whitesmoke;
}

.friend-item .friend-info .friend-last-run {
    margin-top: -16px;
}

.friend-item:hover {
    background: #898989;

}