@import url(https://fonts.googleapis.com/css2?family=Baloo&display=swap);

@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');



@font-face {

    font-family: "digital_counter_7regular";

    src: url("../font/digital_counter_7-webfont.woff2") format("woff2"),

        url("../font/digital_counter_7-webfont.woff") format("woff");

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: "advent_proregular";

    src: url("../font/adventpro-regular-webfont.woff2") format("woff2"),

        url("../font/adventpro-regular-webfont.woff") format("woff");

    font-weight: normal;

    font-style: normal;

}



:root {

    --background: #110f10 url(../img/wood/wb.jpg);

    --background-footer: #110f10 url(../img/wood/w3.jpg);

    --stones-text-color: #121011;

    --stones-background: #a8855e url(../img/wood/w2.jpg);

    --button-text-color: #121011;

    --button-background: #a8855e url(../img/wood/w2.jpg);

    --input-background: #a8855e url(../img/wood/w2.jpg);

    --my-background-color: #b11433;

    --yes-color: rgb(13, 117, 13);

    --no-color: #b11433;

}



::selection {

    background: #2b2a21;

    color: #fff;

    text-shadow: none

}



::-moz-selection {

    background: #2b2a21;

    color: #fff;

    text-shadow: none

}



::-webkit-scrollbar {

    width: 5px;

    height: 5px

}



::-webkit-scrollbar-thumb {

    background: var(--my-background-color);

    -webkit-border-radius: 16px;

    -moz-border-radius: 16px;

    border-radius: 16px

}



::-webkit-scrollbar-track {

    background: rgba(0, 0, 0, .1)

}



* {

    outline: 0

}



body,

html {

    height: 100%;

    min-height: 100%

}



body {

    margin: 0;

    background: var(--background);

    font-family: 'Russo One', sans-serif

}



.logo {

    position: absolute;

    left: 10px;

    top: 10px

}



.responsive img {

    width: 400px;

}



img.responsive {

    max-width: 100%;

    height: auto;

}



/* BOX */

#headBox {

    box-sizing: border-box;

    /* border:1px solid red */

}



#centerBox {

    position: absolute;

    top: 54%;

    left: 0;

    right: 0;

    max-width: 95%;

    padding: 35px;

    margin: 0 auto;

    box-sizing: border-box;

    /* border: 1px solid yellow; */

}



#titleBox {

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    margin: -450px auto;

    /* border: 1px solid green; */

}



#inputBox {

    position: absolute;

    left: 0;

    right: 0;

    padding: 50px 45px 10px;

    margin: -198px auto;

    border: 14px solid #9e9e9e;

    background: var(--input-background);

    border-radius: 20px;

    box-shadow: 0 10px 40px inset #171516, 0 0 0 20px rgba(255, 255, 255, .9), 11px 11px 20px 12px rgba(0, 0, 0, .93);

    -webkit-box-shadow: 0 10px 40px inset #171516, 0 0 0 20px rgba(255, 255, 255, .9), 11px 11px 20px 12px rgba(0, 0, 0, .93);

    -moz-box-shadow: 0 10px 40px inset #171516, 0 0 0 20px rgba(255, 255, 255, .9), 11px 11px 20px 12px rgba(0, 0, 0, .93);

    box-sizing: border-box;

    z-index: 9;

}



.buttonBox {

    position: relative;

    padding: 8px 0;

    top: 22px;

    right: 8px;

    float: right;

    z-index: 99

}



#entryStones {

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    margin: 105px auto;

}



#outStonesBox {

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    padding: 5px;

    margin: 315px auto 150px;

    box-sizing: border-box;

}



.similar {

    color: #121011;

    text-shadow: 1px 1px 0px #9a7145;

    text-transform: uppercase;

    margin: 25px auto;

    text-align: center;

    max-width: 921px;

    position: relative;

}



.similar:before {

    content: "";

    display: block;

    width: 110px;

    height: 3px;

    background: #121011;

    left: -44px;

    top: 50%;

    position: absolute;

}



.similar:after {

    content: "";

    display: block;

    width: 110px;

    height: 3px;

    background: #121011;

    right: -40px;

    top: 50%;

    position: absolute;

}



.variations {

    position: relative;

    text-align: center;

    display: inline-table;

    margin-bottom: 110px;

}



footer {

    position: fixed;

    width: 100%;

    text-align: center;

    padding: 12px 0;

    bottom: 0;

    left: 0;

    background: var(--background-footer);

    font-family: monospace;

    font-size: 1.5em;

    color: var(--stones-text-color);

    font-weight: bolder;

    text-shadow: none;

    box-shadow: inset 0 0 2px 2px rgb(64, 64, 56, .69), 0 8px 30px 0px rgb(0, 0, 0, .97);

    -webkit-box-shadow: inset 0 0 2px 2px rgb(64, 64, 56, .69), 0 8px 30px 0px rgb(0, 0, 0, .97);

    z-index: 9;

}



footer a {

    color: var(--my-background-color);

    text-decoration: unset

}



.arrow {

    border: solid rgb(255, 255, 255);

    border-width: 0 3px 3px 0;

    display: inline-block;

    padding: 3px;

}



.right {

    transform: rotate(-45deg);

    -webkit-transform: rotate(-45deg);

}



.left {

    transform: rotate(135deg);

    -webkit-transform: rotate(135deg);

}



.up {

    transform: rotate(-135deg);

    -webkit-transform: rotate(-135deg);

}



.down {

    transform: rotate(45deg);

    -webkit-transform: rotate(45deg);

}



#toTop {

    position: fixed;

    right: 5px;

    bottom: 6px;

    border-radius: 100%;

    background: var(--my-background-color);

    padding: 0.25rem .58rem;

    border: none;

    cursor: pointer;

    opacity: 70%;

    transition: opacity 0.5s;

    display: none;

    z-index: 99;

}



#toTop:hover {

    opacity: 95%;

    transition: opacity 0.5s;

}



input[type=text] {

    width: 100%;

    font-size: 9em;

    height: 1em;

    position: relative;

    text-align: center;

    top: -27px

}



input[type=text]::placeholder {

    color: #332a20;

    text-transform: uppercase;

    position: relative;

    font-size: .7em;

    letter-spacing: initial

}



input:focus::placeholder {

    color: transparent;

}



