* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --espaco-padding: 2%;
    --laranja: #FE9A21FF;
    --cor-do-texto: white;
    --cor-background-footer: rgba(0, 0, 0, 0.8);
    --cor-background: #E6E6E6;
}

body {
    background-color: var(--cor-background);
}

a {
    text-decoration: none !important;
    color: var(--cor-do-texto) !important;
}

@media screen and (min-width: 320px) and (max-width: 1279px) {
    #logo {
        padding: 4%;
        width: 100%;
    }

    main {
        margin: 4%;
        margin-bottom: 4%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        gap: 20px;
    }

    .icones-tela-principal {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .bubble {
        background-color: #fff;
        border: 2px solid var(--laranja);
        border-radius: 5px;
        color: #333;
        display: inline-block;
        font: 1.5rem sans-serif;
        padding: 8px 24px;
        position: relative;
        max-width: 80vw;
        min-height: 6em;
        vertical-align: middle;
        display: flex;
        align-items: center;
    }

    .bubble strong {
        color: var(--laranja);
    }

    /* Criando o triângulo */
    .bubble.active:after,
    .bubble.active:before {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #fff;
        bottom: -15px;
        content: '';
        left: 50%;
        /* Ajuste a porcentagem para mover o triângulo para a direita */
        margin-left: -15px;
        position: absolute;
    }

    /* Criando a borda do triângulo */
    .bubble.active:before {
        border-left: 18px solid transparent;
        border-right: 18px solid transparent;
        border-top: 18px solid;
        border-top-color: inherit;
        bottom: -18px;
        margin-left: -18px;
    }

    .gif img {
        height: 40vh;
        width: 100%;
        margin: 0 auto;
    }

    footer {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--cor-background-footer);
        padding: 3% 1%;
    }

    .bubble-footer {
        border: 2px solid var(--laranja);
        border-radius: 5px;
        color: var(--cor-do-texto);
        display: inline-block;
        font: 0.8rem sans-serif; /* Reduzindo o tamanho da fonte */
        padding: 2px 8px; /* Reduzindo o padding */
        position: relative;
        width: 6em; /* Reduzindo a largura */
        height: 2em; /* Reduzindo a altura */
        vertical-align: middle;
        display: flex;
        align-items: center;
    }
    
    .bubble-footer.active:after,
    .bubble-footer.active:before {
        border-left: 12px solid transparent; /* Reduzindo o tamanho da seta */
        border-right: 12px solid transparent;
        border-top: 12px solid inherit;
        bottom: -12px; /* Ajustando a posição da seta */
        content: '';
        left: 80%;
        margin-left: -12px;
        position: absolute;
    }
    
    .bubble-footer.active:before {
        border-left: 15px solid transparent; /* Reduzindo o tamanho da seta */
        border-right: 15px solid transparent;
        border-top: 15px solid transparent;
        border-top-color: inherit;
        bottom: -15px; /* Ajustando a posição da seta */
        margin-left: -15px;
    }    

    .logo-footer {
        width: 5em;
    }

    .redes-sociais {
        display: flex;
        flex-direction: column;
        font-size: .8rem;
    }

    .redes-sociais .site {
        display: flex;
        justify-content: right;
    }

    .redes-sociais .logos {
        display: flex;
        justify-content: right;
        align-items: center;
        gap: 5px;
    }

    .logos img {
        width: 1.5rem;
    }

}

@media screen and (min-width: 1280px) {
    #logo {
        padding: var(--espaco-padding);
        width: 100%;
    }

    #logo hr {
        border: 1px solid #414141;
    }

    main {
        margin: var(--espaco-padding);
        margin-bottom: 4%;
        justify-content: space-around;
        align-items: center;
        display: flex;
    }

    main:nth-child(1) {
        justify-self: end;
        align-self: flex-end;
    }

    .icones-tela-principal {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
    }

    .icones-tela-principal img {
        transform: rotate(90deg);
    }

    .bubble {
    background-color: #fff;
    border: 2px solid var(--laranja);
    border-radius: 5px;
    color: #333;
    display: inline-block;
    font: 2rem sans-serif;
    padding: 8px 24px;
    position: relative;
    max-width: 30vw;
    min-height: 6em;
    vertical-align: middle;
    display: flex;
    align-items: center;
}

.bubble strong {
    color: var(--laranja);
}

/* Criando o triângulo com tamanho reduzido */
.bubble.active:after,
.bubble.active:before {
    border-left: 10px solid transparent; /* Reduzindo o tamanho do triângulo */
    border-right: 10px solid transparent;
    border-top: 10px solid #fff; /* Reduzindo o tamanho do triângulo */
    bottom: -10px; /* Ajustando a posição do triângulo */
    content: '';
    left: 90%;
    margin-left: -10px;
    position: absolute;
}

/* Criando a borda do triângulo com tamanho reduzido */
.bubble.active:before {
    border-left: 12px solid transparent; /* Reduzindo o tamanho da borda do triângulo */
    border-right: 12px solid transparent;
    border-top: 12px solid; /* Reduzindo o tamanho da borda do triângulo */
    border-top-color: inherit;
    bottom: -12px; /* Ajustando a posição da borda do triângulo */
    margin-left: -12px;
}


    main>div:nth-child(1) {
        margin-left: 5%;
    }

    main>div:nth-child(2) {
        margin-left: auto;
        margin-right: 5%;
    }

    main>div:nth-child(3) {
        /* margin-left: auto;
        margin-right: 5%; */
        margin-right: 8%;
    }


    .gif img {
        height: 60vh;
    }

    footer {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--cor-background-footer);
        padding: 5% 3%;
    }

    .bubble-footer {
        border: 2px solid var(--laranja);
        border-radius: 5px;
        color: var(--cor-do-texto);
        display: inline-block;
        font: 1.3rem sans-serif;
        padding: 8px 24px;
        position: relative;
        width: 8em;
        height: 3em;
        vertical-align: middle;
        display: flex;
        align-items: center;
    }

    .bubble-footer.active:after,
    .bubble-footer.active:before {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid inherit;
        bottom: -15px;
        content: '';
        left: 80%;
        margin-left: -15px;
        position: absolute;
    }

    .bubble-footer.active:before {
        border-left: 18px solid transparent;
        border-right: 18px solid transparent;
        border-top: 18px solid transparent;
        border-top-color: inherit;
        bottom: -18px;
        margin-left: -18px;
    }

    .logo-footer {
        width: 10em;
    }

    .redes-sociais {
        display: flex;
        flex-direction: column;
    }

    .redes-sociais .site {
        display: flex;
        justify-content: right;
    }

    .redes-sociais .logos {
        display: flex;
        justify-content: right;
        align-items: center;
        gap: 10px;
    }
}