@import url('/css/common.css');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'iCielBCAppareo', serif;
}
body {
    position: relative;
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:url(/images/bg_short.jpg) center/cover repeat-y;
    z-index:-1;
}
img.auth-left {
    position: absolute;
    left: 0;
    width: 300px;
    max-width: 30%;
}
img.auth-right {
    position: absolute;
    right: 0;
    width: 300px;
    max-width: 30%;
}
.page{
    display:flex;
    justify-content:center;
    align-items:center;
}
.auth-container{
    width:500px;
    text-align:center;
    max-width: 100%;
}
.auth-container .auth-badge {
    width: 100%;
    margin-left: -25px;
}

.form-container{
    width:320px;
    text-align:center;
    margin: 20px auto 0 auto;
    max-width: calc(100% - 20px);
    display: block;
    box-sizing: border-box;
}
.form-container .title {
    color: #5a3b22;
}

.title{
    font-size:28px;
    margin-bottom:20px;
}

.register-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.register-form input{
    padding:12px;
    border-radius:20px;
    border:1px solid #999;
}

.register-form button{
    margin-top: 10px;
    padding: 12px 12px 9px 12px;
    border: none;
    border-radius: 20px;
    background: #5a3a1a;
    color: white;
    font-weight: bold;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease;
    margin-bottom: 10px;
}
.register-form button:hover {
    background: #8b6b4a;
    color: #fff;
    border-color: #8b6b4a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06);
}

.login-link{
    margin-top:15px;
}

.login-link a{
    color:#5a3a1a;
    text-decoration:none;
}