input[type=text]::-webkit-input-placeholder {

    color: #332a20;

    text-transform: uppercase;

    font-size: .7em;

    letter-spacing: initial

}



input[type=text]:-ms-input-placeholder {

    color: #332a20;

    text-transform: uppercase;

    font-size: .7em;

    letter-spacing: initial

}





.hidden {

    display: none;

    visibility: hidden;

}



.visible {

    display: initial;

    visibility: visible;

}



.des h2,

h1 {

    font-size: 8em;

    position: relative;

    display: initial;

    text-align: center;

    text-transform: uppercase;

    color: rgba(38, 23, 16, 0.851);

    margin: 0;

    letter-spacing: 9px;

}



.des h2::before {

    content: attr(datas);

    color: transparent;

    position: absolute;

    -webkit-text-stroke: 1px #261710;

    z-index: -1;

    text-shadow: 1px 1px 1px rgb(155 114 70);

}



.des h2::after {

    position: absolute;

    z-index: 2;

    color: var(--my-background-color);

    content: attr(data);

    font-weight: bold;

    font-size: .39em;

    right: 0;

    top: -40px;

    letter-spacing: initial;

    text-align: center;

    line-height: 1em;

    font-family: monospace;

    border-radius: 5px;

    text-shadow: 1px 1px 3px rgb(0 0 0 / 59%);

}



.des h2 strong {

    background-color: rgba(0, 0, 0, .44);

    font-size: 0;

    text-indent: 0;

    width: 30px;

    height: 30px;

    border-radius: 100%;

    border: 1px solid rgba(0, 0, 0, .94);

    display: inline-block;

    text-shadow: none;

    position: absolute;

    left: 50%;

    bottom: -10px;

}



.des h2 strong::before {

    content: "";

    opacity: .569;

    display: block;

    border-radius: 50%;

    filter: brightness(85%);

    width: 30px;

    height: 30px;

    background: url(../img/wood/light_wood.jpg);

}



h3 {

    text-align: center;

    border-bottom: 2px solid;

    display: block

}



.des h2 img {

    top: -15px;

    position: absolute;

    left: 50%

}



.tb {

    display: table;

    width: 100%

}



.td {

    display: table-cell;

    vertical-align: middle

}



button,

input {

    color: #121011;

    padding: 0;

    margin: 0;

    border: 0;

    background-color: transparent;

    font-family: 'Russo One', sans-serif;

}





.false em,

.success em {

    font-style: normal;

    font-size: 80px;

    line-height: 80px;

    margin: 15px 2px;

    position: relative

}



.success em {

    color: #a09512;

    text-shadow: #383c0e -1px 1px 0, #fff -2px 2px 0, #000 -3px 3px 0, #bfbabc -4px 4px 0

}



.false em {

    color: #c62a2a;

    text-shadow: #f44336 -1px 1px 0, #fff -2px 2px 0, #000 -3px 3px 0, #bfbabc -4px 4px 0

}



.stones {

    font-size: 25px;

    color: #fff;

    width: 100%;

    text-align: center;

    margin: 0;

    text-shadow: 1px 1px 2px #000

}



.all_word {

    font-size: 25px

}



.stones span,

.stone,

.stones span,

.all_word span,

.err span {

    margin: 6px;

    display: inline-block;

    position: relative;

    padding: 12px 18px 22px 20px;

    width: 76px;

    font-size: 54px;

    box-shadow: 4px -4px #cdb08c, -3px 3px 1px 0px #302e2e, inset 4px -4px 5px 2px #332e2e;

    border-radius: 11px;

    text-transform: uppercase;

    color: var(--stones-text-color);

    background: var(--stones-background);

}



.stone::before,

.stones span:before,

.all_word span::before,

.err span:before {

    bottom: 4px;

    right: 7px;

    font-size: .5em;

    opacity: 1;

    color: var(--my-background-color);

    padding: 0;

    position: absolute;

    content: attr(data);

    text-shadow: none

}



.stones span.yes {

    box-shadow: 1px -1px #cdb08c, -1px 1px 1px 0px #302e2e, inset 1px -1px 2px 2px #332e2e, 0px 0px 3px 6px var(--yes-color);

}



.stones span.non {

    box-shadow: 1px -1px #cdb08c, -1px 1px 1px 0px #302e2e, inset 1px -1px 2px 2px #332e2e, 0px 0px 3px 6px var(--no-color);

}



.des,

.des_out,

.error,

.nothing,

.response,

.welcome {

    position: relative;

    text-align: center

}



.variations,

.welcome {

    width: 100%

}



.info {

    top: 142px;

    right: 0;

    font-size: 2em;

    width: 100%;

    color: rgba(18, 16, 17, 0.773);

    text-align: center;

    position: absolute;

    font-family: monospace;

    font-weight: bold;

    text-transform: uppercase;

    z-index: 9999;

}



.info .yes {

    color: var(--yes-color);

}



.info .no {

    color: var(--no-color);

}



#clock {

    font-family: "digital_counter_7regular";

    font-size: 2em;

    font-weight: bold;

    position: absolute;

    top: 6px;

    right: 16px;

    color: rgba(18, 16, 17, 0.773);

}



.list,

p.similar {

    font-size: 3em;

}



.list {

    position: relative;

    text-align: left;

    line-height: 1em;

    padding: 10px 79px 6px 25px;

    border-radius: 12px;

    display: inline-block;

    margin: 8px;

    color: var(--stones-text-color);

    background: var(--stones-background);

}



.list::after {

    cursor: help;

    bottom: 6px;

    right: 6px;

    font-size: .9em;

    line-height: .9em;

    border-radius: 8px;

    z-index: 9;

    padding: 3px 6px;

    -webkit-transition: .5s;

    transition: .5s;

    position: absolute;

    content: attr(datavalue);

    color: #fff8f3;

    background-color: var(--my-background-color);

    /* background: var(--background); */

    border: 2px solid #3f2b16;

}



.no::before,

.no::after {

    display: none;

}



.no {

    padding: 12px 18px !important;

}



.sel {

    color: var(--my-background-color) !important;

    font-style: normal;

    padding: 1px 1px;

    border: 1px dashed var(--stones-text-color);

    border-radius: 4px;

    margin: 0 2px;

}



.list.this {

    box-shadow: inset 0 0 10px 4px var(--yes-color)

}



.list.this .sel {

    border: none;

    color: var(--stones-text-color) !important;

}



