@charset "utf-8";

@import url("https://fonts.googleapis.com/css?family=Comfortaa");
@import url("https://fonts.googleapis.com/css?family=Poiret+One");
@import url("https://fonts.googleapis.com/css?family=Philosopher");
@import url("https://fonts.googleapis.com/css?family=Istok+Web");
@import url("https://fonts.googleapis.com/css?family=Lobster");
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed");
@import url("https://fonts.googleapis.com/css?family=Play");
@import url("https://fonts.googleapis.com/css?family=PT+Mono");
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption");
@import url("https://fonts.googleapis.com/css?family=Bad+Script");
@import url("https://fonts.googleapis.com/css?family=Neucha");
@import url("https://fonts.googleapis.com/css?family=Marmelad");
@import url("https://fonts.googleapis.com/css?family=Podkova");
@import url("https://fonts.googleapis.com/css?family=Rubik");
@import url("https://fonts.googleapis.com/css?family=Rubik+Mono+One");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c");
@import url("https://fonts.googleapis.com/css2?family=Caveat");
@import url("https://fonts.googleapis.com/css2?family=Balsamiq+Sans");
@import url("https://fonts.googleapis.com/css2?family=Fira+Code");
@import url("https://fonts.googleapis.com/css2?family=Bellota");
@import url("https://fonts.googleapis.com/css?family=Roboto");

/* https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

html {
    font-size: 12px;
}

body, button {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-family: "Segoe UI", Tahoma, sans-serif;

	font-family: 'Comfortaa', cursive;
	font-family: 'Poiret One', cursive;
	font-family: 'Philosopher', sans-serif;
	font-family: 'Istok Web', sans-serif;
	font-family: 'Lobster', cursive;
	font-family: 'Ubuntu', sans-serif;
	font-family: 'Ubuntu Mono', monospace;
	font-family: 'Ubuntu Condensed', sans-serif;
	font-family: 'Play', sans-serif;
	font-family: 'PT Mono', monospace;
	font-family: 'PT Sans Caption', sans-serif;
	font-family: 'Bad Script', cursive;
	font-family: 'Neucha', cursive;
	font-family: 'Marmelad', sans-serif;
	font-family: 'Podkova', serif;
	font-family: 'Rubik', sans-serif;
	font-family: 'Rubik Mono One', sans-serif;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-family: 'Caveat', cursive;
	font-family: 'Balsamiq Sans', cursive;
	font-family: 'Fira Code', monospace;
	font-family: 'Bellota', cursive;
	font-family: 'Roboto', sans-serif;

}

body {
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    text-align: center;
    width: 300px;
    height: 575px;

    background: url(j-hammer_bg_850.jpg) rgb(255 237 210 / 70%);
    background-blend-mode: soft-light;

    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;

    border: 2px solid DarkSlateBlue;
    margin: 0px;

    font-size: 1.2rem;
}

h1 {
    color: DarkSlateBlue;
    line-height: 1.0rem;
}

h2 {
    color: DarkSlateBlue;
    line-height: 1.5rem;
    margin-top: -0.5rem;
    font-size: 1.3rem;
    font-family: 'Podkova', serif;
}

h3 {
    color: Gray;
    /*line-height: 2.5rem;*/
    /*line-height: 2rem;*/
    font-size: 1.2rem;
}

.ready > h3 {
    color: Crimson;
    font-size: 1.2rem;
}

i.fa {
    margin-right: 0.3rem;
    color: Gray;
    display: none;
    font-size: 1.5rem;
    vertical-align: middle;
}

.ready > h3 > i.fa {
    color: DarkSlateBlue;
    display: inline-block;
}

#help > i.fa {
    display: inline-block;
    color: DarkSlateBlue;
}

.fa-qrcode:before {
    margin-left: 1.5rem;
}

div#header {
    border: 2px solid DarkSlateBlue;
    border-radius: 1rem;
    margin: 1rem;
    padding: 0.5rem;
    background-color: rgb(255 255 255 / 25%);
}

p {
    /*font-size: 1.2rem;*/
    margin: 1rem;
    padding: 0.5rem;
    text-align: justify;
    color: DarkSlateBlue;
    font-weight: bold;
}

p#copy, p#help {
    text-align: center;
    margin: 1rem;
    padding: 0rem;
    font-weight: normal;
    /*color: White;*/
}

ul {
    margin-top: -0.8rem;
    list-style-type: none;
}

