:root {
    --celeste: #009aff;
}

main {
    background-image: url(/assets/img/fondo.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
}

.ruleta {
    position: relative;
    top: 0;
    left: 15%;
    right: 0;
    width: 70%;
    z-index: 3;
}

img#img-flecha {
    position: absolute;
    top: 30%;
    left: 41%;
    width: 107px;
    rotate: -90deg;
    z-index: 9;
}

label,
input,
.btn {
    font-family: 'Nunito Sans', sans-serif !important;
}

@media (min-width: 764px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 764px;
    }
}

.ratio-te {
    --bs-aspect-ratio: 177%;
}

.ratio-3x1 {
    --bs-aspect-ratio: 33.33%;
}

.bg-degrade {
    background-image: linear-gradient(to right, #01a8ff, #4632ff);
}

:root {
    --bs-border-radius: 1rem;
}

.textosRuleta {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.porcion {
    transform: rotate(calc(var(--rotation) + 22.5deg));
    transform-origin: center;
    position: absolute;
    width: 84%;
    left: 8%;
    top: 43%;
    padding-right: 100px;
    color: var(--bs-light);
    text-shadow: 0 0 3px black;
    padding-right: 52%;
    height: 72px;
}

#premioSlide {
    background-color: var(--celeste);
    box-shadow: 0 0 2px 10px white;
}