strong.cz {

    background-image: url(../img/ban_cz_30.png)

}



strong.de {

    background-image: url(../img/ban_de_30.png)

}



strong.en {

    background-image: url(../img/ban_en_30.png)

}



strong.it {

    background-image: url(../img/ban_it_30.png)

}



strong.fr {

    background-image: url(../img/ban_fr_30.png)

}



strong.es {

    background-image: url(../img/ban_es_30.png)

}



.resultN,

.resultY {

    background: #a09512;

    text-align: center;

    position: relative;

    width: 80px;

    height: 80px;

    border-radius: 100%;

    display: inline-flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    font-size: 2em;

    text-shadow: 3px 3px 6px #000;

    color: #ececec;

    font-weight: 700;

    text-decoration: none;

    transition: .3s;

    box-shadow: inset 0 0 11px 10px rgb(0, 0, 0, .75);

    -webkit-box-shadow: inset 0 0 11px 10px rgb(0, 0, 0, .75);

    margin-left: 5px

}



.resultY {

    background-color: #05370c;

    background-image: linear-gradient(to right top, #05370c, #226117, #488d1d, #74bc1d, #a8eb12);

}



.resultN {

    background-color: #c62a2a;

    background-image: linear-gradient(to right top, #c62a2a, #b02424, #9a1f1f, #851919, #711414);

}



.lang_box {

    width: 100%;

    top: 10px;

    position: absolute;

    display: block;

    text-align: center

}



.lang_changer {

    position: relative;

    display: inline;

    text-align: center;

    margin: 0 auto 4px;

}



.lang_changer::before {

    font-size: 1em;

    content: attr(data);

    box-sizing: border-box;

    z-index: -1;

    color: var(--stones-text-color);

    border: 1px solid var(--stones-text-color);

    border-radius: 4px;

    padding: 3px 5px;

    position: absolute;

    white-space: pre;

    display: inline;

    top: 0;

    left: 50%;

    text-transform: uppercase;

    font-weight: bold;

    transform: translate(-50%, 70px);

}



.lang_changer a {

    text-align: center;

    width: 60px;

    height: 60px;

    border-radius: 100%;

    display: inline-flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    font-size: 36px;

    color: #0c0c0c;

    font-weight: 700;

    text-decoration: none;

    margin: 10px;

    transition: .3s;

    text-shadow: 1px 1px 2px #fff;

    box-shadow: 1px -2px 6px inset rgba(0, 0, 0, .77), 2px 0 2px rgba(43, 43, 43, .1), inset 1px -2px 2px #302e2e;

    -webkit-box-shadow: 1px -2px 6px inset rgba(0, 0, 0, .77), 2px 0 2px rgba(43, 43, 43, .1), inset 1px -2px 2px #302e2e

}



.lang_changer a.cs,

.lang_changer a.cs_s {

    background-image: url(../img/ban_cz_60.png)

}



.lang_changer a.de,

.lang_changer a.de_s {

    background-image: url(../img/ban_de_60.png)

}



.lang_changer a.en,

.lang_changer a.en_s {

    background-image: url(../img/ban_en_60.png)

}



.lang_changer a.it,

.lang_changer a.it_s {

    background-image: url(../img/ban_it_60.png)

}



.lang_changer a.fr,

.lang_changer a.fr_s {

    background-image: url(../img/ban_fr_60.png)

}



.lang_changer a.es,

.lang_changer a.es_s {

    background-image: url(../img/ban_es_60.png)

}



.lang_changer a.cs,

.lang_changer a.en,

.lang_changer a.de,

.lang_changer a.fr,

.lang_changer a.it,

.lang_changer a.es {

    filter: grayscale(.8);

}



.lang_changer a.cs_s,

.lang_changer a.en_s,

.lang_changer a.de_s,

.lang_changer a.fr_s,

.lang_changer a.it_s,

.lang_changer a.es_s {

    filter: grayscale(0);

}



.lang_changer a:hover {

    filter: grayscale(0.2);

}



.flipButton {

    display: inline-block;

    position: relative

}



.btn-flip,

.ib {

    min-width: 325px;

    opacity: 1;

    float: right;

    text-align: center;

    letter-spacing: 1px;

    text-decoration: none;

    text-transform: uppercase;

    border: 2px solid transparent;

    z-index: 99;

    font-size: 1.8em;

    line-height: 2em;

}



.btn-flip:hover:after,

.ib:hover:after {

    opacity: 1;

    -webkit-transform: translateY(0) rotateX(0);

    transform: translateY(0) rotateX(0)

}



.btn-flip:hover:before,

.ib:hover:before {

    opacity: 0;

    -webkit-transform: translateY(50%) rotateX(90deg);

    transform: translateY(50%) rotateX(90deg)

}



.btn-flip:after,

.ib:after {

    top: 0;

    left: 0;

    opacity: 0;

    width: 100%;

    display: block;

    padding: 6px 14px;

    box-sizing: border-box;

    -webkit-transition: .5s;

    transition: .5s;

    position: absolute;

    border-radius: 8px;

    color: var(--button-text-color);

    background: var(--button-background);

    -webkit-box-shadow: inset 2px 2px 3px 0 rgba(0, 0, 0, .43);

    box-shadow: inset 2px 2px 3px 0 rgba(0, 0, 0, .43);

    content: attr(data-back);

    -webkit-transform: translateY(-50%) rotateX(90deg);

    transform: translateY(-50%) rotateX(90deg)

}



.btn-flip:before,

.ib:before {

    top: 0;

    left: 0;

    opacity: 1;

    display: block;

    padding: 6px 14px;

    -webkit-transition: .5s;

    transition: .5s;

    position: relative;

    border-radius: 8px;

    box-sizing: border-box;

    color: var(--button-text-color);

    background: var(--button-background);

    text-shadow: 1px 1px #000;

    -webkit-box-shadow: inset 2px 2px 3px 0 rgb(0, 0, 0, .43);

    box-shadow: inset 2px 2px 3px 0 rgb(0, 0, 0, .43);

    content: attr(data-front);

    -webkit-transform: translateY(0) rotateX(0);

    transform: translateY(0) rotateX(0)

}



[data-tooltip]:before {

    content: attr(data-tooltip);

    font-family: monospace;

    font-size: 10px;

    position: absolute;

    opacity: 0;

    transition: all .15s ease;

    padding: 4px 6px;

    color: #fff;

    border-radius: 4px;

    box-shadow: 1px 1px 3px rgba(0, 0, 0, .43);

    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .43)

}



[data-tooltip]:hover:before {

    opacity: 1;

    z-index: 99;

    border: 1px solid #fff;

    background: var(--my-background-color);

    position: absolute;

    top: -20px;

    right: -5px;

    width: max-content;

}



[data-tooltip]:not([data-tooltip-persistent]):before {

    pointer-events: none

}



#info_box {

    visibility: hidden;

    opacity: 0;

    z-index: 9998;

    display: block;

    position: fixed;

    text-align: justify;

    padding: 70px 10px;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: scroll;

    box-sizing: border-box;

    text-shadow: 1px 1px 2px #000;

    color: beige;

    transition: all 1s;

    background-color: rgba(24, 24, 24, .985)

}



