/* ===========================
   全局
=========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    overflow-x: hidden;
}

/* ===========================
   背景
=========================== */

body {
    background: #ffd6e8;
    color: #222;
    position: relative;
}

.bg {
    position: fixed;
    inset: 0;
    
    background:
        linear-gradient(rgba(255, 214, 232, .30), rgba(255, 214, 232, .30)),
        url("../images/bg.jpg") center center/cover no-repeat;
    
    z-index: -1;
}

/* ===========================
   主体
=========================== */

.container {
    width: min(92%, 900px);
    margin: auto;
    min-height: 100vh;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    padding: 60px 20px;
}

/* ===========================
   头像
=========================== */

.avatar{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    display:block;

    margin:0 0 30px 30px;
}

/* ===========================
   信息卡
=========================== */

.card{
    width:100%;
    max-width:520px;

    margin:0 auto;

    padding:0;

    background:none;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;

    text-align:left;
}

.card h1{
    font-size:32px;
    color:#000;
    margin-bottom:10px;
    font-weight:700;
}

.intro{
    color:#000;
    font-size:17px;
    line-height:1.8;
    margin-bottom:24px;
}

/* ===========================
   图标按钮
=========================== */

.social {
    
    display: flex;
    
    justify-content: center;
    
    gap: 18px;
    
}

.social a{
    width:48px;
    height:48px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:none;
    border:none;

    color:#000;

    font-size:24px;

    transition:.25s;
}

.social a:hover{
    transform:translateY(-3px) scale(1.15);
}

/* ===========================
   正文
=========================== */

.content {
    
    width: 100%;
    max-width: 720px;
    
    margin-top: 55px;
    
}

.content h2 {
    
    font-size: 26px;
    
    margin-bottom: 18px;
    
    text-align: left;
    
    color: #111;
    
}

.content p {
    
    text-align: left;
    
    line-height: 2;
    
    font-size: 17px;
    
    color: #222;
    
    white-space: pre-line;
    
}

/* ===========================
   底部
=========================== */

footer {
    
    text-align: center;
    
    padding: 30px;
    
    font-size: 14px;
    
    color: #444;
    
}

/* ===========================
   手机
=========================== */

@media(max-width:768px) {
    
    .avatar {
        
        width: 110px;
        height: 110px;
        
    }
    
    .card {
        
        padding: 24px;
        
    }
    
    .card h1 {
        
        font-size: 24px;
        
    }
    
    .intro {
        
        font-size: 15px;
        
    }
    
    .social a {
        
        width: 46px;
        height: 46px;
        
        font-size: 20px;
        
    }
    
    .content {
        
        margin-top: 40px;
        
    }
    
    .content h2 {
        
        font-size: 22px;
        
    }
    
    .content p {
        
        font-size: 16px;
        
    }
    
}