/* Color variables */
:root {
    --light: #f0e6d7;
    --dark: #211c1b;

    --red: #ab4f4f;
    --red-light: #e1c2bc;
    --red-dark: #6a352b;
    --orange: #bc7d56;
    --orange-light: #e1bf97;
    --orange-dark: #713a1a;
    --green: #4c704c;
    --green-light: #b1c4a7;
    --green-dark: #345034;
    --blue: #3c66a0;
    --blue-light: #9cadc1;
    --blue-dark: #1e1e31;
    --brown: #714d3a;
    --brown-light: #cdb6a4;
    --brown-dark: #422a23;

    --success-light: #aeeeae;
    --success-dark: #306a30;
    --failure-light: #f9bbbb;
    --failure-dark: #883131;
}

.text-main-light {
    color: var(--light);
}
.text-main-dark {
    color: var(--dark);
}

.text-red {
    color: var(--red);
}
.text-red-light {
    color: var(--red-light);
}
.text-red-dark {
    color: var(--red-dark);
}

.text-orange {
    color: var(--orange);
}
.text-orange-light {
    color: var(--orange-light);
}
.text-orange-dark {
    color: var(--orange-dark);
}

.text-green {
    color: var(--green);
}
.text-green-light {
    color: var(--green-light);
}
.text-green-dark {
    color: var(--green-dark);
}

.text-blue {
    color: var(--blue);
}
.text-blue-light {
    color: var(--blue-light);
}
.text-blue-dark {
    color: var(--blue-dark);
}

.text-brown {
    color: var(--brown);
}
.text-brown-light {
    color: var(--brown-light);
}
.text-brown-dark {
    color: var(--brown-dark);
}

.bg-main-light {
    background-color: var(--light);
    color: var(--dark);
}
.bg-main-dark {
    background-color: var(--dark);
    color: var(--light);
}

.bg-red {
    background-color: var(--red);
    color: var(--red-dark);
}
.bg-red-light {
    background-color: var(--red-light);
    color: var(--red-dark);
}
.bg-red-dark {
    background-color: var(--red-dark);
    color: var(--red-light);
}

.bg-orange {
    background-color: var(--orange);
    color: var(--orange-dark);
}
.bg-orange-light {
    background-color: var(--orange-light);
    color: var(--orange-dark);
}
.bg-orange-dark {
    background-color: var(--orange-dark);
    color: var(--orange-light);
}

.bg-green {
    background-color: var(--green);
    color: var(--green-light);
}
.bg-green-light {
    background-color: var(--green-light);
    color: var(--green-dark);
}
.bg-green-dark {
    background-color: var(--green-dark);
    color: var(--green-light);
}

.bg-blue {
    background-color: var(--blue);
    color: var(--blue-light);
}
.bg-blue-light {
    background-color: var(--blue-light);
    color: var(--blue-dark);
}
.bg-blue-dark {
    background-color: var(--blue-dark);
    color: var(--blue-light);
}

.bg-brown {
    background-color: var(--brown);
    color: var(--brown-light);
}
.bg-brown-light {
    background-color: var(--brown-light);
    color: var(--brown-dark);
}
.bg-brown-dark {
    background-color: var(--brown-dark);
    color: var(--brown-light);
}

.bg-success-light {
    background-color: var(--success-light);
    color: var(--success-dark);
}
.bg-success-dark {
    background-color: var(--success-dark);
    color: var(--success-light);
}

.bg-failure-light {
    background-color: var(--failure-light);
    color: var(--failure-dark);
}
.bg-failure-dark {
    background-color: var(--failure-dark);
    color: var(--failure-light);
}
/***** Button Styles *****/

.btn-press {
    border: none;
    border-radius: 0.2em;
    padding: 0.4em 0.8em;
    cursor: pointer;
    transition: all 0.1s ease;
    text-align: center;
    display: inline-block;
    box-shadow: inset 0px -4px rgb(0, 0, 0, 0.1), 0px 5px 5px rgb(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.btn-press:active {
    transform: translateY(2px);
}

.btn-press-flat {
    border: none;
    border-radius: 0.2em;
    padding: 0.4em 0.8em;
    cursor: pointer;
    transition: all 0.1s ease;
    text-align: center;
    display: inline-block;
    transform: translateY(-1px);
}

.btn-press-flat:active {
    transform: translateY(2px);
}

.btn-press-blank {
    border: none;
    border-radius: 0.2em;
    background-color: #00000000;
    padding: 0.4em 0.8em;
    cursor: pointer;
    transition: all 0.1s ease;
    text-align: center;
    display: inline-block;
    transform: translateY(-1px);
}

.btn-press-blank:active {
    transform: translateY(2px);
}

.btn-placeholder {
    border-radius: 0.2em;
    background-color: #00000000;
    padding: 0.4em 0.8em;
    cursor: default;
    border: 2px dashed var(--dark);
    display: inline-block;
}

/***** Table *****/


.table-center {
    margin-left: auto;
    margin-right: auto;
}

.vocab-table {
    border-collapse: collapse;
    table-layout: fixed;
}

.vocab-table td, .vocab-table th {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    padding: 0.5rem;
    vertical-align: top;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.letter-table {
    border-collapse: separate;
    border-spacing: 6px;
    width: 100%;
    max-width: 25em;
    margin-left: auto;
    margin-right: auto;
}

.letter-cell {
    aspect-ratio: 1;
    width: 20%;
    padding: 0;
    position: relative;
}

.letter-button {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0.5em;
}

.letter-button-content {
    margin: 0;
    padding: 0.1em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

/***** Other *****/
.nav-card {
    border-radius: 0.5em;
    margin: 0.4em 0.2em;
    transition: all 0.3s ease;
    display: inline-block;
}

.nav-card:hover {
    transform: translateY(-2px);
}

.w-card-narrow {
    min-width: 7em;
    width: 100%;
    max-width: 15em;
}

.w-card-medium {
    width: 100%;
    min-width: 12em;
    max-width: 20em;
}

.w-card-wide {
    min-width: 20em;
    width: 100%;
    max-width: 30em;
}