html{
    --primary-color: #f2e269;
    --secondary-color: #cba000;
}

.icon::before{
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

html{
    margin:0 auto;
    background-color:var(--primary-color);
    color:#5a4813;
    font-family: "Balsamiq Sans", "Single Day", "Cherry Bomb One", sans-serif !important;
    overflow-x:hidden;
}

body{
    margin:0;
    background-color:#f9f8e2;
    overflow-x:hidden;
    width:100vw;
    font-family: "Balsamiq Sans", "Single Day", "Cherry Bomb One", sans-serif !important;
}

table{
    text-transform: lowercase;
}

#logo_div{
    z-index: 100;
    width: 100%;
    height: 200px;
    position: absolute;
    left:25px;
    top:25px;
}

#logo{
    height:150px;
    cursor:pointer;
}

#flags_div{
    z-index: 90;
    position: absolute;
    left:50%;
    width: max-content;
    transform: translateX(-50%);
    top:0px;
    padding-left:10px;
    padding-right:10px;
    background-color: var(--secondary-color);
    box-shadow: 0 7px 7px 0 rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.flag{
    margin-left:5px;
    margin-right:5px;
    width:50px;
}

.bg_letters{
    position: absolute;
    top: 0;
    left: 0;
    width: 200vw;
    height: calc(190px + 1vw);
    background: url('src/bg_letters.png');
    background-blend-mode: luminosity;
    background-color: var(--primary-color);
    background-size: 100%;
    background-attachment: fixed;
    z-index: 2;
    animation-name: bgScroll;
    animation-duration: 120s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background-position-y: -50%;
}


@keyframes bgScroll {
    from {
        transform: scaleY(-1) translateX(0%);
    }
    to {
        transform: scaleY(-1) translateX(-50%);
    }
}

#wave_top {
    width: 300vw;
    overflow: hidden;
    position: relative;
    height: 2vw;
    min-height: 25px;
    background: url('src/bg_letters.png');
    background-size: 2000px;
    background-repeat: repeat;
    background-color: var(--primary-color);
    background-blend-mode: luminosity;
    padding-bottom: 200px;
    animation-name: bgScroll;
    animation-duration: 120s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#wave_top_inner {
    display: flex;
    width: 300vw;
    height: 100%;
    will-change: transform;
    position: relative;
}

#wave_top_inner svg {
    width: 300vw;
    height: 100%;
    display: block;
}

#wave_bottom {
    width: 300vw;
    overflow: hidden;
    position: relative;
    height: 2vw;
    background: url('src/bg_letters.png');
    background-color: var(--primary-color);
    background-size: 2000px;
    background-repeat: repeat;
    background-blend-mode: luminosity;
    padding-top: 100px;
    margin-top: 50px;
    animation-name: bgScroll;
    animation-duration: 120s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#wave_bottom_inner {
    display: flex;
    width: 300vw;
    height: 100%;
    position: relative;
    top: 1px;
    will-change: transform;
}

#wave_bottom_inner svg {
    width: 300vw;
    height: 100%;
    display: block;
}

#navigation{
    position: fixed;
    bottom:10px;
    left:50%;
    transform: translateX(-50%);
    width: 500px;
    height: 75px;
    background-color: rgba(249, 248, 226,0.5);
    backdrop-filter: blur(10px);
    z-index: 100;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    font-size: 0px;
    display: flex;
    justify-content: center;
    align-items: center; 
}

#navigation i,#navigation p,#navigation a{
    color: #5a4813;
    text-decoration: none;
}

#navigation .nav_item{
    display: inline-block;
    text-align: center;
    width: 20%;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

#navigation .nav_item:hover{
    transform: translateY(-5px) !important;
}

#navigation .nav_item i{
    display: block;
    font-size: 30px;
}

#navigation .nav_item p{
    margin: 0;
    font-size: 14px;
}

#user_xp{
    display: block;
    font-size: 10px;
    line-height: 0px;
    transform: translateY(4px);
}

#login{
    margin:0 auto;
    width: fit-content;
    text-align: center;
}

.text_box{
    padding:0;
    height:45px;
    width:150px;
    display:inline-block;
    margin:0 auto;
    margin-top: 50px;
    border-radius:10px;
    border:none;
    background-color:#e7e0c4;
    font-size:20px;
    font-family: "Balsamiq Sans", "Single Day", "Cherry Bomb One", sans-serif !important;
    box-shadow: inset 0 5px 10px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    z-index:20;
    text-align:center;
}

#category_name{
    margin-top: 0px;
}

#new_category_button{
    margin-bottom: 0px;
}

#login_button{
    margin-top: 25px;
}

#title{
    position:relative;
    margin:0 auto;
    margin-top:-200px;
    margin-bottom: 125px;
    width:fit-content;
}

h1{
    font-family: "Cherry Bomb One", serif;
    text-align: center;
    font-size: 50px;
    color:white;
    background-color: var(--secondary-color);
    border-radius:50px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    width:fit-content;
    z-index:100;
    position:relative;
    line-height: 55px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    height:65px;
}

#title_dropdown{
    cursor: pointer;
    display: inline-block;
    margin:0px;
    border-bottom: 3px solid white;
    height:55px;
}

#title_dropdown .fa-sort-down{
    font-size:30px;
    margin-left:5px;
    transform:rotate(0deg) TranslateY(-5px);
    transition: transform 0.25s ease-in-out;
}

#title_dropdown[active="true"] .fa-sort-down{
    transform:rotate(180deg) TranslateY(-5px);
}

