/*Extra small devices (portrait phones, less than 576px)*/
/*No media query for `xs` since this is the default in Bootstrap*/
@font-face {
    font-family: wfrp3;
    src: url("/font/WFRP3-Font.ttf") format('truetype');
}

@font-face {
    font-family: drip;
    src: url("/font/plasdrip.ttf") format('truetype');
}

.error {
    font-family: 'drip', fantasy;
    color: #AF111C;
}

.error h1 {
    font-size: 8rem;
}

.error h3 {
    font-size: 2rem;
}

.header {
    padding-left: 1rem;
}

.header a {
    color: white;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

.container {
    margin-top: 2rem;
    padding: 1rem;
    width: auto;
    border-radius: .3rem;
    background-color: rgba(26, 26, 26, 0.8);
}

.action-container {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.action-container .action-side {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.remember-me,
.forgot-link {
    text-align: center;
}

#login-form p,
#login-form label {
    color: white;
}

#login-form .title {
    font-size: 28px;
    color: white;
    padding-bottom: 1rem;
}

#login-form .description,
#login-form #reset-password-link,
#login-form #registration-link {
    color: white;
    padding-bottom: 1rem;
}

#login-form #reset_password_form_email_help {
    color: white !important;
}

.wfrp-card-action {
    max-width: 375px;
    margin: auto;
    padding: 0;
}

.wfrp-card-action .core div {
    margin: 5px 0 15px;
}

.wfrp-card-action .core .name {
    color: white;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    margin: 5px 0;
}

.wfrp-card-action .core .traits {
    color: white;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    margin: 5px 0 10px;
}

.wfrp-card-action .row {
    margin: 0;
}

.wfrp-card-action .top {
    border-bottom: 5px solid gray;
    color: white;
    padding: 0;
}

.wfrp-card-action .reckless {
    border-radius: 10px;
    border: 3px solid firebrick;
}

.wfrp-card-action .conservative {
    border-radius: 10px;
    border: 3px solid forestgreen;
}

.wfrp-card-action .reckless .top {
    background-color: firebrick;
}

.wfrp-card-action .conservative .top {
    background-color: forestgreen;
}

.wfrp-card-action .top .core a,
.wfrp-card-action .top .core a:active,
.wfrp-card-action .top .core a:hover,
.wfrp-card-action .top .core a:visited {
    color: #fff;
    text-decoration-line: underline;
    text-decoration-color: rgba(255, 255, 255, .5);
}

.wfrp-card-action .top .core .action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.wfrp-card-action .top .core .action .title {
    font-size: 20px;
    font-weight: bold;
}

.wfrp-card-action .middle {
    padding-left: 0;
    padding-right: 0;
    background-color: white;
}

.wfrp-card-action .middle .skills {
    padding: 4px 0;
}

.wfrp-card-action .reckless .middle .skills {
    background-color: firebrick;
    color: white;
    border-bottom: 5px solid gray;
}

.wfrp-card-action .conservative .middle .skills {
    background-color: forestgreen;
    color: white;
    border-bottom: 5px solid gray;
}

.wfrp-card-action .middle .image {
    height: 10rem;
}

.wfrp-card-action .middle .requirements {
    padding: 4px 0 1px;
}

.wfrp-card-action .reckless .middle .requirements {
    background-color: firebrick;
    color: white;
}

.wfrp-card-action .conservative .middle .requirements {
    background-color: forestgreen;
    color: white;
}

.wfrp-card-action .bottom {
    padding: 0;
}

.wfrp-card-action .reckless .bottom .table {
    margin-bottom: 0;
    border: 5px solid firebrick;
}

.wfrp-card-action .conservative .bottom .table {
    margin-bottom: 0;
    border: 5px solid forestgreen;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: tan
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: wheat
}

.wfrp-font {
    font-family: 'wfrp3', fantasy;
    font-size: 20px;
    margin: 0 2px 0 2px;
    line-height: 0;
}

button.submit {
    background-color: #592a19;
    border-color: #592a19;
    color: #FFF;
    padding: .25rem 0;
}

button.submit:hover,
button.submit:visited,
button.submit:active {
    background-color: #AF111C;
    border-color: #AF111C;
    color: #FFF;
}

span.reckless {
    color: red;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.conservative {
    color: green;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.ability {
    color: blue;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.challenge {
    color: purple;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.expertise {
    color: yellow;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.fortune {
    color: white;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

span.misfortune {
    color: black;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.warhammer {
    color: black;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.swords {
    color: black;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.eagle {
    color: black;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.skull {
    color: black;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.comet {
    color: black;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.chaos {
    color: black;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.exertion {
    color: black;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

span.delay {
    color: black;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .container {
        padding: 3rem;
        width: 80%;
        background-color: rgba(26, 26, 26, 0.8);
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .container {
        margin-top: 9rem;
        padding: 3rem;
        width: 60%;
        background-color: rgba(26, 26, 26, 0.8);
    }

    .forgot-link {
        text-align: right;
    }

    .remember-me {
        text-align: left;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .container {
        margin-top: 7rem;
        padding: 3rem;
        width: 50%;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .container {
        margin-top: 7rem;
        padding: 3rem;
        width: 30%;
    }

}