:root {
    --background: #262422;
    --border: #4e4d4e;

    --light-gray: #79797d;

    --font-color: #9899a1;
    --color-red: #ac3232;
    --font-md: 1.5rem;
    --font-lg: 2rem;
    --font-xl: 2.5rem;
    --nav-height: 75px;
    font-size: 20px;
    font-family: 'Philosopher', sans-serif;
}

ul {
    list-style: circle;
    margin-left: 1rem;
}

p,
ul {
    margin-bottom: 20px;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.text-center {
    text-align: center !important;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 20px;
    background-color: var(--font-color);
    color: var(--background);
    width: 100%;
    max-height: var(--nav-height);
}

nav .links {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
}

line {
    stroke-width: 3px;
    stroke: var(--background);
}

svg:not(.bi) {
    display: none;
}

.bi-trash3-fill {
    fill: #d00;
}
html {
    height: 100%;
}
body {
    background-color: var(--background);
    color: var(--font-color);
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

main {
    margin-inline: 15%;
}

.formContainer {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0;
}

.formContainer form:not(.tableForm) {
    border: var(--border) solid 3px;
    border-radius: 10px;
    width: 350px;
    padding: 1rem;
    margin: auto;
    margin-top: 1rem;
}

form fieldset {
    display: flex;
    flex-direction: column;
}

form fieldset input,
form fieldset select,
form textarea {
    margin-bottom: 1rem;
    font-size: inherit;
    font-family: inherit;
    background-color: var(--font-color);
    color: var(--background);
    border-radius: 5px;
    outline: 0;
    border: 0;
    padding-inline: 10px;
    width: 100%;
}

select option {
    font-family: initial;
}

form fieldset label {
    padding-bottom: 2px;
}

form textarea {
    height: 4em;
    resize: vertical;
    overflow: hidden;
}

form fieldset textarea::placeholder {
    color: var(--border);
}

form fieldset input[type="checkbox"] .checkbox {
    background-color: var(--font-color);
    color: var(--font-color);
}

.checkbox {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.checkbox * {
    width: fit-content;
    display: inline;
}

.checkbox input {
    margin: 0;
    display: inline;
    width: fit-content;
}

.tableHeading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.tableHeading div {
    width: fit-content;
}

form.tableForm fieldset {
    flex-direction: row;
    align-items: flex-end;
    gap: 1rem;
}

form.tableForm .inputContainer div {
    display: flex;
    flex-direction: column;
}

form.tableForm input,
form.tableForm select {
    margin: 0;
}

form.tableForm select {
    width: fit-content;
}

form.tableForm label {
    padding: 0;
}

.inputContainer,
.buttonContainer {
    display: flex;
    gap: 1rem;
}

form.tableForm .button {
    margin: -2px;
}

.icons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    width: fit-content;
    margin: 0 0 0 auto;
}

.icons svg {
    color: var(--font-color);
}

.icons a {
    background-image: linear-gradient(var(--font-color), var(--font-color));
}

#WEAPON {
    display: none;
    width: 50%;
    align-items: center;
    margin-bottom: 1rem;
}

#WEAPON input,
.WEAPON input {
    margin: 0;
}

.WEAPON {
    display: flex;
    width: 50%;
    align-items: center;
    margin-bottom: 1rem;
}

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
}

.stats label {
    text-align: left;
    width: 100%;
}

.stats input {
    margin-bottom: 1rem;
    width: 2rem;
    -moz-appearance: textfield;
}

.stats button:disabled {
    color: var(--border);
}

.stats input::-webkit-outer-spin-button,
.stats input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stats .button,
.stats input {
    justify-self: right;
}

.errors:not(:empty) {
    color: #d00;
    margin-bottom: 0.5rem;
    font-style: italic;
}

.buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.buttons p {
    margin: 0;
}

.button {
    background-color: #262422;
    font-size: inherit;
    font-family: inherit;
    color: var(--font-color);
    border: var(--border) 3px solid;
    border-radius: 10px;
    transition: all 150ms;
    width: fit-content;
    margin-bottom: 0;
    padding: 0px 10px;
    display: inline-block;
    height: fit-content;
    text-decoration: none;
}

a.button {
    padding: 1px 10px
}

.button:hover:not(:disabled) {
    transition: all 150ms;
    transform: translateY(-5px);
    cursor: pointer;
}

h1,
h2,
legend {
    font-size: var(--font-xl);
    font-family: 'Tangerine', sans-serif;
    font-weight: 700;
}

.title {
    /* font-size: var(--font-xl);
    font-family: 'Tangerine', sans-serif;
    vertical-align: middle; */
    max-height: var(--nav-height);
}

.title img {
    max-height: var(--nav-height);
}

h2,
legend {
    font-size: var(--font-lg);
}

h3 {
    font-size: var(--font-md);
}

table {
    width: 100%;
}

thead {
    background-color: var(--font-color);
    color: var(--background);
}

tr {
    border-bottom: var(--font-color) 1px solid;
}

tr td {
    padding: 10px;
    vertical-align: middle;
    text-align: center;
}

tr td:first-child {
    padding-inline: 5px;
    text-align: left;
}

tr td:last-child {
    text-align: right;
    padding-right: 5px;
}

main.magic table tr td:first-child {
    text-align: center;
}

main.magic table tr * {
    text-align: left;
}

.characterSheet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.saveCharacter {
    display: flex;
    justify-content: right;
}

.saveCharacter div {
    display: flex;
    align-items: center;
}

.characterSheet h3 {
    margin-bottom: 10px;
}

.statsContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.statsContainer h3:nth-of-type(2n) {
    text-align: center;
}

.characterSheet input {
    background-color: transparent;
    border: 0;
    outline: 0;
    font-size: 1em;
    color: inherit;
    font-family: "Philosopher", sans-serif;
    width: 55px;
    height: 1em;
    text-align: center;
}

.characterSheet textarea {
    margin: 0;
}

.characterSheet table td {
    text-align: left;
}

footer {
    text-align: center;
    padding-block: 1rem;
}

footer p {
    margin: 0;
}

.help {
    text-align: center;
}

@media screen and (max-width: 996px) {
    main {
        margin: 1rem 1rem 0 1rem;
    }

    form.tableForm fieldset {
        align-items: center;
    }

    .inputContainer {
        flex-direction: column;
        gap: 10px;
    }

    .buttonContainer {
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .tableHeading {
        padding-inline: 10px;
    }

}

@media screen and (max-width: 768px) {
    #burger {
        display: block;
    }

    #links {
        display: none;
        flex-direction: column;
        padding: 1rem 2rem;
        position: absolute;
        right: 0;
        top: var(--nav-height);
        background-color: var(--light-gray);
        font-size: var(--font-lg);
    }

    .characterSheet {
        grid-template-columns: 1fr;
    }

}

@media screen and (max-width: 576px) {
    :root {
        font-size: 18px;
    }

    main.tableContainer,
    main.formContainer {
        margin: var(--nav-height) 0 0;
    }

    table {
        max-width: 100%;
    }

    .tableHeading {
        flex-direction: column;
    }

    .tableHeading h1 {
        display: inline-block;
    }
}