/* 
#0C0C0C
#481E14
#9B3922
#F2613F 
*/

* {
    /* Global styling, try not to touch this */
    margin: 0;
    padding: 0;
}

body {
    background-color: #0C0C0C;
}

button {
    cursor: pointer;
    color: white;
    background-color: #e84016;
    border: none;
    border-radius: 10px;
    padding: 10px;
    transition: 1s;
}

button:hover {
    background-color: #b63211;
    transition: 1s;
}

i {
    padding-right: 2px;
    padding-left: 2px;
}

.indexbody {
    padding-top: 10%;
}

.logincard {
    padding-top: 1%;
    padding-bottom: 5%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    width: 50%;
    margin: auto;
    text-align: center;
}

.logincard label {
    color: white;
    font-weight: bold;
}

.logincard .logo {
    width: 13%;
}

.logincard .greeting {
    font-family: "Rubik Glitch", sans-serif;
    padding-bottom: 5%;
}

.logincard .greeting h2,
.logincard .greeting p {
    padding: 0;
    margin: 0;
}

.logincard .greeting h2 {
    color: #9B3922;
}

.logincard p {
    color: #9B3922;
}

.logincard form {
    font-family: "Instrument Sans", sans-serif;
}

.logincard input {
    margin-top: 2%;
}

.logincard form input[type="text"],
.logincard form input[type="password"] {
    padding-top: 5px;
    padding-bottom: 5px;
    width: 60%;
}

.logincard input[type="submit"] {
    margin-bottom: 1%;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    color: white;
    background-color: #F2613F;
    cursor: pointer;
    transition: 1s;
}

.logincard input[type="submit"]:hover {
    background-color: #c14c32;
    transition: 1s;
}

.logincard .newuser {
    padding-top: 5%;
}

.animatedlink {
    color: #F2613F;
    position: relative;
    text-decoration: none;
    transition: color .4s ease-out;
}

.animatedlink:hover {
    color: #9c3d28;
    right: 0;
    text-decoration: none;
}

.animatedlink:hover:after {
    border-color: #9c3d28;
    right: 0;
}

.animatedlink:after {
    border-radius: 1em;
    border-top: .1em solid #F2613F;
    content: "";
    position: absolute;
    right: 100%;
    bottom: .14em;
    left: 0;
    transition: right .4s cubic-bezier(0, .5, 0, 1),
        border-color .4s ease-out;
}

.animatedlink:hover:after {
    animation: anchor-underline 2s cubic-bezier(0, .5, 0, 1) infinite;
}

.characterlist {
    color: white;
    padding: 1vw;
}

.characterlist h1 {
    color: #9B3922;
}

.characterlist {
    font-family: sans-serif;
}

.navbar {
    padding: 1%;
    min-height: 20px;
    background-color: #c14c32;
}

.navlinks {
    list-style: none;
    padding-bottom: 1%;
}

.navlinks li {
    float: left;
    padding-left: 1%;
    padding-right: 1%;
}

.navlinks a {
    font-family: "Inter", sans-serif;
    text-decoration: underline;
    color: #FFFFFF;
    font-size: 95%;
    transition: 1s;
}

.nalinks a:hover {
    color: #BBBBBB;
    transition: 1s;
}

.navlinks .first {
    float: left;
}

.navlinks .second {
    float:right;
    padding-right: 2.5%;
    font-weight: bold; 
}

.characterlist .character {
    padding-top: 1vw;
    padding-left: 1vw;
}

.characterlist .character {
    width: 50%;
}

.characterlist .character .icon {
    float: left;
    width: 10%;
    padding-right: 2%;
}

.characterlist .character .icon img {
    width: 100%;
    min-width: 50px;
}

.characterlist .character .first {
    float: left;
    min-width: 75px;
    width: 20%;
    max-width: 30%;
    min-height: 100px;
}

.characterlist .character .first div {
    padding-bottom: 1.5%;
}

.characterlist .character .second {
    color: #AAAAAA;
    font-size: 75%;
}

.characterlist .pageoptions {
    margin-bottom: 0.5%;
    float: right;
    padding-right: 2.5%;
}

.characterlist .character .interact {
    margin-top: 3%;
}

.characterlist .character .interact button {
    margin-right: 1%;
    margin-bottom: 1%;
    padding-left: 1.5%;
    padding-right: 1.5%;
    padding-top: 1%;
    padding-bottom: 1%;
}

.spacer {
    /* Thin gray line used to visually seperate elements */
    width: 100%;
    height: 2px;
    background-color: #818181;
}

.error {
    color: red !important;
}

.header {
    margin: unset;
    padding: unset;
    position: relative;
    color: #FFFFFF;
    height: 7vw;
    background-image: url("../media/banner.webp");
    background-size: cover;
    background-position: center;
}

.header h1 {
    position: absolute;
    bottom: 35%;
    padding-left: 3%;
    font-family: "Rubik Glitch", sans-serif;
}

.requestResponse { 
    color: white;
    font-family: "Oswald", sans-serif;
}