@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.btn-custom {
    padding: 18px 40px; /* Aumenta o padding do botão */
    font-size: 22px; /* Aumenta o tamanho da fonte */
}


.container {
    text-align: center;
}

.logo {
    width: 300px; /* Tamanho padrão da logo */
    margin-top: -120px; /* Margem superior para centralização */
    margin-bottom: 50px; /* Espaço abaixo da imagem */
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    body {
        height: auto; /* Ajusta a altura para dispositivos móveis */
        padding: 20px;
        flex-direction: column; /* Disposição em coluna para melhor adaptação */
    }

    .logo {
        width: 250px; /* Tamanho da logo em telas menores */
        margin-top: -80px; /* Ajusta a margem superior para centralização */
        margin-bottom: 30px; /* Ajusta a margem inferior para espaçamento */
    }
}

/* Estilos para dispositivos muito pequenos, como celulares */
@media (max-width: 480px) {
    .logo {
        width: 200px; /* Tamanho da logo em telas pequenas */
        margin-top: -60px; /* Ajusta a margem superior para centralização */
        margin-bottom: 20px; /* Ajusta a margem inferior para espaçamento */
    }
}