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

html,body{

    width:100%;
    height:100%;

    background:#000;

}

body{

        display:flex;

    justify-content:center;

    align-items:center;

    font-family:"Special Elite", monospace;

}main{

    display:flex;
    flex-direction:column;
    align-items:center;

}

.portrait{

    width:clamp(260px,32vw,460px);

}

.portrait img{

    width:100%;
    height:auto;

    display:block;

}

.enter{

    margin-top:40px;

    color:#ccc;

    text-decoration:none;

    font-size:20px;

    letter-spacing:1px;

}

.enter:hover{

    color:#cfc8bc;

}
@media (max-width:600px){

    .portrait{
        width:78vw;
        max-width:360px;
    }

    .enter{
        margin-top:24px;
        font-size:17px;
    }

}
/* ---------- WELCOME PAGE ---------- */

.banner{

    width:80%;
    max-width:1500px;

    display:block;

    margin:50px auto 70px auto;

}

.welcome{

    color:#d8d2c8;

}

.welcome main{

    max-width:640px;

    margin:70px auto;

    padding:0 30px;

}

.welcome h1{

    font-size:34px;

    font-weight:normal;

    text-align:center;

    margin-bottom:60px;

}

.welcome p{

    font-size:20px;

    line-height:1.4;

    margin:14px 0;

}

.pass{

    display:inline-block;

    margin-top:50px;

    padding:16px 32px;

    border:1px solid #999;

    color:#d8d2c8;

    text-decoration:none;

}

.pass:hover{

    background:#111;

}.welcome{

    display:block;

    background:#000;

    color:#d8d2c8;

}
/* ---------- JOURNAL ---------- */

.journal{

    display:block;

    background:#000;

    color:#d8d2c8;

}

.journal main{

    max-width:620px;

    margin:70px auto;

    padding:0 30px;

}

.date{

    text-align:center;

    font-size:18px;

    margin-bottom:40px;

}

.journal h1{

    text-align:center;

    font-size:34px;

    font-weight:normal;

    margin-bottom:40px;

}

.portrait{

    display:block;

    width:100%;

    margin:0 auto 50px auto;

}

.journal p{

    font-size:20px;

    line-height:1.45;

    margin:18px 0;

}

.journal a{

    color:#d8d2c8;

    text-decoration:none;

}

.journal a:hover{

    text-decoration:underline;

}
/* ---------- CHARACTER HALL ---------- */

.character-page{
    display:block;

    min-height:100%;

    background:#000;
    color:#d8d2c8;

    font-family:"Special Elite", monospace;
}

.character-hall{
    width:min(620px, 88vw);

    margin:70px auto;
    padding:0 20px;
}

.character-hall h1{
    margin:0 0 40px;

    text-align:center;

    font-size:36px;
    font-weight:normal;
}

.character-portrait{
    display:block;

    width:min(420px, 80vw);
    height:auto;

    margin:0 auto 60px;
}

.character-hall section{
    margin:45px 0;
}

.character-hall h2{
    margin-bottom:18px;

    font-size:22px;
    font-weight:normal;
}

.character-hall p{
    font-size:19px;
    line-height:1.45;
}

.character-hall section a{
    display:block;

    margin:12px 0;

    color:#d8d2c8;

    font-size:19px;
    text-decoration:none;
}

.character-hall a:hover{
    color:#fff;
}

.hall-navigation{
    display:flex;

    justify-content:space-between;

    margin-top:70px;
    padding-top:25px;

    border-top:1px solid #333;
}

.hall-navigation a{
    color:#999;

    font-size:16px;
    text-decoration:none;
}