#planet{
    animation: 10s ease-in-out infinite alternate spin;
    transform-origin: 303px 144px;
}

@keyframes hover {
    from {
        top: calc(500px - 125px);
    }
    to {
        top: calc(500px - 75px);
    }
}

@keyframes spin {
    from {
      transform: rotate(-25deg);
    }
    to {
      transform: rotate(25deg);
    }
}

.avatar{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
}

#grammar .section_content{
    overflow-y: hidden;
    max-height:5000px;
    transition: max-height .5s ease-in-out;
}

#games .section_content{
    text-align: center;
}

#games .section_content .section_buttons{
    width:50%;
    margin:0 auto;
}

#games h2{
    cursor:auto;
}

h2{
    cursor: pointer;
}

#grammar h2 .fa-sort-down{
    font-size:40px;
    margin-left:5px;
    transform:rotate(180deg) translateY(-10px);
    transition: transform 0.25s ease-in-out;
}

#grammar h2[active="true"] .fa-sort-down{
    transform:rotate(0deg) translateY(-10px);
}

.kazakh{
    background: url('src/symbols/kazakh.svg');
    vertical-align: -5px;
    height:40px;
    width:40px;
}

.french{
    background: url('src/symbols/french.svg');
    vertical-align: -10px;
    height: 50px;
    width: 50px;
}

.french:nth-of-type(2){
    transform: scaleX(-1);
}

.russian{
    background: url('src/symbols/russian.svg');
    vertical-align: -7px;
    height: 50px;
    width: 50px;
}

.korean{
    background: url('src/symbols/korean.svg');
    vertical-align: -4px;
    height:40px;
    width:40px;
}

.japanese{
    background: url('src/symbols/japanese.svg');
    vertical-align: -5px;
    height:40px;
    width:40px;
}

.kazakh,.french,.russian,.korean,.japanese{
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
}

#search_bar{
    width:calc(100% - 50px);
    max-width:750px;
    height:65px;
    display:block;
    margin:0 auto;
    border-radius:10px;
    border:none;
    background-color:#e7e0c4;
    padding-left:50px;
    font-size:20px;
    font-family: "Balsamiq Sans", "Single Day", "Cherry Bomb One", sans-serif !important;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    z-index:20;
}

h1 .fa-sun{
    font-size:40px;
}

#search_bar_div{
    position: relative;
    width:90%;
    max-width:800px;
    margin:0 auto;
    height:fit-content;
}

#search_bar_div::before{
    pointer-events:none;
    position:relative;
    top:45px;
    left:20px;
    z-index:30;
    font-size:20px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f002";
    opacity: 0.5;
}

#search_bar:focus{
    outline:none;
}

#keyboard_button{
    position:absolute;
    font-size:30px;
    padding: 10px;
    padding-right: 15px;
    cursor: pointer;
    top: calc(50% - 30px);
    right: 0px;
    z-index: 30;
    width: 30px;
    background-color: #f2e574;
    border-radius: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.35);
    border: 1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: none;
    transition: padding-right 0.2s ease-in-out,
            background-color 0.2s ease-in-out,
            border-bottom 0.2s ease-in-out,
            box-shadow 0.2s ease-in-out;
    white-space: nowrap;
}

#keyboard_button p{
    margin-top: 0px;
    margin-bottom: 0px;
    display: inline-block;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    font-size:20px;
    vertical-align: middle;
}

#keyboard_button i{
    vertical-align: middle;
}

#keyboard_button:hover,#keyboard_button[active="true"]{
    padding-right: 110px;
}

#keyboard_button[active="true"]{
    background-color:#d5be66;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset;
}

#keyboard_button:hover p,#keyboard_button[active="true"] p{
    opacity: 1;
}

#keyboard{
    position:fixed;
    z-index:100;
    width:500px;
    top: 25%;
    left: calc(50% - 250px);
    background-color: #e7e0c4;
    background-image: url('src/bg.png');
    background-size: 50%;
    text-align: center;
    padding-bottom: 25px;
    border-radius: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.35);
    border: 1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
}

#keyboard .letter p{
    font-size: 20px;
    margin:0 auto;
    height:50px;
    line-height: 50px;
}

.keyboard_header{
    width:100%;
    height:50px;
    text-align: center;
    color: #5a4813;
    margin-bottom:25px;
    margin-top:10px;
    cursor: pointer;
}

.keyboard_close{
    position:absolute;
    top:10px;
    right:10px;
    font-size:20px;
    cursor:pointer;
}

#words_outer{
    width:85%;
    max-width:750px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin: 0 auto;
    max-height:400px;
    overflow:hidden;
    position: relative;
    z-index:1;
    box-shadow:0px 5px 20px rgba(0,0,0,0.1);
    background-color: #ded5ac;
}

#words{
    max-height:400px;
    width:100%;
    margin: 0 auto;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow-y: auto;
    padding-bottom:10px;
    background-color: #ded5ac;
    background-image: url('src/bg.png');
    background-attachment: local;
    background-size: 50%;
    z-index:1;
}

.word{
    margin-left:2px;
    margin-right:2px;
    margin-bottom: 0px;
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    width:fit-content;
    height:fit-content;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-radius:10px;
    text-align:center;
    font-size:20px;
    font-weight: 400;
    font-style: normal;
    cursor: pointer;
    text-transform: lowercase;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
    transition: 0.2s all;
    transform: scale(1);
}

.word:hover{
    transform: scale(1.05);
}

