@charset "utf-8";

.body{
    font-family: 'Courier New', "M PLUS Rounded 1c", Courier, monospace;
    color: grey;
    margin: auto;
    font-weight: lighter;
    text-align: center;
}

/* test */
.green{
    background-color: green;
}
.red{
    background-color: red;
}
.yellow{
    background-color: yellow;
}
.blue{
    background-color: blue;
}
.black{
    background-color: black;
}

/* font style */
.italic{
    font-style: italic;
}

/* un_line */
.un_line{
    border-bottom: solid 1px lightgray;
    padding-top: 30px;
    margin-bottom: 30px;
}

/* flex */
.flex{
    display: flex;
}

/* list */
ul{
    list-style: none;
}
ul li a{
    color: grey;
}
ul li a:hover{
    color: orange;
}

/* title buttom */
h4{
    padding-bottom: 10px;
}

/* header */
header{
    background-color: grey;
}
header li{
    padding: 10px
}
header li a{
    color: white;
}

/* footer */
footer{
    color: white;
    background-color: grey;
    padding: 15px 0;
}
footer a{
    color: white;
}

/* profile */
.profile{
    padding-top: 10px;
}
.profile .icon img{
    border: solid 2px grey;
    border-radius: 50%;
}
.profile .info{
    padding-top: 20px;
}
.profile a{
    color: grey;
}

/* character list */
.character-list ul{
    height: 80px;
}
.charcater-list li a{
    padding-top: 5px; 
}

/* character */
.character img{
    border-radius: 50%;
    margin-top: 20px;
    border: solid 2px grey;
}
.character h5{
    padding-top: 10px;
}
.character a{
    color: grey;
}

/* scenario */
.scenario .sec{
    text-align: left;
}
.scenario h5{
    padding-top: 20px;
}

/*  */