@font-face {

            font-family: AdineueProBold;

            src: url("font/AdineueProBold.TTF");

        }



        .font-bold {

            font-family: AdineueProBold;

        }



        html,

        body {

            min-height: 100vh;

            user-select: none;

        }



        ::placeholder {

            color: white !important;

        }



        .custom-input {

            border: none !important;

            border-bottom: 1px solid #ced4da !important;

        }



        .custom-input:focus {

            outline: none;

            box-shadow: none !important;

        }



        .background {

            background: url('img/background.webp'), #292929;

            background-size: contain;

            background-position: center;

            background-repeat: no-repeat;

            min-width: 120%;

            min-height: 120%;

        }
		
		.personagens {
			z-index: 0;
		}

        @media screen and (max-width: 768px) {

            .background {

                background: url('img/background-m.webp'), #292929;

                min-width: 150%;

                min-height: 150%;

            }

        }



        header {

            background: rgb(0, 0, 0);

            background: linear-gradient(180deg, rgba(0, 0, 0, 0.7512254901960784) 50%, rgba(0, 0, 0, 0) 100%);

        }



        footer {

            background-color: #13283e;

        }



        .logo {

            max-height: 35px;

            width: auto;

        }



        body {

            display: flex;

            flex-direction: column;

            min-height: 100vh;

            background-color: #292929;

        }



        main {

            flex: 1;

            position: relative;

        }



        .fs-7 {

            font-size: 0.85rem !important;

        }



        .fs-8 {

            font-size: 0.70rem !important;

        }



        .fs-9 {

            font-size: 0.50rem !important;

        }



        .clr-primary-light {

            color: #00e6b8;

        }



        .clr-primary-dark {

            color: #006b55;

        }



        .bg-dark-blue {

            background-color: #03173f !important;

        }



        .bg-active-blue {

            background-color: #006b55 !important;

        }



        .zoom {

            -webkit-transition: 0.4s;

            transition: 0.4s;

        }



        .zoom:hover {

            transform: scale(1.05);

        }



        .fade.position-absolute {

            z-index: -2;

        }



        .link-header {

            -webkit-transition: 0.2s;

            transition: 0.2s;

        }



        .link-header:hover {

            font-weight: bold;

            font-size: 0.9rem !important;

        }



        .separador {

            height: 14px;

            width: 1px;

        }



        #roleta {

            max-width: 500px;

        }



        #roleta .indicador {

            width: 10%;

            left: calc(45%);

            top: -3%;

        }



        #btnGireJa {

            border: 1px solid white;

            background-color: #000;

            color: white;

        }



        .pulse {

            animation: pulse 1s infinite;

        }


        .fixed-img {
            position: fixed;
            bottom: 0;
            width: var(--img-size, 400px); /* Ajustável */
            z-index: -1 !important;
        }


        .right-img {
            right: 0;
        }


        .left-img {
            left: 0;
        }

		/* Responsive sizing */
		@media (max-width: 1200px) {
		.fixed-img {
		width: calc(var(--img-size, 400px) * 0.7);
		}
		}


		@media (max-width: 480px) {
		.fixed-img {
		width: calc(var(--img-size, 400px) * 0.5);
		}
		}



        @keyframes pulse {



            0% {

                transform: scale(1);

            }



            50% {

                transform: scale(1.05);

            }



            100% {

                transform: scale(1);

            }

        }



        .waiting {

            animation: wait 5s ease-in-out infinite;

        }



        @keyframes wait {

            0% {

                transform: rotate(0deg);

            }



            30% {

                transform: rotate(10deg);

            }



            60% {

                transform: rotate(-10deg);

            }



            100% {

                transform: rotate(0deg);

            }

        }



        .spinner {

            width: 75px;

            height: 75px;

            border-radius: 50%;

            border: 4px solid #ccc;

            border-top-color: #040622;

            animation: spin 1s linear infinite;

        }



        @keyframes spin {

            0% {

                transform: rotate(0deg);

            }



            100% {

                transform: rotate(360deg);

            }

        }




        @keyframes slow-spin {

            0% {

                transform: rotate(0deg);

            }



            100% {

                transform: rotate(360deg);

            }

        }