@import url("https://fonts.googleapis.com/css2?family=Patua+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap");

:root {
    --delay-default: 300ms;

    cursor: url("../img/cursor.png"), default !important;

    a:hover, button:hover{
        cursor: url("../img/cursor-pointer.png") 12 0, pointer !important;
    }
}

::selection {
    background-color: #1e1e1e;
    color: #ffcc00;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #a58400;
}
::-webkit-scrollbar-thumb:hover {
    background: #8f7201;
}

body {
    position: relative;
    
    display: flex;
    justify-content: center;
    align-content: center;
    place-items: center;

    background: rgb(255 204 0);
    margin: 0;
    height: 100vh;

    .detalhe-estrela {
        position: absolute;
        z-index: 0;
        transition: var(--delay-default);
        animation: piscar-estrela var(--delay-default) infinite;

        &:hover {
            animation: pulsar-estrela calc(2 * var(--delay-default)) forwards;
        }
    }

    .botao-voltar {
        display: inline-block;

        font-family: "Alfa Slab One";
        text-decoration: none;
        font-size: 1.5rem;
        color: rgb(18 23 20);

        margin-left: 40px;
        padding: 5px 15px;
        
        background-color: rgb(255 255 255 / 72%);
        backdrop-filter: blur(40px);

        border: 3px solid #1e1e1e;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom: 0;

        i{
            transform: translateX(0);
            transition: var(--delay-default);
        }

        &:hover i{
            transform: translateX(-5px);
        }
    }

    .detalhe-estrela:nth-of-type(1) {
        top: 15%;
        left: 15%;
        transform: rotate(-15deg);
    }
    .detalhe-estrela:nth-of-type(2) {
        top: 11%;
        right: 22%;
        transform: rotate(15deg);
    }
    .detalhe-estrela:nth-of-type(3) {
        bottom: 13%;
        left: 23%;
        transform: rotate(20deg);
    }
    .detalhe-estrela:nth-of-type(4) {
        bottom: 28%;
        right: 20%;
    }

    &::before {
        content: "";

        position: absolute;
        top: 0;
        z-index: -1;

        display: block;
        background: url("../img/detalhe-quadriculado.png");
        background-repeat: repeat-x;
        background-size: auto 100%;
        width: 100%;
        height: 50px;
    }

    &::after {
        content: "";

        position: absolute;
        bottom: 0;
        z-index: -1;

        display: block;
        background: url("../img/detalhe-quadriculado.png");
        background-repeat: repeat-x;
        background-size: auto 100%;
        width: 100%;
        height: 50px;
    }
}

.main {
    display: block;
}

#containerVotacao {
    position: relative;
    z-index: 1;
    
    background: #fffdf7;
    border: 4px solid #1e1e1e;
    padding: 30px;
    border-radius: 32px;

    max-width: 90vw;

    .foto-nome {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;

        margin-bottom: 30px;

        .nome-participante {
            font-family: "Alfa Slab One";
            font-size: 1.5rem;
            text-align: center;

            margin: 0;
        }
        .foto-participante {
            max-width: 150px;
            border-radius: 20px;
        }
    }

    .validar-voto{
        display: flex;
        align-items: center;
        gap: 30px;
        
        .captcha-container {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 10px;

            label{
                font-family: "Alfa Slab One";
                font-size: 1rem;
                text-align: center;
            }
    
            .recaptcha {
                object-fit: scale-down;
                width: 250px;
                height: 70px;
            }
    
            .captcha-bloco {
                display: flex;
                align-items: center;
                gap: 5px;
    
                width: 100%;
    
                .captcha-img {
                    border: 2px solid #1e1e1e;
                    border-radius: 20px;
                    width: 100%;
                    height: auto;
                }
        
                .captcha-refresh {
                    display: flex;
                    justify-content: center;
                    align-items: center;
        
                    width: 72px;
                    height: 100%;
                    aspect-ratio: 1 / 1 ;
        
                    background-color: white;
                    
                    cursor: pointer;
                    border-radius: 20px;
                    border: 2px solid #1e1e1e;

                    &:hover i{
                        transform: rotate(360deg);
                        transition: calc(1.5 *  var(--delay-default)) ease-in-out;
                    }
                }
            }
    
    
            .captcha-input {
                padding-block: 18px;
                border: 2px solid #1e1e1e;
                border-radius: 20px;

                background-color: white;
                text-align: center;
                text-transform: uppercase;
                font-weight: 600;
                font-size: 1rem;
                outline: none;

                width: 100%;
                width: -webkit-fill-available;

                &::placeholder{
                    color: #1e1e1e7e;
                    text-transform: none;
                }
            }
    
        }
        .votar {
            display: grid;
            position: relative;

            font-size: 1rem;
            font-family: "Alfa Slab One";
            text-align: center;
            letter-spacing: 0.05em;
            place-content: center;
            text-decoration: none;
            color: white;

            cursor: pointer;

            background-image: url(../img/bandeira-vermelha.png);
            background: rgb(36, 117, 56);
            background-size: cover;

            width: 200px;
            height: 60px;

            border: 0px;
            transition: var(--delay-default);
            overflow: hidden;
            clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
    
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: -60%;
                width: 50%;
                height: 100%;
                background: linear-gradient(
                    120deg,
                    transparent,
                    rgba(255, 255, 255, 0.5),
                    transparent
                );
                transform: skewX(-30deg);
                transition: left 0.4s;
            }
    
            &:hover {
                transform: scale(1.05);
            }
    
            &:hover::before {
                left: 120%;
                transition: left 0.6s ease-out;
            }
        }
    }
}

@keyframes piscar-estrela {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.8;
    }
}
@keyframes pulsar-estrela {
    0% {
        scale: 1;
    }
    25% {
        scale: 1.1;
    }
    50% {
        scale: 1;
    }
    75% {
        scale: 1.1;
    }
    100% {
        scale: 1;
    }
}
@keyframes voltar {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(0);
    }
}

@media (max-width: 1120px) {
    body {
        .detalhe-estrela:nth-of-type(1) {
            top: 8%;
            left: 15%;
        }
        .detalhe-estrela:nth-of-type(4) {
            bottom: 8%;
            right: 20%;
        }
    }
}

@media (max-width: 768px) {
    .container {
        .validar-voto {
            flex-direction: column;
            gap: 10px;
        }
    }
}
@media (max-width: 425px) {
    html{
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    body {
        .detalhe-estrela:nth-of-type(3) {

        }

        .container {

            .foto-nome {

                .foto-participante {
                    
                }
                .nome-participante {
                    
                }
            }
        }
    }
}