@keyframes pulsar_animacao { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .pulsar { animation: pulsar_animacao 1s infinite; } #container_pdf_jm { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(142,249,243); background: linear-gradient(168deg, rgba(142,249,243,1) 29%, rgba(131,119,209,1) 94%); padding: 3px; height: 100vh; box-sizing: border-box; position: fixed; overflow-y: auto; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: white; text-shadow: 1px 0px black; display: none; z-index: 9999; } .tela_inicial_pdf_jm { display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 100%; height: 50%; color: rgba(131,119,209,1); text-shadow: 0 0 white; } .tela_inicial_pdf_jm div { margin: 5px 0; } .tela_inicial_pdf_jm h3 { font-size: 2rem; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; margin-top: 0; } div#entrar_nomes_pdf_jm input { border: none; border-radius: 5px; padding: 10px; font-size: 14px; margin: 3px 0; } div#entrar_nomes_pdf_jm input::placeholder { font-size: 11px; margin: 3px 0; } .iniciar_pdf_jm, .som_pdf_jm, .fechar_pdf_jm, .jogo_da_memoria_pdf_jm { color: white; font-weight: bold; font-family: Arial, Helvetica, sans-serif; border-radius: 3px; margin: 3px; border: none; padding: 3px 5px; cursor: pointer; } .iniciar_pdf_jm, .jogo_da_memoria_pdf_jm { background-color: #00c0ff; text-align: center; } .jogo_da_memoria_pdf_jm{ display: block; margin: 3px auto; padding: 5px 20px; } .som_pdf_jm { background-color: #2196f3; } .fechar_pdf_jm { background-color: #f44336; } .iniciar_pdf_jm:hover, .jogo_da_memoria_pdf_jm:hover { background-color: #FFB400; } .som_pdf_jm:hover { background-color: #73bcf7; } .som_desativado_pdf_jm { background-color: #dfdfdf; } .fechar_pdf_jm:hover { background-color: #ff6c61; } #info_pdf_jm { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 28px; padding: 3px 5px; border-radius: 5px; background-color: #c6c9cf; box-sizing: border-box; margin: 5px 0; visibility: hidden; opacity:0; transition: opacity 0.3s linear; } #info_pdf_jm div { margin: auto; } #jogador1_pdf_jm, #jogador2_pdf_jm {display: flex; align-items: center;} #container_cartas_pdf_jm { display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; visibility: hidden; opacity:0; transition:opacity 0.3s linear; } .carta_pdf_jm { position: relative; min-width: 55px; min-height: 70px; width: 8vw; height: 27vh; perspective: 1000px; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; margin: 3px; color: #444; text-shadow: none; font-weight: 400; } .carta_interior_pdf_jm { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; border-radius: 3px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .carta_interior_pdf_jm button.fechar_pdf_jm { position: absolute; z-index: 3000; left: 0; right: 0; top: -8px; width: 14px; height: 14px; font-size: 7px; margin: auto; display: none; text-align: center; padding: 0; } .virada_pdf_jm { transform: rotateY(180deg); } .frente_pdf_jm, .verso_pdf_jm { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; padding: 7px; box-sizing: border-box; overflow-y: auto; border-radius: 3px; display: flex; align-items: center; } .verso_pdf_jm span{ margin-left: auto; margin-right: auto; max-width: 100%; } .frente_pdf_jm { background-image: url('https://livro.online/wp-content/uploads/2022/02/LogoRegistroAlpha.svg'); background-repeat: no-repeat; background-color: #444; background-position: center; background-size:contain; } .verso_pdf_jm { transform: rotateY(180deg); background-color: antiquewhite; } .verso_pdf_jm span { margin: auto; word-wrap: break-word; overflow-wrap: break-word; } @media only screen and (max-width: 500px) { .carta_pdf_jm { font-size: 0.6em; } } /* Estilo da scrollbar das cartas*/ .verso_pdf_jm::-webkit-scrollbar { width: 5px; /* largura */ height: 10px; /* altura */ } /* Cor da barra de rolagem */ .verso_pdf_jm::-webkit-scrollbar-thumb { background-color: #999; } /* Cor da alça da barra de rolagem */ .verso_pdf_jm::-webkit-scrollbar-track { background-color: #fff; } .nome_pdf_jm { display:block; margin-right: 3px; text-align: right; width: 23vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pontuacao_pdf_jm {display:inline-block;} .disponivel_pdf_jm { cursor: grabbing; /* Essa classe defini se podemos virar ou não uma carta. O código javascript leva ela em conta */ } .tela_final_pdf_jm { position: absolute; display: none; flex-direction: column; flex-wrap: wrap; justify-content: space-around; align-items: center; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 300px; height: 200px; box-sizing: border-box; padding: 5px 15px; color: #444; border-radius: 6px; box-shadow: 2px 1px 15px 7px #5c5f62; background-color: antiquewhite; font-weight: 500; text-shadow: none; font-size: 12px; font-family: Arial, Helvetica, sans-serif; z-index: 2000; } .tela_final_pdf_jm button { border-radius: 6px; box-sizing: border-box; padding: 10px 15px; color: #fff; font-weight: bold; background-color: #f44336; cursor: pointer; border: none; margin: 10px; } .tela_final_pdf_jm button:hover { background-color: #ff6c61; }