#guess_word, #number_output, #number_game_output{
    height:61px;
    width:260px;
    display: inline-table;
    margin:0 auto;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-radius:10px;
    text-align:center;
    font-size:20px;
    font-weight: 400;
    font-style: normal;
    cursor: pointer;
    text-transform: lowercase;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
    position: relative;
    z-index:20;
    vertical-align: middle;
    line-height: 65px;
    margin-top:-3px;
}

#guess_word p{
    line-height: 20px;
}

#number_output p, #number_game_output p, #guess_word p{
    margin:0 auto;
    display:table-cell;
    vertical-align: middle;
    line-height: 30px;
}


.word:nth-child(7n),.letter:nth-child(7n),.number:nth-child(7n),.col1,.button:nth-child(7n),.button_1{
    background-color:#fbc59f;
}
.word:nth-child(7n+1),.letter:nth-child(7n+1),.number:nth-child(7n+1),.col2,.button:nth-child(7n+1),.button_2,.association_word:nth-child(7n+1){
    background-color:#f4eb84;
}
.word:nth-child(7n+2),.letter:nth-child(7n+2),.number:nth-child(7n+2),.col3,.button:nth-child(7n+2),.button_3,.association_word:nth-child(7n+2){
    background-color:#c499e0;
}
.word:nth-child(7n+3),.letter:nth-child(7n+3),.number:nth-child(7n+3),.col4,.button:nth-child(7n+3),.button_4,.association_word:nth-child(7n+3){
    background-color:#f39f95;
}
.word:nth-child(7n+4),.letter:nth-child(7n+4),.number:nth-child(7n+4),.col5,.button:nth-child(7n+4),.button_5,.association_word:nth-child(7n+4){
    background-color:#a9e3bb;
}
.word:nth-child(7n+5),.letter:nth-child(7n+5),.number:nth-child(7n+5),.col6,.button:nth-child(7n+5),.button_6{
    background-color:#e6b8b8;
}
.word:nth-child(7n+6),.letter:nth-child(7n+6),.number:nth-child(7n+6),.col7,.button:nth-child(7n+6),.button_7{
    background-color:#a6cdf4;
}

.button[active="true"]:nth-child(7n){
    background-color:#e0ab85;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset;
}

.button[active="true"]:nth-child(7n+1),.association_word[active="true"]:nth-child(7n+1),.association_word[done="true"]:nth-child(7n+1){
    background-color:#c7b056;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset;
}

.button[active="true"]:nth-child(7n+2),.association_word[active="true"]:nth-child(7n+2),.association_word[done="true"]:nth-child(7n+2){
    background-color:#ae82ca;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset;
}

.button[active="true"]:nth-child(7n+3),.association_word[active="true"]:nth-child(7n+3),.association_word[done="true"]:nth-child(7n+3){
    background-color:#d8837a;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset;
}

.button[active="true"]:nth-child(7n+4),.association_word[active="true"]:nth-child(7n+4),.association_word[done="true"]:nth-child(7n+4){
    background-color:#8ac59d;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset;
}

.button[active="true"]:nth-child(7n+5){
    background-color:#ca9797;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset;
}

.button[active="true"]:nth-child(7n+6){
    background-color:#80a9d1;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset;
}

.word:nth-child(7n):active,.letter:nth-child(7n):active,.number:nth-child(7n):active,.col1:active,.button:nth-child(7n):active{
    background-color:#e0ab85;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset;
}
.word:nth-child(7n+1):active,.letter:nth-child(7n+1):active,.number:nth-child(7n+1):active,.col2:active,.button:nth-child(7n+1):active,.association_word:nth-child(7n+1):active{
    background-color:#c7b056;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset;
}
.word:nth-child(7n+2):active,.letter:nth-child(7n+2):active,.number:nth-child(7n+2):active,.col3:active,.button:nth-child(7n+2):active,.association_word:nth-child(7n+2):active{
    background-color:#ae82ca;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset;
}
.word:nth-child(7n+3):active,.letter:nth-child(7n+3):active,.number:nth-child(7n+3):active,.col4:active,.button:nth-child(7n+3):active,.association_word:nth-child(7n+3):active{
    background-color:#d8837a;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset;
}
.word:nth-child(7n+4):active,.letter:nth-child(7n+4):active,.number:nth-child(7n+4):active,.col5:active,.button:nth-child(7n+4):active,.association_word:nth-child(7n+4):active{
    background-color:#8ac59d;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset;
}
.word:nth-child(7n+5):active,.letter:nth-child(7n+5):active,.number:nth-child(7n+5):active,.col6:active,.button:nth-child(7n+5):active{
    background-color:#ca9797;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset;
}
.word:nth-child(7n+6):active,.letter:nth-child(7n+6):active,.number:nth-child(7n+6):active,.col7:active,.button:nth-child(7n+6):active{
    background-color:#80a9d1;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset;
}

.button_1{
    background-color:#fbc59f !important;
}
.button_2{
    background-color:#f4eb84 !important;
}
.button_3{
    background-color:#c499e0 !important;
}
.button_4{
    background-color:#f39f95 !important;
}
.button_5{
    background-color:#a9e3bb !important;
}
.button_6{
    background-color:#e6b8b8 !important;
}
.button_7{
    background-color:#a6cdf4 !important;
}

.button_1[active="true"]{
    background-color:#e0ab85 !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset !important;
}

.button_2[active="true"]{
    background-color:#c7b056 !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset !important;
}

.button_3[active="true"]{
    background-color:#ae82ca !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset !important;
}

.button_4[active="true"]{
    background-color:#d8837a !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset !important;
}

.button_5[active="true"]{
    background-color:#8ac59d !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset !important;
}