#info_box .descript h1 {

    text-align: center;

    display: block;

    font-size: 2em;

    color: aliceblue;

}



#info_box h2 {

    width: 100%;

    text-align: center;

    border-radius: 8px;

    padding: 5px;

    box-sizing: border-box;

    background-color: var(--my-background-color)

}



#info_box h2.no_bck {

    background-color: transparent

}



#info_box em {

    padding: 2px 10px;

    border-radius: 10px;

    background-color: var(--my-background-color);

    white-space: nowrap

}



#info_box h3 {

    margin-top: 30px;

    text-transform: uppercase;

    text-align: center;

    border-bottom: 2px solid;

    display: block

}



#info_box .descript {

    overflow-y: scroll;

    margin: 10px auto;

    width: 1500px;

    font-size: 2em;

    overflow-y: scroll;

    padding: 10px

}







.close {

    position: fixed;

    right: 32px;

    top: 32px;

    width: 32px;

    height: 32px;

    opacity: .8

}



.close:hover {

    opacity: 1;

    cursor: pointer

}



.close:after,

.close:before {

    position: absolute;

    left: 15px;

    content: ' ';

    height: 33px;

    width: 5px;

    background-color: #fff

}



.close:before {

    transform: rotate(45deg)

}



.close:after {

    transform: rotate(-45deg)

}



#loading {

    position: fixed;

    visibility: hidden;

    z-index: 9999;

    height: 2em;

    width: 2em;

    overflow: show;

    margin: auto;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0

}



#loading:before {

    content: '';

    display: block;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));

    background: -webkit-radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8))

}



#loading:not(:required) {

    font: 0/0 a;

    color: transparent;

    text-shadow: none;

    background-color: transparent;

    border: 0

}



#loading:not(:required):after {

    content: '';

    display: block;

    font-size: 30px;

    width: 1em;

    height: 1em;

    margin-top: -.5em;

    -webkit-animation: spinner 150ms infinite linear;

    -moz-animation: spinner 150ms infinite linear;

    -ms-animation: spinner 150ms infinite linear;

    -o-animation: spinner 150ms infinite linear;

    animation: spinner 150ms infinite linear;

    border-radius: .5em;

    -webkit-box-shadow: rgba(255, 255, 255, .75) 1.5em 0 0 0, rgba(255, 255, 255, .75) 1.1em 1.1em 0 0, rgba(255, 255, 255, .75) 0 1.5em 0 0, rgba(255, 255, 255, .75) -1.1em 1.1em 0 0, rgba(255, 255, 255, .75) -1.5em 0 0 0, rgba(255, 255, 255, .75) -1.1em -1.1em 0 0, rgba(255, 255, 255, .75) 0 -1.5em 0 0, rgba(255, 255, 255, .75) 1.1em -1.1em 0 0;

    box-shadow: rgba(255, 255, 255, .75) 1.5em 0 0 0, rgba(255, 255, 255, .75) 1.1em 1.1em 0 0, rgba(255, 255, 255, .75) 0 1.5em 0 0, rgba(255, 255, 255, .75) -1.1em 1.1em 0 0, rgba(255, 255, 255, .75) -1.5em 0 0 0, rgba(255, 255, 255, .75) -1.1em -1.1em 0 0, rgba(255, 255, 255, .75) 0 -1.5em 0 0, rgba(255, 255, 255, .75) 1.1em -1.1em 0 0

}





@-webkit-keyframes spinner {

    0% {

        -webkit-transform: rotate(0);

        -moz-transform: rotate(0);

        -ms-transform: rotate(0);

        -o-transform: rotate(0);

        transform: rotate(0)

    }



    100% {

        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@-moz-keyframes spinner {

    0% {

        -webkit-transform: rotate(0);

        -moz-transform: rotate(0);

        -ms-transform: rotate(0);

        -o-transform: rotate(0);

        transform: rotate(0)

    }



    100% {

        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@-o-keyframes spinner {

    0% {

        -webkit-transform: rotate(0);

        -moz-transform: rotate(0);

        -ms-transform: rotate(0);

        -o-transform: rotate(0);

        transform: rotate(0)

    }



    100% {

        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@keyframes spinner {

    0% {

        -webkit-transform: rotate(0);

        -moz-transform: rotate(0);

        -ms-transform: rotate(0);

        -o-transform: rotate(0);

        transform: rotate(0)

    }



    100% {

        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



#loadings {

    position: fixed;

    visibility: hidden;

    z-index: 9999;

    height: 3em;

    width: 11em;

    overflow: show;

    margin: auto;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0

}



#loadings:before {

    content: '';

    display: block;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));

    background: -webkit-radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8))

}



#tim {

    color: white;

    font-size: 3em;

    position: absolute;

    z-index: 9;

    top: 84%;

    left: 24%;

}



#tim::before {

    position: absolute;

    content: "s";

    font-size: .6em;

    bottom: -.7em;

    left: 1em;

}



.lds-roller {

    display: inline-block;

    position: relative;

    width: 180px;

    height: 180px;

}



.lds-roller div {

    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

    transform-origin: 80px 80px;

}



.lds-roller div:after {

    content: " ";

    display: block;

    position: absolute;

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #fff;

    margin: -8px 0 0 -8px;

}



.lds-roller div:nth-child(1) {

    animation-delay: -0.036s;

}



.lds-roller div:nth-child(1):after {

    top: 126px;

    left: 126px;

}



