body{
    text-align: center;
    height: 100vh;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    /* 注册框比登录框高, 上下留点地方, 别贴着导航栏 */
    padding: 20px 0px 40px 0px;
}
#register-box{
    width: 420px;
    max-width: 90vw;
    padding: 35px 40px;
    border-radius: var(--radius-card);
    background-color: white;
    box-shadow: var(--shadow-card);
    font-family: Georgia;
}
#register-box h4{
    margin-bottom: 5px;
    color: var(--accent);
}
.formcontrol{
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    border: 2px solid var(--line);
    border-radius: var(--radius-control);
    font-size: 17px;
    font-family: sans-serif;
    transition: border-color var(--quick), box-shadow var(--quick);
}
.formcontrol:focus{
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* 挑性别那两个按钮 (样式在 base.css) 跟上下的输入框留一样的空 */
.gender-pick{
    margin-top: 10px;
}
/* 这一页的框比面板里的大一号, 这两个按钮也跟着大一号, 一叠下来才齐整 */
#register-box .gender-face{
    padding: 9px 4px;
    font-size: 16px;
}
/* 邀请码框底下那句话: 提一下没码注册不了, 是句说明, 所以细一号写淡一点 */
.invite-hint{
    margin: 6px 0px 0px 2px;
    font-size: 13px;
    font-weight: normal;
    color: var(--muted);
    text-align: left;
}
#button{
    width: 100%;
    margin-top: 20px;
    border-style: none;
    background-color: var(--accent);
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    transition: background-color var(--quick);
}
#button:hover{
    background-color: rgb(0, 165, 230);
}

/* ========== 手机上的版式 ========== */
@media (max-width: 820px){
    body{
        height: auto;
    }
    #register-box{
        padding: 28px 20px;
    }
}