.button_6[active="true"]{
    background-color:#ca9797 !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset !important;
}

.button_7[active="true"]{
    background-color:#80a9d1 !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 0px 2px rgba(0,0,0,0.25) inset !important;
}

.button_1:active{
    background-color:#e0ab85 !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset !important;
}
.button_2:active{
    background-color:#c7b056 !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset !important;
}
.button_3:active{
    background-color:#ae82ca !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset !important;
}
.button_4:active{
    background-color:#d8837a !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset !important;
}
.button_5:active{
    background-color:#8ac59d !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset !important;
}
.button_6:active{
    background-color:#ca9797 !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset !important;
}
.button_7:active{
    background-color:#80a9d1 !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset !important;
}

#guess_game,#association_game{
    width:90%;
    max-width:750px;
    margin:0 auto;
    margin-top:50px;
    display:block;
    text-align:center;
}

#association_columns{
    display: flex;
    justify-content: center;
}

#association_left_column,#association_right_column{
    margin-left: 25px;
    margin-right: 25px;
}

.association_word{
    margin-left:2px;
    margin-right:2px;
    margin-bottom: 5px;
    margin-top: 5px;
    height:35px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 35px;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-radius:10px;
    text-align:center;
    font-size:20px;
    font-weight: 400;
    font-style: normal;
    cursor: pointer;
    text-transform: lowercase;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
}

.association_word p{
    margin-top: 0px;
}

.association_word:active,.association_word[active="true"],.association_word[done="true"]{
    padding-top: 1.5px;
}

.association_word[done="true"]{
    opacity: 0.5;
}

h2{
    font-size:40px;
    font-weight:700;
    margin:0 auto;
    margin-bottom:10px;
    text-align:center;
    margin-top:50px;
}

h3{
    font-size:30px;
    font-weight:700;
    margin:0 auto;
    margin-bottom:10px;
    text-align:center;
    margin-top:50px;
}

#guess_result,#wordle_output,#association_result,#number_game_result{
    font-size:20px;
    color:#f9f8e2;
    background-color:#5a4813;
    border-radius:25px;
    padding-left: 15px;
    padding-right: 15px;
    width:fit-content;
    margin:0 auto;
    margin-top:25px;
    height:25px;
    opacity:0;
}

#guess_input, #number_input, #number_game_input{
    padding:0;
    height:65px;
    width:250px;
    display:inline-block;
    margin:0 auto;
    border-radius:10px;
    border:none;
    background-color:#e7e0c4;
    padding-left:10px;
    font-size:20px;
    font-family: "Balsamiq Sans", "Single Day", "Cherry Bomb One", sans-serif !important;
    box-shadow: inset 0 5px 10px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    z-index:20;
    text-align:center;
}

#guess_input:focus, #number_input:focus, #number_game_input:focus{
    outline:none;
}

#number_translate{
    margin:0 auto;
    margin-top: 50px;
    width: 90%;
    max-width: 750px;
    display: block;
    text-align: center;
}

#number_output, #number_game_output{
    background-color:#fbc59f;
}

#number_game_output{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#clock_output{
    font-size:25px;
    color:#f9f8e2;
    background-color:#5a4813;
    border-radius:25px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 7px;
    margin:0 auto;
    margin-top:25px;
    height:30px;
    min-width: 250px;
    width: fit-content;
    margin-bottom: 50px;
}

.section{
    width:90%;
    margin:0 auto;
    display:block;
    text-align: center;
}

#alphabet{
    max-width:400px;
    text-align:left;
    margin:0 auto;
}

#numbers{
    max-width:600px;
    text-align:center;
    margin:0 auto;
}

.letter p{
    font-size: 20px;
    margin:0 auto;
    height:25px;
    line-height: 25px;
}

.letter p:nth-child(2){
    font-size: 13px;
    height:13px;
    line-height: 13px;
}

.number p{
    font-size: 30px;
    margin:0 auto;
    height:25px;
    line-height: 25px;
}

.number p:nth-child(2){
    font-size: 15px;
    height:15px;
    line-height: 15px;
}

.letter,.number{
    user-select: none;
    height:50px;
    width:50px;
    display:inline-block;
    margin:0 auto;
    margin-left:2px;
    margin-right:2px;
    margin-bottom:10px;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-radius:10px;
    text-align:center;
    font-size:20px;
    font-weight: 400;
    font-style: normal;
    cursor: pointer;
    text-transform: lowercase;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
    position: relative;
    z-index:20;
    vertical-align: middle;
    line-height: 50px;
    margin-top:-3px;
}

.number{
    height:65px;
    width:75px;
    padding-top:10px;
}

.cases,.tenses{
    width:100%;
    overflow-x: auto;
}

#vowels_table{
    font-style: italic;
    margin:0 auto;
    border-collapse: collapse;
    margin-bottom:25px;
    text-transform: none;
}

#vowels_table td:not(:first-child){
    border: 1px solid black;
    border-top:0;
    border-bottom:0;
    width:50px;
    text-align: center;
}
#vowels_table tr:last-child td {
    border-bottom: 0;
}
#vowels_table tr td:first-child,#vowels_table tr td:nth-child(2){
    border-left: 0;
}
#vowels_table tr td:last-child{
    border-right: 0;
}

#vowels_table td:first-child{
    text-align: right;
}

.grammar_table{
    font-size:20px;
    min-width:500px;
    border:1px solid #5a4813;
    border-collapse:collapse;
    width:90%;
    max-width:1000px;
    margin:0 auto;
    border-radius:5px;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 10px;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    box-shadow:0 5px 10px rgba(0,0,0,0.1);
}