.lds-roller div:nth-child(2) {

    animation-delay: -0.072s;

}



.lds-roller div:nth-child(2):after {

    top: 136px;

    left: 112px;

}



.lds-roller div:nth-child(3) {

    animation-delay: -0.108s;

}



.lds-roller div:nth-child(3):after {

    top: 142px;

    left: 96px;

}



.lds-roller div:nth-child(4) {

    animation-delay: -0.144s;

}



.lds-roller div:nth-child(4):after {

    top: 144px;

    left: 80px;

}



.lds-roller div:nth-child(5) {

    animation-delay: -0.18s;

}



.lds-roller div:nth-child(5):after {

    top: 142px;

    left: 64px;

}



.lds-roller div:nth-child(6) {

    animation-delay: -0.216s;

}



.lds-roller div:nth-child(6):after {

    top: 136px;

    left: 48px;

}



.lds-roller div:nth-child(7) {

    animation-delay: -0.252s;

}



.lds-roller div:nth-child(7):after {

    top: 126px;

    left: 34px;

}



.lds-roller div:nth-child(8) {

    animation-delay: -0.288s;

}



.lds-roller div:nth-child(8):after {

    top: 112px;

    left: 24px;

}



@keyframes lds-roller {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}





.nomobile {

    display: inline-block

}



@keyframes blink {

    0% {

        opacity: .95;

        border: 2px solid transparent

    }



    10% {

        opacity: .95;

        border: 2px solid #8a0634

    }



    50% {

        opacity: .95;

        border: 2px solid #e00f19

    }



    90% {

        opacity: .95;

        border: 2px solid #2c0101

    }

}



@-webkit-keyframes blink {

    0% {

        opacity: .95;

        border: 2px solid transparent

    }



    10% {

        opacity: .95;

        border: 2px solid #8a0634

    }



    50% {

        opacity: .95;

        border: 2px solid #e00f19

    }



    90% {

        opacity: .95;

        border: 2px solid #2c0101

    }

}



.blink {

    animation: blink 2s infinite;

    -webkit-animation: blink 2s infinite

}



@media only screen and (max-width :2000px) {

    #titleBox {

        margin: -400px auto;

    }



    input[type=text],

    .des h2 {

        font-size: 6.2em;

    }



    input[type=text] {

        top: -20px

    }



    #entryStones {

        margin: 85px auto;

    }



    #outStonesBox {

        margin: 280px auto;

    }



    .buttonBox {

        top: 17px

    }



    .responsive img {

        width: 320px

    }



    form {

        height: 80px

    }



    #centerBox {

        top: 58%;

    }



    #inputBox {

        width: 95%;

        min-width: 1100px

    }



    .similar {

        text-shadow: 1px 1px 0px #9a7145;

        margin: 25px auto;

        max-width: 800px;

    }



    .variations {

        margin: 60px auto 110px;

    }



    .list,

    p.similar {

        font-size: 2.5em;

    }



    .list {

        padding: 9px 62px 6px 14px;

        border-radius: 5px;

    }



    .list::after {

        right: 4px;

        bottom: 6px;

        font-size: .9em;

        line-height: .9em;

        border-radius: 6px;

        padding: 3px 6px;

    }



    .no {

        padding: 12px 18px !important;

    }



    .info {

        top: 130px;

        font-size: 1.5em

    }



    button,

    input[type=submit] {

        background: url(../img/s_120.png);

        width: 120px;

        height: 120px;

        position: relative;

        top: -18px;

    }



    button:hover,

    input[type=submit]:hover {

        background: url(../img/sh_120.png);

        width: 120px;

        height: 120px;

    }



    #clock {

        font-size: 1.9em;

        left: 20px;

        top: 13px;

    }



    input[type=text]::placeholder {

        font-size: .85em

    }



    input[type=text]::-webkit-input-placeholder {

        font-size: .85em

    }



    input[type=text]:-ms-input-placeholder {

        font-size: .85em

    }



    .lang_changer {

        padding: 24px 5px

    }



    .lang_changer a {

        font-size: 30px;

        position: relative;

        top: 5px;

        margin: 5px 4px

    }



    .lang_changer::before {

        font-size: .8em;

    }



    .all_word span,

    .err span,

    .stones span,

    .stone,

    .stones span {

        width: 60px;

        height: 50px;

        font-size: 40px

    }



    .btn-flip,

    .ib {

        font-size: 1.2em;

        min-width: 270px;

    }



    footer {

        font-size: 1.3em

    }



    #info_box .descript {

        font-size: 1.8em;

        max-width: 1220px

    }

}



