﻿.mensagem {
    font-family: 'Marcellus SC';
    color: #b4b2b0;
}

.fundo {
    background-repeat: no-repeat;
    background-position: 50% 50%;
}



.tela-cheia,
.conteudo {
    width: 100%;
    min-height: 100%;
}

.not-tela-cheia,
.not-tela-cheia .conteudo,
.tela-cheia.nao-sobrepor,
.tela-cheia.nao-sobrepor .conteudo {
    height: 100%;
    overflow: hidden;
}

.conteudo {
    display: table;
}

.conteudo-tempo {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    text-align: center;
    font-size: .5em;
}

body {
    font-size: 1.7em;
    line-height: 100px;
    color: #ffffff;
    text-align: center;
}

.not-tela-cheia {
    height: 50%;
}

#tbxPalavra {
    background-color: transparent;
    opacity: 1;
    border: none;
    width: 270px;
    text-transform: lowercase;
    color: #FFFFFF;
    cursor: help;
}

#tbxPalavra.fim {
    background-color: rgb(0, 0, 0);
    box-shadow: 0px 0px 20px 13px #f00, 0 0 118px 60px #0c0c0c, 0 0 150px 110px #000, inset 4px -1px 7px 12px #e60909;
}

.campo-persona {
    background-color: transparent;
    border: none;
    font-family: Marcellus SC;
    font-size: 0.7em;
    color: #b4b2b0;
    text-align: center;
}

.acao-persona {
    background-color: transparent;
    font-family: Marcellus SC;
    font-size: 0.7em;
    color: #AB966F;
    border: none;
    cursor: pointer;
}

.acao-persona-nao {
    background-color: transparent;
    font-family: Marcellus SC;
    font-size: 0.7em;
    color: #b4b2b0;
    border: none;
    cursor: pointer;
}

#divPersona {
    position: fixed;
    right: 1%;
    top: 5px;
    line-height: 16px;
    font-size: 0.5em;
    text-align:left;
    z-index: 1;
}

#divVersao {
    position: fixed;
    left: 5px;
    top: 5px;
    line-height: 16px;
    font-size: 0.5em;
    color: rgb(0, 0, 0);
}

#divVersao:hover {
    color: #b4b2b0;
}

#divContagem {
    width: 100%;
    text-align: center;
    position: fixed;
    line-height: 16px;
    font-size: 0.5em;
    z-index: 0;
    bottom: 5px;
}

.persona {
    color: #AB966F;
}

meter {
    --optimum: #AB966F;
    width: 100%;
}

/* The gray background in Chrome, etc. */
meter::-webkit-meter-bar {
    background: var(--background);
}

/* The green (optimum) bar in Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {
    background: var(--optimum);
}

/* The green (optimum) bar in Chrome etc. */
meter::-webkit-meter-optimum-value {
    background: var(--optimum);
}

/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--sub-optimum);
}

/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
    background: var(--sub-optimum);
}

/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--sub-sub-optimum);
}

/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
    background: var(--sub-sub-optimum);
}

meter::-webkit-meter-bar {
    background: none; /* Required to get rid of the default background property */
    width: 100%;
    box-shadow: 0 5px 5px -5px #333 inset;
}

.persona-fechar:hover, .modal-fechar:focus {
    color: #e50000;
    cursor: pointer;
}

.codice {
    font-size: 3em;
    cursor: grab; 
}

.codice.clique
{
    cursor:grabbing;
}

span[data-codice='⛧'] {
    color: #AB966F;
}

#divCripto {
    margin-top: 80px;
}


#divCripto .item {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50px;
}

.tamanho-div {
    height: 65px;
}