.table_div{
    overflow-x: auto;
    display: block;
}

.highlight{
    display: inline-block;
    color:var(--secondary-color);
    font-weight: 700;
}

.cases_general_table{
    min-width: 700px;
}
   
/* Apply a border to the right of all but the last column */
.grammar_table th:not(:last-child),
.grammar_table td:not(:last-child){
border-right: 1px solid black;
}

.grammar_table th{
    background-color: var(--primary-color);
    height:45px;
    text-align:center;
}

.grammar_table td{
    text-align:center;
    height:35px;
    background-color:#e7e0c4;
}

.cases_table td:first-child{
    width:100px;
    font-weight: 700;
}

.tense_table td:first-child{
    width:130px;
    font-weight: 700;
}

.cases_general_table td:first-child{
    width:100px;
    font-weight: 700;
}

.cases_general_table td:nth-child(3){
    width:100px;
    font-weight: 700;
}

.cases_general_table td:nth-child(4){
    width:250px;
}

.cases_general_table td:nth-child(5){
    width:200px;
}

/* Apply a border to the bottom of all but the last row */
.grammar_table>thead>tr:not(:last-child)>th,
.grammar_table>thead>tr:not(:last-child)>td,
.grammar_table>tbody>tr:not(:last-child)>th,
.grammar_table>tbody>tr:not(:last-child)>td,
.grammar_table>tfoot>tr:not(:last-child)>th,
.grammar_table>tfoot>tr:not(:last-child)>td,
.grammar_table>tr:not(:last-child)>td,
.grammar_table>tr:not(:last-child)>th,
.grammar_table>thead:not(:last-child),
.grammar_table>tbody:not(:last-child),
.grammar_table>tfoot:not(:last-child) {
    border-bottom: 1px solid black;
}

.grammar_table tr:first-child th:first-child{
    border-top-left-radius: 9px;
}

.grammar_table tr:first-child th:last-child{
    border-top-right-radius: 9px;
}

.grammar_table tr:last-child td:first-child{
    border-bottom-left-radius: 9px;
}

.grammar_table tr:last-child td:last-child{
    border-bottom-right-radius: 9px;
}

.progress_div{
    width:90%;
    max-width:750px;
    margin:0 auto;
    margin-bottom:0px;
    display:block;
    text-align:center;
    opacity:0;
    height:0px;
    transition: margin-bottom 0.5s ease-in-out, height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

#progress_div p{
	background-color: #f4b900;
	color: white;
	width: fit-content;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 20px;
	border: 3px solid white;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
    opacity: 0;
    animation: bob 4s ease-in-out infinite;
    transform: translateX(-100%);
    position: relative;
    height:20px;
}

#progress_div p::after{
    content: "";
    height:10px;
    width: 10px;
    transform:rotate(45deg);
    background-color:#f4b900;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    display:block;
    margin:0 auto;
    margin-top: 2px;
}

@keyframes bob {
    0% {
        transform: translate(-50%,0);
    }
    50% {
        transform: translate(-50%,-5px);
    }
    100% {
        transform: translate(-50%,0);
    }
}

.total{
    height:5px;
    background-color: #ddcfaa;
    border-radius:10px;
    margin-bottom: 25px;
}

.progress{
    height:10px;
    background-color: #f4b900;
    border-radius:10px;
    width:0%;
    margin-top:-32.5px;
    position:relative;
    z-index: 1;
}

.progress_total{
    height:10px;
    background-color: #ddcfaa;
    border-radius:10px;
    width:0%;
    margin-top:-10px;
    position:relative;
    z-index:0;
}

.body_part,.cloth_part{
    width: 90%;
    max-width: 700px;;
    margin:0 auto;
    display:block;
}

.st0{fill:none;}
.st1{fill:none;stroke:#5A4813;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:none;stroke:#5A4813;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

#clothes_arrow_left,#clothes_arrow_right{
    margin-top:25px;
    width:50px;
    height:50px;
    cursor:pointer;
    z-index: 100;
    font-size: 50px;
    margin-left: 100px;
    margin-right: 100px;
    display: inline-block;
}

#Layer_1{
    pointer-events: none;
}

#Layer_2 polygon, #Layer_2 path, #SELECT polygon, #SELECT path, #SELECT g{
    fill:none;
    stroke-width: 0px;
    pointer-events: fill;
}

#Layer_2 polygon:hover, #Layer_2 path:hover, #SELECT g:hover polygon, #SELECT g:hover path{
    fill:var(--primary-color);
}

#clothes_diagrams{
    position: relative;
}

#body_info,#clothes_info{
    z-index: 100;
    display: table;
    width:fit-content;
    padding-left: 15px;
    padding-right: 15px;
    height:0px;
    position:absolute;
    opacity: 0;
    pointer-events: none;
    background-color: var(--primary-color);
    border-radius: 10px;
    border: 1px solid #5a4813;
    border-bottom: 2px solid #5a4813;
    transition:height .2s cubic-bezier(.68,-0.55,.27,1.55),width .2s cubic-bezier(.68,-0.55,.27,1.55),opacity .1s cubic-bezier(.68,-0.55,.27,1.55);
    overflow-y: hidden;
    overflow-x: hidden;
    box-shadow: 0 7px 7px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
}

#body_info p,#clothes_info p{
    transition: opacity 0.1s ease-in-out;
}

#search_filters{
    width:100%;
    text-align: center;
    height:35px;
    z-index: 2;
}

.tag-filter p{
    display: inline-block;
}