@media only screen and (max-width :1600px) {

    #titleBox {

        margin: -244px auto;

    }





    input[type=text],

    .des h2 {

        font-size: 4.5em;

    }



    #entryStones {

        margin: 105px auto;

    }



    #outStonesBox {

        margin: 168px auto;

    }



    .buttonBox {

        top: 8px

    }



    .responsive img {

        width: 320px

    }



    #centerBox {

        top: 50%;

    }



    #inputBox {

        max-width: 80%;

        width: 1100px

    }



    input[type=text] {

        top: -5px;

    }



    .similar {

        text-shadow: none;

        margin: 25px auto;

        max-width: 615px;

    }



    .variations {

        margin: 60px auto 110px;

    }



    .list,

    p.similar {

        font-size: 1.8em;

    }



    .list {

        padding: 9px 51px 4px 10px;

        border-radius: 5px;

    }



    .list::after {

        right: 3px;

        bottom: 4px;

        font-size: .9em;

        line-height: .9em;

        border-radius: 6px;

        padding: 3px 6px;

    }



    .info {

        top: 92px;

        font-size: 1.3em;

    }



    .buttonBox {

        top: 12px

    }



    .responsive img {

        width: 240px

    }



    #inputBox {

        width: 1000px;

        padding: 30px;

        margin: -84px auto 0 auto;

        border: 6px solid #9e9e9e;

        border-radius: 20px;

        box-shadow: 0 10px 40px inset #171516, 0 0 0 14px rgba(255, 255, 255, .9), 11px 11px 20px 12px rgba(0, 0, 0, .93);

        -webkit-box-shadow: 0 10px 40px inset #171516, 0 0 0 14px rgba(255, 255, 255, .9), 11px 11px 20px 12px rgba(0, 0, 0, .93);

        -moz-box-shadow: 0 10px 40px inset #171516, 0 0 0 14px rgba(255, 255, 255, .9), 11px 11px 20px 12px rgba(0, 0, 0, .93);

    }



    #clock {

        font-size: 1.55em;

        left: 20px;

        top: 13px;

    }



    button {

        background: url(../img/s_60.png);

        width: 60px;

        height: 60px;

        top: 4px

    }



    button:hover {

        background: url(../img/sh_60.png);

        width: 60px;

        height: 60px

    }



    .all_word span,

    .err span,

    .stones span,

    .stone,

    .stones span {

        width: 33px;

        height: 32px;

        font-size: 30px;

        border-radius: 6px;

        box-shadow: 1px -1px #cdb08c, -1px 1px 1px 0px #302e2e, inset 1px -1px 2px 2px #332e2e;

        padding: 10px 16px 17px 19px;

    }



    .des h2 strong {

        width: 30px;

        height: 30px;

        bottom: -22px;

    }



    .btn-flip,

    .ib {

        font-size: 1em;

        min-width: 200px;

        line-height: 1.5em;

    }



    .lang_changer {

        padding: 7px 2px

    }



    .lang_changer::before {

        font-size: 1em;

        top: -20px;

    }



    .lang_changer a {

        width: 30px;

        height: 30px;

        font-size: 17px;

        position: relative;

        top: 2px;

        margin: 5px 4px;

        text-shadow: 1px 1px 2px #fff;

        box-shadow: 1px -2px 6px inset rgba(0, 0, 0, .77), 2px 0 2px rgba(43, 43, 43, .1), inset 1px -2px 2px #302e2e;

        -webkit-box-shadow: 1px -2px 6px inset rgba(0, 0, 0, .77), 2px 0 2px rgba(43, 43, 43, .1), inset 1px -2px 2px #302e2e

    }



    .lang_changer a.cs::before,

    .lang_changer a.de::before,

    .lang_changer a.en::before,

    .lang_changer a.it::before,

    .lang_changer a.fr::before,

    .lang_changer a.es::before {

        width: 30px;

        height: 30px;

    }



    .lang_changer a.cs::after,

    .lang_changer a.de::after,

    .lang_changer a.en::after,

    .lang_changer a.it::after,

    .lang_changer a.fr::after,

    .lang_changer a.es::after {

        font-size: 17px;

        top: 4px;

    }



    .lang_changer a.cs,

    .lang_changer a.cs_s {

        background-image: url(../img/ban_cz_30.png)

    }



    .lang_changer a.de,

    .lang_changer a.de_s {

        background-image: url(../img/ban_de_30.png)

    }



    .lang_changer a.en,

    .lang_changer a.en_s {

        background-image: url(../img/ban_en_30.png)

    }



    .lang_changer a.it,

    .lang_changer a.it_s {

        background-image: url(../img/ban_it_30.png)

    }



    .lang_changer a.fr,

    .lang_changer a.fr_s {

        background-image: url(../img/ban_fr_30.png)

    }



    .lang_changer a.es,

    .lang_changer a.es_s {

        background-image: url(../img/ban_es_30.png)

    }



    footer {

        font-size: 1.1em

    }



    #info_box .descript {

        font-size: 1.6em;

        max-width: 1020px

    }

}



@media only screen and (max-width :1200px) {

    .buttonBox {

        top: 0;

        display: inline-grid;

    }



    #headBox {

        position: relative;

        display: flow-root;

    }



    #centerBox {

        position: relative;

        top: 0;

        margin: 40px auto 0;

        padding: 15px;

    }



    #titleBox {

        top: 0;

        margin: 10px auto 70px;

        position: relative;

    }



    .des h2,

    input[type=text] {

        font-size: 2.5em;

    }



    .des h2::after {

        top: -11px;

        right: 0;

    }



    .des h2 strong,

    .des h2 strong::before {

        display: none;

    }



    #inputBox {

        position: relative;

        min-width: 735px;

        top: 30px;

        padding: 15px;

        border-radius: 10px;

        border: 4px solid #9e9e9e;

        box-shadow: 0 10px 40px inset #171516, 0 0 0 8px rgb(255, 255, 255, .9), 11px 11px 10px 12px rgb(0, 0, 0, .63);

        -webkit-box-shadow: 0 10px 40px inset #171516, 0 0 0 8px rgb(255, 255, 255, .9), 11px 11px 10px 12px rgb(0, 0, 0, .63);

        -moz-box-shadow: 0 10px 40px inset #171516, 0 0 0 8px rgb(255, 255, 255, .9), 11px 11px 10px 12px rgb(0, 0, 0, .63);

    }



    input[type=text] {

        line-height: 1em;

        top: 0

    }  

      .similar {

        text-shadow: none;

        margin: 25px auto;

        max-width: none;

    }



    .similar::before,.similar::after{

        visibility: hidden;

        display: none;

    }



    #clock {

        font-size: 1.15em;

        left: 10px;

        top: 10px;

    }



    .info {

        top: 66px;

        font-size: .9em;

    }



    button {

        background: url(../img/s_60.png);

        width: 60px;

        height: 60px;

        top: 2px

    }



    #entryStones {

        position: relative;

        margin: 62px auto 5px;

    }



    #outStonesBox {

        position: relative;

        margin: 0 auto;

        top: 0;

        padding: 0;

    }



    .variations {

        top: 0;

        margin: 0 auto 35px;

        padding: 0;

    }



    .all_word span,

    .err span,

    .stones span,

    .stone,

    .stones span {

        width: 18px;

        height: 20px;

        font-size: 20px;

        border-radius: 4px;

        margin: 3px;

    }



    .list,

    p.similar {

        font-size: 1.1em;

    }



    .list {

        padding: 7px 36px 4px 5px;

        border-radius: 4px;

        margin: 4px;

    }



    .list::after {

        right: 2px;

        bottom: 2px;

        font-size: .9em;

        line-height: .9em;

        border-radius: 4px;

        padding: 3px 6px;

    }



    .no {

        padding: 10px 12px !important;

    }



    .des_out {

        top: 0

    }



    .vocabulary .error {

        top: -60px

    }



    .responsive img {

        width: 200px

    }



    .des {

        top: -188px

    }



    form {

        height: 50px

    }



    #cover_out {

        width: 650px

    }



    .nothing {

        top: -10px

    }





    .error {

        top: -70px

    }



    button:hover {

        background: url(../img/sh_60.png)

    }



    .false em,

    .success em {

        font-size: 55px;

        line-height: 55px

    }



    span.small {

        font-size: 1.7em;

        bottom: -11px

    }



    .btn-flip,

    .ib {

        width: 121px;

        font-size: .7em

    }



    .lang_changer {

        padding: 7px 2px

    }



    .lang_changer::before {

        font-size: .9em;

        top: -22px;

    }



    .lang_changer a {

        width: 30px;

        height: 30px;

        font-size: 15px;

        position: relative;

        top: 1px;

        margin: 2px

    }



    footer {

        font-size: .85em

    }



    #info_box .descript {

        font-size: 1.2em;

        max-width: 654px;

    }

}



