@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
    background-color: black;
    background-image: url(../img/background.png?v=1);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}
.capa-img {
    height: 390px;
}
.imagem-capa{
    text-align: center;
}
.titulo-geral{
    color: white;
    font-family: "Pacifico", cursive;
    font-size: 35px;
}
.sub-geral{
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    color: white;
}
.geral-raspadinha {
    width: 700px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.raspadinha-img {
    height: 130px;
}
.raspadinhas-contain {
    display: flex;
    gap: 25px;
    justify-content: center;
    margin-top: 21px;
}
.raspadinha{
    transition: 0.40s;
    animation: raspflutuante 1.5s  infinite ease-in-out;
}
.raspadinha:hover {
    scale: 1.2;
}
@keyframes raspflutuante {
    50%{
        transform: translateY(-10%);
    }
}
canvas {
    background-color: white;
    background-image: url(../img/espelho-rasp.jpg?v=1);
    background-size: cover;
    margin-top: 18px;
    position: absolute;
    mix-blend-mode: screen;
    left: 201px;
    top: 64px;
    border-radius: 22px;
    z-index: 1;
}
.raspadinha-revelada {
    width: 400px;
    height: 240px;
    margin-top: 20px;
}
.rasp1{    
    background: url(../img/rasp-01.png?v=1);
    background-size: cover;
}
.rasp2{    
    background: url(../img/rasp-02.png?v=1);
    background-size: cover;
}
.rasp3{    
    background: url(../img/rasp-03.png?v=1);
    background-size: cover;
}
main{
    position: relative;    
    display: none;
}
.loading {
    color: #00f300;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    margin-top: 20px;
    width: 400px;
    height: 240px;
    background: #262626;
    display: flex;
    justify-content: center;
    align-items: center;
}
.orientacao {
    font-size: 20px;
    color: white;
    font-family: 'Poppins';
    margin-top: 20px;
}
.quase{
    font-size: 43px;
}
.revelado{
    top: 20%;
    position: fixed;
}
.premio-nome {
    top: 49%;
    left: 52%;
    position: absolute;
    font-weight: 700;
    background: #000000;
    padding: 7px;
    color: #747474;
    font-family: 'Poppins';
    font-size: 13px;
    width: 160px;
}
@media only screen and (max-width: 600px) {
    .raspadinhas-contain {
        flex-direction: column;
    }
    .capa-img {
        height: 308px;
    }
    body {
        padding-left: 5px;
        padding-right: 5px;
    }
    .titulo-geral {
        font-size: 29px;
    }
    .sub-geral {
        font-size: 15px;
    }
    main{
        zoom: 90%;
    }
    .orientacao {
        font-size: 17px;
        width: 54%;
    }
}