/* Page background */

body{
    background:#1e1e1e;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    margin:0;
}

/* Banner */

.banner{
    width:100%;
    display:block;
}

/* Navigation bar */

nav{
    background:#2a2a2a;
    padding:12px;
    text-align:center;
}

nav a{
    color:white;
    text-decoration:none;
    margin:0 15px;
    font-weight:bold;
}

nav a:hover{
    text-decoration:underline;
}

/* Main content container */

.content{
    width:900px;
    margin:40px auto;
}

/* Story box */

.storybox{
    background:#2b2b2b;
    padding:35px;
    border:2px solid #555;
    border-radius:8px;
}

/* Character portrait */

.icon{
    display:block;
    margin:0 auto 10px auto;
    width:120px;
}

/* Character name */

.character{
    text-align:center;
    font-weight:bold;
    font-size:20px;
    margin-bottom:10px;
}

/* Story text */

.storytext{
    text-align:center;
    line-height:1.6;
    font-size:17px;
}

/* Next button */

.nextbutton{
    display:block;
    width:120px;
    margin:30px auto;
    text-align:center;
    padding:12px;
    background:#8b6ad9;
    color:white;
    text-decoration:none;
    border-radius:8px;
    font-weight:bold;
}

.nextbutton:hover{
    background:#a084f5;
}

.navbutton{
display:inline-block;
margin:20px 10px;
padding:12px 18px;
background:#8b6ad9;
color:white;
text-decoration:none;
border-radius:8px;
font-weight:bold;
}

.navbutton:hover{
background:#a084f5;
}

#story-nav{
text-align:center;
margin-top:25px;
}