@media only screen and (max-width:800px) {

    .sr {

        display: none;

    }



    .logo img {

        width: 120px;

        height: auto

    }



    .btn-flip::before,

    .ib::before,

    .btn-flip:hover:after,

    .ib::after {

        background: none;

        color: white;

        box-shadow: none;

        text-align: right;

        font-size: 1.3em;

        width: 200px;

        line-height: 1em;

        margin: 0;

        padding: 3px 0;

    }



    .lang_changer {

        border: none;

        padding: 0;

        background: none;

        box-shadow: none;

    }



    .lang_changer::before {

        font-size: .75em;

        top: -35px;

    }



    .lang_changer a,

    .lang_changer a.cs::after,

    .lang_changer a.de::after,

    .lang_changer a.en::after,

    .lang_changer a.it::after,

    .lang_changer a.fr::after,

    .lang_changer a.es::after {

        font-size: 13px;

    }



    .lang_changer a.cs::after,

    .lang_changer a.de::after,

    .lang_changer a.en::after,

    .lang_changer a.it::after,

    .lang_changer a.fr::after,

    .lang_changer a.es::after {

        top: 6px;

    }



    .lang_box {

        top: 10px;

    }



    #titleBox {

        margin: 10px auto 26px;

    }



    .des h2,

    input[type=text] {

        font-size: 1.8em;

    }



    .des h2::after {

        top: -8px;

        right: 0;

    }



    #centerBox {

        position: relative;

        top: 0;

        margin: 40px auto 0;

        padding: 0px;

    }



    input[type=text] {

        top: -4px;

    }



    #inputBox {

        position: relative;

        min-width: 530px;

        top: 0;

        padding: 16px;

        margin: 0 auto;

        border-radius: 6px;

        box-shadow: -1px -2px 15px inset #171516, 0 0 0 5px rgb(255, 255, 255, .9), 4px 6px 4px 3px rgb(0, 0, 0, .93);

        -webkit-box-shadow: -1px -2px 15px inset #171516, 0 0 0 5px rgb(255, 255, 255, .9), 4px 6px 4px 3px rgb(0, 0, 0, .93);

        -moz-box-shadow: -1px -2px 15px inset #171516, 0 0 0 5px rgb(255, 255, 255, .9), 4px 6px 4px 3px rgb(0, 0, 0, .93);

    }



    #clock {

        font-size: .915em;

        left: 3px;

        top: 3px;

    }



    .info {

        top: 4px;

        font-size: .68em;

    }



    #entryStones {

        margin: 24px auto 0;

    }



    .all_word span,

    .err span,

    .stones span,

    .stone,

    .stones span {

        width: 18px;

        height: 24px;

        font-size: 20px;

        border-radius: 4px;

        margin: 3px;

        padding: 6px 18px 11px 15px;

        box-shadow: none;

    }



    .nothing {

        top: -10px

    }



    .error {

        top: -120px

    }



    #outStonesBox {

        margin: 5px auto;

    }



    .list,

    p.similar {

        font-size: 1em;

    }



    .list {

        margin: 4px;

        padding: 4px 36px 3px 8px;

        text-shadow: none;

        border-radius: 3px;

    }



    .list::after {

        font-size: .8em;

        bottom: 2px;

        padding: 3px 4px;

        border: none;

    }



    .no {

        padding: 6px 4px !important;

    }



    #tim {

        font-size: 2em;

        top: 130%;

        left: 29%;

    }



    button {

        background: url(../img/s_60.png);

        width: 60px;

        height: 60px;

        top: -11px

    }





    #info {

        top: -15px;

        position: relative;

        font-size: 16px;

    }



    button {

        background: url(../img/s_30.png);

        width: 30px;

        height: 30px;

        top: -5px

    }



    button:hover {

        background: url(../img/sh_30.png);

        width: 30px;

        height: 30px

    }



    .false .box,

    .success .box {

        top: -10px

    }



    .false em,

    .success em {

        font-size: 32px;

        line-height: 35px;

        top: -2px

    }



    span.small {

        font-size: 1em;

        bottom: -9px

    }



    .resultN,

    .resultY {

        width: 40px;

        height: 40px;

        font-size: 1em;

        margin-left: 5px

    }



    .des h2 strong {

        width: 30px;

        height: 30px;

        top: 15px;

    }



    strong.cz {

        background-image: url(../img/ban_cz_30.png)

    }



    strong.de {

        background-image: url(../img/ban_de_30.png)

    }



    strong.en {

        background-image: url(../img/ban_en_30.png)

    }



    strong.it {

        background-image: url(../img/ban_it_30.png)

    }



    strong.fr {

        background-image: url(../img/ban_fr_30.png)

    }



    strong.es {

        background-image: url(../img/ban_es_30.png)

    }



    footer {

        font-size: .8em;

        padding: 3px

    }



    #info_box .descript {

        font-size: 1em;

        max-width: 538px;

        box-sizing: border-box

    }



    .nomobile {

        display: none

    }

}



@media only screen and (max-width:554px) {

    .lang_changer::before {

        display: none

    }

}



