:root,
:root.light {
    --bgc: #fff;
    --tc: #000;
    --nc: #fc0;
    --nc2: #fc0;
    --okc: #0c8;
    --wc: #8fc;
    --lc: #f88;
    --gc: #888;
    --gc2: #888;
    --acbg: #000;
    --actext: #fff;
    --shc: transparent;
}

:root.dark {
    --bgc: #000;
    --tc: #fff;
    --nc: #da0;
    --nc2: #da0;
    --okc: #0a6;
    --wc: #084;
    --lc: #800;
    --gc: #555;
    --gc2: #555;
    --acbg: #ccc;
    --actext: #000;
    --shc: transparent;
}

:root.light_alt {
    --bgc: #fff;
    --tc: #000;
    --nc: #c7a;
    --nc2: #c7a;
    --okc: #06d;
    --wc: #8cf;
    --lc: #f8c;
    --gc: #888;
    --gc2: #888;
    --acbg: #000;
    --actext: #fff;
    --shc: transparent;
}

:root.dark_alt {
    --bgc: #000;
    --tc: #fff;
    --nc: #a58;
    --nc2: #a58;
    --okc: #04b;
    --wc: #048;
    --lc: #804;
    --gc: #555;
    --gc2: #555;
    --acbg: #ccc;
    --actext: #000;
    --shc: transparent;
}

:root.light_alt2 {
    --bgc: #fff;
    --tc: #000;
    --nc: #aaa;
    --nc2: #fff;
    --okc: #aaa;
    --wc: #aaa;
    --lc: #888;
    --gc: #555;
    --gc2: #666;
    --acbg: #000;
    --actext: #fff;
    --shc: #fff;
}

:root.dark_alt2 {
    --bgc: #000;
    --tc: #fff;
    --nc: #aaa;
    --nc2: #000;
    --okc: #aaa;
    --wc: #666;
    --lc: #333;
    --gc: #666;
    --gc2: #aaa;
    --acbg: #ccc;
    --actext: #000;
    --shc: #000;
}

body {
    /*font-family: 'Outfit', sans-serif;*/
    font-family: 'Exo 2', sans-serif;
    background-color: var(--bgc);
    color: var(--tc);
}

.color_alt {
    background-image: linear-gradient(135deg, transparent, transparent 50%, var(--okc) 50%, var(--okc)), linear-gradient(0deg, var(--nc), var(--nc) 12.5%, var(--nc2) 12.5%, var(--nc2) 25%, var(--nc) 25%, var(--nc) 37.5%, var(--nc2) 37.5%, var(--nc2) 50%, var(--nc) 50%, var(--nc) 62.5%, var(--nc2) 62.5%, var(--nc2) 75%, var(--nc) 75%, var(--nc) 87.5%, var(--nc2) 87.5%, var(--nc2));
}

.button {
    width: var(--boxsize);
    height: var(--boxsize);
}

:root {
    --boxsize: 50px;
    --spacing: 0px;
    --collapse: ;
}

.box {
    border: 1px solid;
    text-shadow: -2px 0px 0 var(--shc), 2px 0px 0 var(--shc), 0px -2px 0 var(--shc), 0px 2px 0 var(--shc), -1.75px -1.75px 0 var(--shc), 1.75px -1.75px 0 var(--shc), -1.75px 1.75px 0 var(--shc), 1.75px 1.75px 0 var(--shc);
    padding: 0px;
    text-align: center;
    background-color: var(--bgc);
    overflow: hidden;
    border-spacing: var(--spacing);
    user-select: none;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard */
}

.bg_ok {
    background: var(--okc);
}

.bg_no {
    background-image: linear-gradient(135deg, var(--gc), var(--gc) 33%, var(--gc2) 33%, var(--gc2) 66%, var(--gc) 66%, var(--gc));
}

.bg_near {
    background-image: linear-gradient(0deg, var(--nc), var(--nc) 12.5%, var(--nc2) 12.5%, var(--nc2) 25%, var(--nc) 25%, var(--nc) 37.5%, var(--nc2) 37.5%, var(--nc2) 50%, var(--nc) 50%, var(--nc) 62.5%, var(--nc2) 62.5%, var(--nc2) 75%, var(--nc) 75%, var(--nc) 87.5%, var(--nc2) 87.5%, var(--nc2));
}

.bg_base_near {
    background-image: linear-gradient(to right, var(--bgc), var(--bgc) 50%, transparent 50%, transparent), linear-gradient(0deg, var(--nc), var(--nc) 12.5%, var(--nc2) 12.5%, var(--nc2) 25%, var(--nc) 25%, var(--nc) 37.5%, var(--nc2) 37.5%, var(--nc2) 50%, var(--nc) 50%, var(--nc) 62.5%, var(--nc2) 62.5%, var(--nc2) 75%, var(--nc) 75%, var(--nc) 87.5%, var(--nc2) 87.5%, var(--nc2));
}

.bg_near_base {
    background-image: linear-gradient(to right, transparent, transparent 50%, var(--bgc) 50%, var(--bgc)), linear-gradient(0deg, var(--nc), var(--nc) 12.5%, var(--nc2) 12.5%, var(--nc2) 25%, var(--nc) 25%, var(--nc) 37.5%, var(--nc2) 37.5%, var(--nc2) 50%, var(--nc) 50%, var(--nc) 62.5%, var(--nc2) 62.5%, var(--nc2) 75%, var(--nc) 75%, var(--nc) 87.5%, var(--nc2) 87.5%, var(--nc2));
}

.bg_ok_near {
    background-image: linear-gradient(to right, var(--okc), var(--okc) 50%, transparent 50%, transparent), linear-gradient(0deg, var(--nc), var(--nc) 12.5%, var(--nc2) 12.5%, var(--nc2) 25%, var(--nc) 25%, var(--nc) 37.5%, var(--nc2) 37.5%, var(--nc2) 50%, var(--nc) 50%, var(--nc) 62.5%, var(--nc2) 62.5%, var(--nc2) 75%, var(--nc) 75%, var(--nc) 87.5%, var(--nc2) 87.5%, var(--nc2));
}

.bg_near_ok {
    background-image: linear-gradient(to right, transparent, transparent 50%, var(--okc) 50%, var(--okc)), linear-gradient(0deg, var(--nc), var(--nc) 12.5%, var(--nc2) 12.5%, var(--nc2) 25%, var(--nc) 25%, var(--nc) 37.5%, var(--nc2) 37.5%, var(--nc2) 50%, var(--nc) 50%, var(--nc) 62.5%, var(--nc2) 62.5%, var(--nc2) 75%, var(--nc) 75%, var(--nc) 87.5%, var(--nc2) 87.5%, var(--nc2));
}

.bg_base_ok {
    background-image: linear-gradient(to right, var(--bgc), var(--bgc) 50%, var(--okc) 50%, var(--okc));
}

.bg_ok_base {
    background-image: linear-gradient(to right, var(--okc), var(--okc) 50%, var(--bgc) 50%, var(--bgc));
}

table {
    font-size: inherit;
}

.table_guesses {
    border-collapse: var(--collapse);
    border-spacing: var(--spacing);
}

.stl {
    width: 10%;
    text-align: right;
    padding-right: 2.5%;
}
#body{
    margin: 0 auto;
}
#game_title{
    text-transform: capitalize;
}
#stats tr td:first-child{
    text-align: center!important;
    text-transform: capitalize;
}
#stats td td{
    border: 1px solid #ddd;
    width: 50%;
    text-align: center;
}
#to_title,#back, #new_game,#chart,#opt, #keyboard .button, #options_color0, #options_color1, #options_color2{
    cursor: pointer;
}