ul > li {
    text-align: justify;
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 1.8rem;
    margin-left: -1.4rem;
    line-height: 1.2rem;
    margin-bottom: 0.5rem;
    color: DarkSlateBlue;
    font-family: 'Podkova', serif;
}

ul > li::before {
    content: "•";
    color: black;
    display: inline-block;
    width: 0.5rem;
    margin-left: 0.0rem;
}

a {
    color: DarkSlateBlue;
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

a:hover {
    color: Aquamarine;
    color: Yellow;
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

a.tele-link:hover {
    color: Yellow;
}

a:active {
    color: Lime;
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

div#div_1 {
    /*height: 5rem;*/
    border: 2px solid Gray;
    border-radius: 5px;
    margin: 1rem;
    padding-bottom: 0.2rem;
    background-color: rgb(128 128 128 / 20%);
}

div#div_1.ready {
    border: 2px solid LimeGreen;
    background-color: rgb(154 205 50 / 55%);
}

button {
    width: calc(100% - 2rem);
    color: White;
    background: #0066CC;/*#01A9E1;*//*linear-gradient(#01A9E1, #5BC4BC);*/
    border-width: 2px;
    border-radius: 5px;
    padding: 1.5rem;
    /*margin: 1rem;*/
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    box-shadow: 0px 1px 1px 1px rgb(0 0 0 / 25%);
}

button:hover {
    background: Aquamarine;/*Yellow;*//*#5BC4BC;*//*linear-gradient(#5BC4BC, #01A9E1);*/
    color: DarkSlateBlue;
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

button:active {
    background: GreenYellow;
    color: DarkSlateBlue;
    transform: scaleY(0.95) translateY(1px);
    box-shadow: 0px -1px 1px 1px rgb(0 0 0 / 50%);
}

button:disabled {
    background-color: rgb(72 61 139 / 100%);
    background-color: LightSteelBlue;
    color: rgb(72 61 139 / 50%);
    color: SteelBlue;
    cursor: default;
    box-shadow: none;
    transform: none;
}

/******************** HINT ***********************/
/* GPT */
/* Родитель - позиционированный контейнер */
.hint-wrapper {
  position: relative;
}

em {
    color: #0066CC;
    text-decoration: underline;
    font-style: normal;
    cursor: help;
}

[data-hint] {
    position: relative;
    cursor: hint;
    /* GPT */
    /* Убираем смещение у триггера, чтобы псевдоэлемент искал ближайший relative-предка */
    position: static;
}

[data-hint].top-1::after {
    top: -0.5rem;
}

[data-hint].break::after {
    white-space: break-spaces; /* разрешает переносы по HTML-символам переноса 
 */
    transform: translate(-50%, calc(-100% + 20rem));
    text-align: left;
}

[data-hint]::after {
    z-index: 100;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    position: absolute; /* теперь привязано к родительскому .hint-wrapper */
    /*transform: translate(-50%, -100%);*/ /* сдвигается на свою ширину и высоту */
    transform: translate(-50%, calc(-100% - 0.5rem));
    left: 50%; /* посередине .hint-wrapper */
    /*top: -1.0rem;*/ /* над родительским .hint-wrapper */

    width: max-content;
    max-width: 230px;
    padding: 1.5rem;
    padding: 1.2rem 1.5rem 1.5rem 1.5rem;
    border-radius: 5px;
    content: attr(data-hint);
    /*content: url(https://html5book.ru/wp-content/uploads/2014/07/html_images.png);*/
    /*content: url(https://pylegram.space/qr/?id=001397317302&url=https://t.me/JHammerBot);*/

    color: #FFFFFF;
    background-color: rgba(0,0,0,.7);
    background-color: rgba(6, 55, 107, 0.85);
    background-color: rgba(72, 61, 139, 0.9); /* = DarkSlateBlue 0.85*/
    background-color: #0066CCF2; /* то же, что #06C #0066CC, только с альфа 0.95 */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);

    text-align: center;
    font-weight: bold;
    font-weight: 400;
    font-size: 2.0rem;
    font-style: normal;
    line-height: 2.5rem;
    text-indent: 0rem;

    font-family: 'Bad Script', cursive;
    font-family: 'Poiret One', cursive;
    font-family: 'Podkova', serif;
    font-family: 'Caveat', cursive;

    /*white-space: nowrap;*/ /* НЕ ПЕРЕНОСИТ ТЕКСТ!!! - убрать!!!*/
}

[data-hint]:hover::after {
    opacity: 1;
}