@media only screen and (max-width:600px) {



    #titleBox {

        position: relative;

        top: 20px;

        padding: 0 5px;

        margin: 0 auto

    }



    .des h2,

    input[type=text] {

        font-size: 1.6em;

    }



    .des h2::before {

        display: none;

    }



    .des h2::after {

        top: -8px;

        right: 0;

    }



    .logo {

        position: absolute;

        left: 10px;

        top: 53px;

    }



    .buttonBox {

        top: 44px;

    }



    #inputBox {

        padding: 16px;

        margin: 40px auto 25px;

        border-radius: 8px;

        border: 3px solid #9e9e9e;

        min-width: 330px;

        max-width: 95%;

        box-shadow: -1px -2px 15px inset #171516, 0 0 0 5px rgb(255, 255, 255, .9), 4px 6px 6px 1px rgb(0, 0, 0, .65);

        -webkit-box-shadow: -1px -2px 15px inset #171516, 0 0 0 5px rgb(255, 255, 255, .9), 4px 6px 6px 1px rgb(0, 0, 0, .65);

        -webkit-box-shadow: -1px -2px 15px inset #171516, 0 0 0 5px rgb(255, 255, 255, .9), 4px 6px 6px 1px rgb(0, 0, 0, .65);

    }



    #clock {

        font-size: .6815em;

        left: 5px;

        top: 4px;

    }



    .info {

        top: 7px;

        font-size: .58em;

    }



    .all_word span,

    .err span,

    .stones span,

    .stone,

    .stones span {

        width: 7px;

        height: 12px;

        font-size: 16px;

        border-radius: 4px;

        margin: 2px;

        padding: 2px 18px 13px 7px;

        box-shadow: none;

    }



    .stone::before,

    .stones span:before,

    .all_word span::before,

    .err span:before {

        bottom: 1px;

        right: 2px;

    }



    strong.cz {

        background-image: url(../img/ban_cz_30.png)

    }



    strong.de {

        background-image: url(../img/ban_de_30.png)

    }



    strong.en {

        background-image: url(../img/ban_en_30.png)

    }



    strong.it {

        background-image: url(../img/ban_it_30.png)

    }



    strong.fr {

        background-image: url(../img/ban_fr_30.png)

    }



    strong.es {

        background-image: url(../img/ban_es_30.png)

    }



    button {

        background: url(../img/s_30.png);

        width: 30px;

        height: 30px;

        top: 2px

    }



    button:hover {

        background: url(../img/sh_30.png);

        width: 30px;

        height: 30px

    }



    .false em,

    .success em {

        font-size: 38px;

        line-height: 40px;

        text-shadow: none;

    }



    span.small {

        font-size: 1.1em;

        bottom: -17px

    }



    .resultN,

    .resultY {

        width: 40px;

        height: 40px;

        font-size: 1.2em

    }



    .variations {

        margin: 0 auto 65px;

    }



    #info_box .descript {

        overflow-y: scroll;

        margin: 10px auto;

        max-width: 100%;

        padding: 5px;

        box-sizing: border-box

    }



    .nomobile {

        display: none

    }

}



@media only screen and (max-width:375px) {

    .responsive {

        width: 100%;

        display: block;

        position: relative;

        box-sizing: border-box;

        padding: 0;

        left: 0;

        right: 0;

        margin: 0 auto;

        text-align: center

    }



    .responsive img {

        width: 180px

    }



    #titleBox {

        position: relative;

        top: 20px;

        padding: 0 5px;

        margin: 0 auto

    }





    .des h2,

    input[type=text] {

        font-size: 1.3em;

    }



    input[type=text] {

        line-height: 1.3em;

        padding: 8px 0;

    }



    .des h2::after {

        top: -8px;

        right: 0;

    }



    .logo {

        position: relative;

        left: 0;

        top: 0;

        margin: 65px auto 0;

    }



    .buttonBox {

        margin: 60px auto 0;

        top: 0;

        display: block;

        position: relative;

        ;

    }



    .flipButton {

        display: inline-block;

        position: relative;

        width: 100%;

        margin: 5px 0;

    }



    .btn-flip,

    .ib {

        width: 90%;

        font-size: .7em;

        border: 2px solid white;

        border-radius: 30px;

        padding: 5px;

        margin: 0 3px;

    }



    .btn-flip::before,

    .ib::before,

    .btn-flip:hover:after,

    .ib::after {

        background: none;

        color: white;

        box-shadow: none;

        text-align: center;

        width: 100%;

    }



    #centerBox {

        position: relative;

        top: 0;

        margin: 0px auto 0;

        padding: 0px;

    }



    #inputBox {

        padding: 12px;

        margin: 40px auto 25px;

        border-radius: 3px;

        border: 2px solid var(--stones-text-color);

        min-width: 300px;

        max-width: 95%;

        box-shadow: -1px -1px 2px inset rgba(23, 21, 22, 0.71), 0 0 0 3px rgb(255, 255, 255, .9), 4px 2px 2px 1px rgb(0, 0, 0, .5);

        -webkit-box-shadow: -1px -1px 2px inset rgba(23, 21, 22, 0.71), 0 0 0 3px rgb(255, 255, 255, .9), 4px 2px 2px 1px rgb(0, 0, 0, .5);

        -webkit-box-shadow: -1px -1px 2px inset rgba(23, 21, 22, 0.71), 0 0 0 3px rgb(255, 255, 255, .9), 4px 2px 2px 1px rgb(0, 0, 0, .5);

    }



    #clock {

        font-size: .6815em;

        left: 5px;

        top: 4px;

    }



    .info {

        top: 3px;

        font-size: .58em;

    }



    .all_word span,

    .err span,

    .stones span,

    .stone,

    .stones span {

        width: 7px;

        height: 12px;

        font-size: 16px;

        border-radius: 4px;

        margin: 2px;

        padding: 2px 18px 13px 7px;

        box-shadow: none;

    }



    #info_box .descript {

        overflow-y: scroll;

        margin: 10px auto;

        max-width: 100%;

        padding: 5px;

        box-sizing: border-box

    }



    .variations {

        margin: 0 auto 65px;

    }



    footer {

        font-size: 1em;

        padding: 10px 3px;

        z-index: 999

    }



    .nomobile {

        display: none

    }

}





@media only screen and (max-width:320px) {

    #inputBox {

        max-width: 80%;

        min-width: 222px;

    }



    .tb {

        min-width: 195px;

    }

}





.sr {

    position: absolute;

    background: #b90606;

    color: aliceblue;

    width: fit-content;

    right: 0;

    bottom: -10px;

    padding: 2px 4px;

    border-radius: 4px;

    font-size: .6em;

    transform: rotate(-5deg);

    opacity: 1;

    transition: all 0.3s ease

}



.btn-flip:hover .sr {

    opacity: 0;

    transition: all 0.3s ease

}