body {
    background-image: url('images/background.png');
    background-size: cover;
}

h3 {
    color: beige;
}

h6 {
    color: beige;
}

label {
    color: beige;
}

@keyframes SlideIn {
    0% {
        visibility: visible;
        opacity: 0;
        transform: scale(0.5);
    }
    75% {
        visibility: visible;
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: scale(1);
    }
}

.superior {
    background-color: yellow;
    border: 1px solid;
}

.enhanced {
    background-color: green;
    border: 1px solid;
}

.normal {
    background-color: white;
    border: 1px solid;
}

.bad {
    background-color: red;
    border: 1px solid;
}

.terrible {
    background-color: darkorchid;
    border: 1px solid;
}

.defense {
    background-color: goldenrod;
    border: 1px solid;
}

.superior-defense {
    background-color: silver;
    border: 1px solid;
}

.wound {
    background-color: orangered;
    border: 1px solid;
}

.hero {
    background-color: gold;
    border: 1px solid;
}

.title {
    width: 4rem;
    height: 4rem;
    cursor: pointer;
}

.plate {
    background-color: rgba(0.3, 0.3, 0.3, 0.55);
}

.main-box {
    width: 34rem;
}

.thumb {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0.25rem;
    cursor: pointer;
}

.bordered {
    border: 0.1rem solid beige;
    min-height: 4.2rem;
}

.animated {
    visibility: hidden;
    animation: SlideIn 0.2s linear;
    animation-fill-mode: forwards;
}

.hidden-form {
    visibility: hidden;
    display: none;
}

.pad-lg {
    padding-top: 1.5rem;
}

.pad {
    padding-top: 0.5rem;
}

.pad-sm {
    padding: 0.25rem;
}

.pointer {
    cursor: pointer;
}