* {
    font-family: var(--font-family);
}
body {
    background:  linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),url('/assets/background_2.png');

    /* Faz a imagem cobrir toda a tela sem esticar (mantém a proporção) */
    background-size: cover;
    
    /* Centraliza a imagem */
    background-position: center;
    
    /* Evita que a imagem se repita caso a tela seja muito grande */
    background-repeat: no-repeat;
    
    /* Opcional: mantém o fundo fixo enquanto você rola a página */
    background-attachment: fixed;
    
}
#home-welcome {

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify;
    align-items: center;

}



.home-welcome-container {

    width: 50%;


    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;

    font-size: var(--font-size-lg);
    font-weight: 400;

    padding: var(--space-lg);

    border-radius: var(--radius-xl);

    background-color: var(--bg-normal);
    color:var(--primary-normal)
}

.wlcmContainerImg {
    max-width: 400px;
    animation-duration:5s;
    animation-name: translate;
    animation-timing-function: normal;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}


@keyframes translate {
    0% {
    }   
    100% {
        transform:translateY(40px);
        scale: 1;
    }

}


.signUp {

    background-color: var(--color-correct-answere-text);
    border-color: var(--color-correct-answere-text);
}

.signUp:hover {
    background-color: var(--color-correct-answere-bg);
    color: var(--color-correct-answere-text);
    border-color: var(--color-correct-answere-text);

}

@media (max-width: 1000px) {
     .home-welcome-container {
        margin-top: 100px;
        width: 70%;
        font-size: var(--font-size-md);
     }
     .wlcmContainerImg {
        max-width: 150px;
    }
    h1 {
        text-align: center;
    }

    .primaryButton {
    text-decoration: none;

    padding: var(--space-md);
    margin: var(--space-md);

}
}