@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

:root {
    --cor-background-body: #2c3e50;
    --cor-texto-branco: white;
    --cor-borda-branca: white;
    --cor-sombra-box: #06384f45;
    --cor-border-roleta: white;
    --cor-fundo-1: #244881;
    --cor-fundo-2-top: #ff000000;
    --cor-fundo-2-bottom: #F7B900;
    --cor-fundo-2-left: transparent;
    --cor-fundo-2-right: #ff747400;
    --cor-fundo-3-top: #ff000000;
    --cor-fundo-3-bottom: #8b68ec00;
    --cor-fundo-3-left: #f33443;
    --cor-fundo-3-right: #ff747400;
    --cor-fundo-4-top: #ff000000;
    --cor-fundo-4-bottom: #8b68ec00;
    --cor-fundo-4-left: #595f9700;
    --cor-fundo-4-right: #212b57;
    --cor-fundo-5-top: #ff000000;
    --cor-fundo-5-bottom: #8b68ec08;
    --cor-fundo-5-left: #F7B900;
    --cor-fundo-5-right: #88424200;
    --cor-fundo-6-top: #ff000000;
    --cor-fundo-6-bottom: #8b68ec08;
    --cor-fundo-6-left: #333972;
    --cor-fundo-6-right: #F7B900;
    --cor-fundo-7-top: #f33443;
    --cor-fundo-7-bottom: #8b68ec08;
    --cor-fundo-7-left: #33397200;
    --cor-fundo-7-right: #a94b4b00;
    --cor-fundo-8-top: #c4646400;
    --cor-fundo-8-bottom: #212b57;
    --cor-fundo-8-left: #33397200;
    --cor-fundo-8-right: #a94b4b00;
    --cor-botao-play-background: #4cd52d;
    --cor-botao-play-hover-background: #8e44ad;
    --cor-geral-texto: white;
    --cor-seta-left: #ff000000;
    --cor-seta-right: #ffc0cb00;
    --cor-seta-top: #3d2916;
    --cor-seta-bottom:transparent;
    --cor-descontos-texto: white;
    --cor-titulo: white;
    --cor-titulo-grande: white;
    --cor-descontotext: #198754;
    --cor-tentativa: #ffdc1d;
    --cor-porcents: white;
}

body {
    background: var(--cor-background-body);
    text-align: center;
    background-size: 1600px;
    background-position-y: 828px;
}

.nevecaindo {
    position: absolute;
    padding: 5%;
    z-index: 1;
}

img.floco-img {
    height: 36px;
    position: fixed;
    top: -10%;
    animation: neve 4s ease-in;
}

img.logotipo {
    height: 270px;
}

.logotipo-central {
    margin-bottom: -168px;
    margin-top: 22px;
}

.roleta {
    width: 400px;
    height: 400px;
    border: solid 9px var(--cor-border-roleta);
    border-radius: 50%;
    box-shadow: 9px 0px 65px var(--cor-sombra-box);
    background: var(--cor-background-roleta);
    overflow: hidden;
    position: relative;
}

.fundo-1 {
    border-top: solid 200px var(--cor-fundo-1);
    border-left: solid 200px transparent;
    border-right: solid 200px transparent;
    border-bottom: solid 200px transparent;
    width: 0;
    height: 0;
    position: absolute;
}

.fundo-2 {
    border-top: solid 200px var(--cor-fundo-2-top);
    border-left: solid 200px transparent;
    border-right: solid 200px var(--cor-fundo-2-right);
    border-bottom: solid 200px var(--cor-fundo-2-bottom);
    width: 0;
    height: 0;
    position: absolute;
}

.fundo-3 {
    border-top: solid 200px var(--cor-fundo-3-top);
    border-left: solid 200px var(--cor-fundo-3-left);
    border-right: solid 200px var(--cor-fundo-3-right);
    border-bottom: solid 200px var(--cor-fundo-3-bottom);
    width: 0;
    height: 0;
    position: absolute;
}

.fundo-4 {
    border-top: solid 200px var(--cor-fundo-4-top);
    border-left: solid 200px var(--cor-fundo-4-left);
    border-right: solid 200px var(--cor-fundo-4-right);
    border-bottom: solid 200px var(--cor-fundo-4-bottom);
    width: 0;
    height: 0;
    position: absolute;
}

.fundo-5 {
    border-top: solid 200px var(--cor-fundo-5-top);
    border-left: solid 200px var(--cor-fundo-5-left);
    border-right: solid 200px var(--cor-fundo-5-right);
    border-bottom: solid 0px var(--cor-fundo-5-bottom);
    width: 0;
    height: 0;
    position: absolute;
}

