body {
	background: #d9ceb6;
	color: #3d1100;
	font-size: 16px;
}

.moraleLogo {
    padding-top: 30px;
    margin: 20px auto;
    width: fit-content;
    height: fit-content;
}

.moraleLogo .main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-size: 72px;
    font-weight: bold;    
    font-family: 'Pirata One';
}

.moraleLogo .sub {
    text-align: right;
    font-size: 10px;
    font-weight: bold;
    margin-top: -20px;
}

.loginButton {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: -50px;
}

.loginButton a {
    background-color: #3d1100;
    color: #d9ceb6;
    padding: 10px 10px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
}
    
.linkButton {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: -50px;
}

.linkButton a {
    background-color: #3d1100;
    color: #d9ceb6;
    padding: 10px 10px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
}

.linkButton a:hover {
    background: orange;
    transition: background 0.2s;
}

.newCharButton {
    margin: 10px;
}

.newCharButton a {
    background-color: #3d1100;
    color: #d9ceb6;
    padding: 10px 10px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
}

.newCharButton a:hover {
    background: orange;
    transition: background 0.2s;
}

.contentSection {
    width: 50%;
    margin: 10px auto;
	background: #fbf0d8;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    padding: 1px 20px;
}

.info {
    background: #3d1100;
    Color: #d9ceb6;
    padding: 10px 10px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

.contentSection h1 {
    text-align: center;
    font-size: 36px;
    border-bottom: 1px solid #3d1100;
}

.contentSection li {
    font-size: 18px;
    margin: 10px auto;
}

.contentSection li .lbl {
    font-weight: bold;
}

.login {
	background: #fbf0d8;
    width: 400px;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin: 10px auto;
}

.login h1 {
    text-align: center;
    font-size: 24px;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #3d1100;
}

.login form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
}

.login form input[type='text'], .login form input[type='password'] {
    width: 350px;
    height: 50px;
    border: 1px solid #3d1100;
    margin-bottom: 10px;
    padding: 0 15px;
}

.login form input[type='submit'] {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background: #3d1100;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #fbf0d8;
    transition: background 0.2s;
}

.login form input[type='submit']:hover {
    background: orange;
    transition: background 0.2s;
}

.registration {
    text-align: center;
    padding: 10px;
    border: 1px;
}

.registration a {
    color: #3d1100;
}

.characterList input[type='submit'] {
    padding: 5px;
    margin: 10px;
    background: #3d1100;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    color: #fbf0d8;
    transition: background 0.2s;
}

.characterList input[type='submit']:hover {
    background: orange;
    transition: background 0.2s;
}

.inlineForms {
    display: grid;
    justify-content: start;
    width: fit-content;
    grid-template-columns: 1fr 1fr;
}

.inlineForms form {
    display: inline-block;
}