.filter,.filter_tags{
    cursor: pointer;
    margin-left:5px;
    margin-right:5px;
    display: inline-block;
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    width:fit-content;
    height:fit-content;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-radius:10px;
    text-align:center;
    font-size:20px;
    font-weight: 400;
    font-style: normal;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
    background-color: #f2e574;
    transition: all 0.1s ease-in-out;
    vertical-align: top;
}

#words #search_filters .filter,#words #search_filters .filter_tags{
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top: none;
}

.filter p,.filter_tags p{
    margin:0;
    transition: all 0.1s ease-in-out;
    transform: translateY(0px);
}

.filter[active="true"],.filter_tags[active="true"]{
    background-color:#d5be66;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset;
}

.filter:active,.filter_tags:active{
    background-color:#c7b056;
    border-bottom: 1.5px solid #5a4813;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset;
}

.filter[active="true"] p,.filter_tags[active="true"] p{
    transform: translateY(-1px);
}

.filter:active p,#filter_tags:active p{
    transform: translateY(-2px);
}

.tag{
    cursor: pointer;
    padding-top: 2px;
    padding-bottom: 2px;
}

.tag:nth-child(even){
    background-color: #faf1a5;
}

.tag:hover{
    background-color: #d5be66;
}

.filter_tags i, #filter_tags p{
    display: inline-block;
}

.filter_tags i{
    transform:scale(1.25) translateY(-5px) translateX(5px);
}

.tags_list{
    display: none;
    position: relative;
    width:fit-content;
    min-width: 100px;
    height:200px;
    overflow-y: auto;
    z-index: 500;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-radius:10px;
    text-align:center;
    font-size:20px;
    font-weight: 400;
    font-style: normal;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
    background-color: #f2e574;
}

.locations{
    text-align: center;
}

#location_renderer canvas{
    margin:0 auto;
}

.colors{
    max-width: 750px;
    text-align: center;
}

#color_picker{
    height:61px;
    width:333px;
    display: inline-table;
    margin:0 auto;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-radius:10px;
    text-align:center;
    font-size:20px;
    font-weight: 400;
    font-style: normal;
    cursor: pointer;
    text-transform: lowercase;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
    position: relative;
    z-index:20;
    vertical-align: middle;
    line-height: 65px;
    margin-bottom: 25px;
    background-color: #efe273;
    transform: translateY(25px);
}

#color_picker p{
    line-height: 20px;
    pointer-events: none;
}

.jscolor-wrap{
    transform: translateY(-25px) !important;
}

.jscolor-border{
    background:#f4eb84 !important;
    border:1.5px solid #5a4813 !important;
    border-bottom: 3px solid #5a4813 !important;
}

.jscolor-shadow{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 10px 0px !important;
}

.jscolor-picker > div:first-child, .jscolor-picker > div:nth-child(3), .jscolor-palette-sw{
    border:1px solid #5a4813 !important;
}

.jscolor-palette-sw{
    border-bottom: 2px solid #5a4813 !important;
    border-radius: 5px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px 0px !important;
}

.jscolor-palette-sw div{
    border-radius: 4px !important;
    height:25px !important;
}

.jscolor-picker > div:first-child, .jscolor-picker > div:first-child > div > canvas{
    border-radius: 10px !important;
}

.table_week,.table_year,.table_season{
    font-size:15px;
    border:1px solid #5a4813;
    border-collapse:collapse;
    margin:0 auto;
    border-radius:5px;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 10px;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    box-shadow:0 5px 10px rgba(0,0,0,0.1);
    line-height: 10px;
    table-layout: fixed;
}

.table_year{
    width:1000px;
}

.table_week{
    width:750px;
}

.table_year th,.table_week th, .table_season th{
    font-size: 20px;
}

.table_year td p:nth-child(2),.table_week td p:nth-child(2),.table_season td p:nth-child(2){
    font-weight: bold;
}

/* Apply a border to the right of all but the last column */
.table_week th:not(:last-child),
.table_week td:not(:last-child),
.table_year th:not(:last-child),
.table_year td:not(:last-child),
.table_season th:not(:last-child),
.table_season td:not(:last-child){
    border-right: 1px solid black;
}

.table_week th,.table_year th, .table_season th{
    background-color: var(--primary-color);
    height:45px;
    text-align:center;
}

.table_week td,.table_year td, .table_season td{
    text-align:center;
    height:35px;
    background-color:#e7e0c4;
}

/* Apply a border to the bottom of all but the last row */
.table_year>thead>tr:not(:last-child)>th,
.table_year>thead>tr:not(:last-child)>td,
.table_year>tbody>tr:not(:last-child)>th,
.table_year>tbody>tr:not(:last-child)>td,
.table_year>tfoot>tr:not(:last-child)>th,
.table_year>tfoot>tr:not(:last-child)>td,
.table_year>tr:not(:last-child)>td,
.table_year>tr:not(:last-child)>th,
.table_year>thead:not(:last-child),
.table_year>tbody:not(:last-child),
.table_year>tfoot:not(:last-child),
.table_week>thead>tr:not(:last-child)>th,
.table_week>thead>tr:not(:last-child)>td,
.table_week>tbody>tr:not(:last-child)>th,
.table_week>tbody>tr:not(:last-child)>td,
.table_week>tfoot>tr:not(:last-child)>th,
.table_week>tfoot>tr:not(:last-child)>td,
.table_week>tr:not(:last-child)>td,
.table_week>tr:not(:last-child)>th,
.table_week>thead:not(:last-child),
.table_week>tbody:not(:last-child),
.table_week>tfoot:not(:last-child),
.table_season>thead>tr:not(:last-child)>th,
.table_season>thead>tr:not(:last-child)>td,
.table_season>tbody>tr:not(:last-child)>th,
.table_season>tbody>tr:not(:last-child)>td,
.table_season>tfoot>tr:not(:last-child)>th,
.table_season>tfoot>tr:not(:last-child)>td,
.table_season>tr:not(:last-child)>td,
.table_season>tr:not(:last-child)>th,
.table_season>thead:not(:last-child),
.table_season>tbody:not(:last-child),
.table_season>tfoot:not(:last-child) {
    border-bottom: 1px solid black;
}

