@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");




header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;

    &::before{
        content: '';
        background: url('../img/detalhe-quadriculado.png');
        background-repeat: repeat-x;
        background-size: contain;
        width: 100%;
        height: 100px;
    }

    .detalhe-estrela{
        max-width: 8vw;
        transition: var(--delay-default);
        animation: piscar-estrela var(--delay-default) infinite;

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

    .banner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;

        padding-inline: 20px;

        .banner-titulo {
            display: inline-flex;            
            align-items: center;

            h1 {
                font-family: "Alfa Slab One", serif;
                font-size: clamp(1rem, 4vw, 3rem);
                color: #1e1e1e;                
                margin: 0;
                margin-inline:30px;
            }
            
        }

        .titulo-xsalada{
            width: 100%;
            max-height: 240px;
        }
    }

    .botao-votar{
        position: relative;
        font-size: 1.5rem;
        font-weight: 500;
        font-family: 'Alfa Slab One';
        text-align: center;
        place-content: center;
        text-decoration: none;

        color: white;

        background-image: url(../img/bandeira-vermelha.png);
        background-size: cover;

        width: 314px;
        height: 64px;

        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, &:focus {
            transform: scale(1.05);
        }
    
        &:hover::before, &:focus::before {
            left: 120%;
            transition: left 0.6s ease-out;
        }
    }

    .mascote-container{
        position: relative;

        max-height: 95vh;
        height: 100%;
        max-width: 90vw;
        width: 100%;

        display: flex;
        justify-content: center;

        background-image: url(../img/concurso-bg-menor.png);
        background-size: contain;

        background-position: center;
        background-repeat: space;

        img{
            width: 419px;
            max-width: 100%;
        }
    }
}

@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;
    }
}

@media (max-width:1400px) {
    header {
        .banner{
            max-width: 850px;
            margin: auto;

            .banner-titulo {
                h1 {
                    font-size: clamp(1rem, 4vw, 2rem);
                }
            }
            .titulo-xsalada {
                max-height: 170px;
            }
        }
        
        .botao-votar{
            font-size: 1.2rem;
            width: 250px;
            height: 50px;
        }
        .mascote-container{
            img {
                width: 220px;
                max-width: 100%;
            }
        }
    }
}
@media (max-width:1200px) {
    header {
        &::before{
            background-size: cover;
        }
    }
}


@media (max-width: 425px) {
    header {
        .detalhe-estrela{
            width: 30px;
        }
        .banner{
            gap: 15px;

            .banner-titulo {
                h1 {
                    margin-inline: 15px;
                }
            }

        }
        .botao-votar{
            font-size: 1.2rem;
            width: 250px;
            height: 50px;
        }
    }
}