.fundo-6 {
    border-top: solid 200px var(--cor-fundo-6-top);
    border-left: solid 200px var(--cor-fundo-6-left);
    border-right: solid 200px var(--cor-fundo-6-right);
    border-bottom: solid 0px var(--cor-fundo-6-bottom);
    width: 0;
    height: 0;
    position: absolute;
}

.fundo-7 {
    border-top: solid 200px var(--cor-fundo-7-top);
    border-left: solid 200px var(--cor-fundo-7-left);
    border-right: solid 0px var(--cor-fundo-7-right);
    border-bottom: solid 50px var(--cor-fundo-7-bottom);
    width: 0;
    height: 0;
    position: absolute;
}

.fundo-8 {
    border-top: solid 200px var(--cor-fundo-8-top);
    border-left: solid 200px var(--cor-fundo-8-left);
    border-right: solid 0px var(--cor-fundo-8-right);
    border-bottom: solid 200px var(--cor-fundo-8-bottom);
    width: 0;
    height: 0;
    position: absolute;
}



.play {
    z-index: 3;
    position: absolute;
    background: var(--cor-botao-play-background);
    padding: 23px;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--cor-texto-branco);
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.40s;
}

.play:hover {
    transition: 0.40s;
    scale: 117%;
    background: var(--cor-botao-play-hover-background);
}

.geral {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10%;
    position: relative;
}

.premios {
    margin-top: -6px;
    margin-left: -10px;
}

.seta {
    position: absolute;
    top: -17px;
    z-index: 5;
    border-left: solid 20px var(--cor-seta-left);
    border-bottom: solid 20px var(--cor-seta-bottom);
    border-right: solid 20px var(--cor-seta-right);
    border-top: solid 63px var(--cor-seta-top);
}

.descontos-1 {
    z-index: 4;
    position: absolute;
    top: 35%;
    left: 6%;
    color: var(--cor-descontos-texto);
    font-size: 22px;
    transform: rotate(19deg);
    font-weight: 600;
}

.descontos-2 {
    z-index: 4;
    position: absolute;
    top: 57%;
    left: 6%;
    color: var(--cor-descontos-texto);
    font-size: 22px;
    transform: rotate(336deg);
    font-weight: 600;
}

.descontos-3 {
    z-index: 4;
    position: absolute;
    top: 72%;
    left: 21%;
    color: var(--cor-descontos-texto);
    font-size: 22px;
    transform: rotate(295deg);
    font-weight: 600;
}

.descontos-4 {
    z-index: 4;
    position: absolute;
    top: 73%;
    left: 53%;
    color: var(--cor-descontos-texto);
    font-size: 40px;
    transform: rotate(250deg);
    font-weight: 600;
}

.descontos-5 {
    z-index: 4;
    position: absolute;
    top: 56%;
    left: 62%;
    color: var(--cor-descontos-texto);
    font-size: 22px;
    transform: rotate(13deg);
    font-weight: 600;
}

.descontos-6 {
    z-index: 4;
    position: absolute;
    top: 37%;
    left: 60%;
    color: var(--cor-descontos-texto);
    font-size: 22px;
    transform: rotate(347deg);
    font-weight: 600;
}

.descontos-7 {
    z-index: 4;
    position: absolute;
    top: 20%;
    left: 44%;
    color: var(--cor-descontos-texto);
    font-size: 22px;
    transform: rotate(112deg);
    font-weight: 600;
}

.descontos-8 {
    z-index: 4;
    position: absolute;
    top: 12%;
    left: 27%;
    color: var(--cor-descontos-texto);
    font-size: 40px;
    transform: rotate(61deg);
    font-weight: 600;
}

span.porcents {
    font-size: 10px;
    color: var(--cor-porcents);
}

@keyframes seta {
    0% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(-20deg);
    }
    100% {
        transform: rotate(20deg);
    }
}

@keyframes neve {
    0% {
        top: -10%;
    }
    100% {
        top: 100%;
    }
}

.titulo {
    font-size: 25px;
    color: var(--cor-titulo);
}

.titulo-grande {
    font-family: 'Rock Salt', cursive;
    color: var(--cor-titulo-grande);
    font-size: 37px;
    margin-top: 13px;
}

.descontotext {
    font-size: 22px;
    font-weight: 600;
    color: var(--cor-descontotext);
}

img.confete {
    height: 155px;
}

.tentativa {
    font-size: 20px;
    color: var(--cor-tentativa);
    font-weight: 500;
}

@media only screen and (max-width: 600px) {
    .logotipo-central {
        margin-bottom: -110px;
        margin-top: 5px;
    }
}