.table_year tr:first-child th:first-child,.table_week tr:first-child th:first-child,.table_season tr:first-child th:first-child{
    border-top-left-radius: 9px;
}

.table_year tr:first-child th:last-child,.table_week tr:first-child th:last-child,.table_season tr:first-child th:last-child{
    border-top-right-radius: 9px;
}

.table_year tr:last-child td:first-child,.table_week tr:last-child td:first-child,.table_season tr:last-child td:first-child{
    border-bottom-left-radius: 9px;
}

.table_year tr:last-child td:last-child,.table_week tr:last-child td:last-child,.table_season tr:last-child td:last-child{
    border-bottom-right-radius: 9px;
}

.table_week,.table_year{
    margin-bottom: 25px;
}

.wordle{
    text-align: center;
}

#wordle{
    width:350px;
    max-width:750px;
    margin:0 auto;
    display:block;
    text-align:center;
}

#wordle table{
    margin:0 auto;
    margin-bottom:25px;
    border-spacing:5px;
}

#wordle table td{
    width:50px;
    height:50px;
    font-size: 30px;
    background-color: #e7e0c4;
    border-radius:10px;
    box-shadow: 0 0px 2px rgba(0,0,0,0.2);
    border:1px solid rgba(0,0,0,0);
    border-bottom: 3px solid rgba(0,0,0,0);
    text-align: center;
}

#wordle table td.filled{
    border:1px solid #5a4813 !important;
    border-bottom: 3px solid #5a4813 !important;
    background-color: #f4eb84;
}

#wordle_alphabet{
    margin: 0 auto;
    width:350px;
}

#wordle_output{
    opacity:0;
    margin-bottom:25px;
    height: auto;
    min-height: 25px;
}

.wordle_return,.wordle_enter{
    width:165px;
}

.wordle_return{
    background-image:url('src/symbols/return.png');
    background-repeat: no-repeat;
    background-size:20%;
    background-position: center;
}

.wordle_enter{
    text-transform: capitalize;
    font-weight: bold;
}

.wordle_letter{
    user-select: none;
    height:50px;
    width:50px;
    display:inline-block;
    margin:0 auto;
    margin-left:2px;
    margin-right:2px;
    margin-bottom:10px;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-radius:10px;
    text-align:center;
    font-size:20px;
    font-weight: 400;
    font-style: normal;
    cursor: pointer;
    text-transform: lowercase;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
    position: relative;
    z-index:20;
    vertical-align: middle;
    line-height: 50px;
    margin-top:-3px;
    background-color: #f4eb84;
}

.wordle_letter:active{
    background-color:#c7b056 !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset !important;
}

.time{
    width:100%;
}

.time_tables{
    overflow-x: auto;
}

.clock-timepicker{
    margin:0 auto;
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

.clock-timepicker-popup{
    box-shadow: none !important;
}

.clock-shadow{
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}

.clock{
    height:61px;
    width:133px;
    display: inline-table;
    margin:0 auto;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-radius:10px;
    text-align:center;
    font-size:20px;
    font-weight: 400;
    font-style: normal;
    cursor: pointer;
    text-transform: lowercase;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
    position: relative;
    z-index:20;
    vertical-align: middle;
    line-height: 65px;
    background-color: #a6cdf4;
    transform: translateY(25px);
    font-family: "Balsamiq Sans";
    color:#5a4813;
}

.clock:focus{
    outline:none;
    background-color:#80a9d1 !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset !important;
}

.clock:active{
    background-color:#80a9d1 !important;
    border-bottom: 1.5px solid #5a4813 !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset !important;
}

.weather h3{
    margin-bottom: 25px;
}

.weather_day{
    display:inline-block;
    width:125px;
    height:125px;
    margin:0 auto;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-radius:10px;
    text-align:center;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 35px;
    margin-top: 25px;
    background-color: #c4e1ff;
    box-shadow: 0 0px 10px rgba(0,0,0,0.1);
}

.weather_n_day{
    margin:0 auto;
    margin-top: -26px;
    border: 1.5px solid #5a4813;
    border-bottom: none;
    border-radius: 7px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #f4eb84;
    height:24px;
    width:fit-content;
    padding-left: 8px;
    padding-right: 8px;
    line-height: 24px;
    box-shadow: inset 0px -5px 5px rgba(0,0,0,.05);
}

.weather_temp{
    margin:0 auto;
    margin-top: -2px;
    border: 1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-top: none;
    border-radius: 10px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    background-color: #fbc59f;
    height:24px;
    width:fit-content;
    padding-left: 8px;
    padding-right: 8px;
    line-height: 24px;
    box-shadow: inset 0px 7px 7px rgba(0,0,0,.1);
}

.weather_day img{
    width:100px;
}

.weather_name{
    height:25px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.button{
    margin-left:2px;
    margin-right:2px;
    margin-bottom: 25px;
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    width:fit-content;
    height:fit-content;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    border-radius:10px;
    text-align:center;
    font-size:20px;
    font-weight: 400;
    font-style: normal;
    cursor: pointer;
    text-transform: lowercase;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
    background-color: #f4eb84;
    display: inline-block;
    transition: all 0.1s ease-in-out;
    color:#5a4813;
}

.game_section h3{
    display: none;
}

.tense_buttons{
    margin:0 auto;
}

.tense_buttons .button{
    margin-bottom:5px;
}

.switch {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    margin-bottom: 25px;
    width: 50px;
    height: 24px;
    transform: translateY(-3px);
}

#guess_game .check_text{
    display: inline-block;
    margin: 0;
}
  
/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4eb84;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #5a4813;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #a6cdf4;
}

input:focus + .slider {
    box-shadow: 0 0 1px #a6cdf4;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.table{
    width: 90%;
    border-collapse: collapse;
    margin: 0 auto;
    border-collapse: collapse;
    font-size:20px;
    border:1px solid #5a4813;
    border-collapse:collapse;
    margin:0 auto;
    margin-bottom:75px;
    border-radius:5px;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 10px;
    border:1.5px solid #5a4813;
    border-bottom: 3px solid #5a4813;
    box-shadow:0 5px 10px rgba(0,0,0,0.1);
}

.table th:not(:last-child),
.table td:not(:last-child){
    border-right: 1px solid black;
}

.table th,
.table td{
    border-right: 1px solid black;
}

.table th{
    background-color: var(--primary-color);
    height:45px;
    text-align:center;
}

.table>thead>tr:not(:last-child)>th,
.table>thead>tr:not(:last-child)>td,
.table>tbody>tr:not(:last-child)>th,
.table>tbody>tr:not(:last-child)>td,
.table>tfoot>tr:not(:last-child)>th,
.table>tfoot>tr:not(:last-child)>td,
.table>tr:not(:last-child)>td,
.table>tr:not(:last-child)>th,
.table>thead:not(:last-child),
.table>tbody:not(:last-child),
.table>tfoot:not(:last-child) {
    border-bottom: 1px solid black;
}

.table th,.table td {
    text-align: left;
}

.table th {
    background-color: var(--primary-color);
}

.table td {
    background-color: #e7e0c4;
}

textarea {
    resize: none;
    border: none;
    background-color: transparent;
    font-family: 'Balsamiq Sans', cursive;
    width:100%;
    color:rgb(90, 72, 19);
    font-size: 16px;
}

td:nth-child(1) textarea,th:nth-child(1),td:nth-child(2) textarea,th:nth-child(2) {
    width: 60px;
}

td:nth-child(3) textarea,th:nth-child(3) {
    width: 100px;
}
        
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,table tr td:nth-child(2){
    border-left: 0;
}
table tr td:last-child{
    border-right: 0;
}

table tr td:last-child, table tr th:last-child{
    width: 70px;
}

table td:first-child{
    text-align: right;
}

#user_categories table{
    margin-bottom: 25px;
    width: 100vw;
    max-width: 500px;
}

#user_categories table td:last-child,#user_categories table th:last-child{
    max-width: 50px;
    text-align: center;
}

#user_categories table td:nth-child(1),#user_categories table th:nth-child(1){
    max-width: 75px;
    text-align: center;
}

#add_word{
    margin: 0 auto;
    display: block;
    background-color: #f4eb84;
}

#new_word{
    margin-bottom: 25px;
}

h2{
    cursor: auto;
}

#word_list td:last-child{
    text-align: center;
}

.remove_button{
    background-color: #f39f95 !important;
    margin-bottom: 0px;
}

.remove_button:active{
    background-color:#d8837a !important;
}

.add_button{
    background-color: #a9e3bb !important;
    margin-bottom: 0px;
}

.add_button:active{
    background-color:#8ac59d !important;
}

#show-dialog{
    margin:0 auto;
    display:block;
    margin-top: 25px;
}


@media only screen and (max-width: 700px) {
    #keyboard_button{
        display: none;
    }
    #logo_div{
        width: 285px;
        height: 50px;
        left: calc(50% - 285px / 2);
        top: 10px;
    }

    #navigation{
        width: 100%;
        border-radius: 0px;
        bottom: 0px;
    }

    #title{
        margin-top:-175px;
        margin-bottom:100px;
    }

    h1{
        font-size:30px;
    }

    #alphabet, #numbers{
        text-align: center;
    }

    #clothes_arrow_left,#clothes_arrow_right{
        margin-left: 25px;
        margin-right: 25px;
    }

    #flags_div a img{
        width:40px;
    }

    .kazakh,.french,.korean,.japanese{
        height:30px;
        width:30px;
    }

    .french{
        transform: translateY(-5px);
    }

    .french:nth-of-type(2){
        transform: translateY(-5px) scaleX(-1);
    }

    .russian{
        height:35px;
        width:35px;
        margin-top: 2px;
    }

    #search_filters{
        height:50px;
    }

    .filter,.filter_tags,.tag_filter{
        margin-left:1px;
        margin-right:1px;
        padding-left:2px;
        padding-right:2px;
        font-size:13px;   
    }

    .tag-filter p{
        font-size: 13px;
    }

    .tag-filter p::after{
        margin-left: -10px;
    }

    .tag-filter{
        padding-left:2px !important;
        padding-right:15px !important;
    }

    #guess_word{
        margin-bottom:25px;
    }

    .word{
        margin:0 auto;
        margin-bottom:10px;
    }

    #letters_div,#numbers_div{
        text-align:center;
    }

    #keyboard{
        width:90%;
        left: calc(50% - 90% / 2);
    }
}