@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
    /* Colores */

    /* Texts */
    --text-color-1: #3D3D3D;
    --text-color-2: white;
    --text-color-3: #F8E8C4;
    --text-color-4: #0681ad;
    --text-color-5: #557A46;
    --text-color-6: #A8C64C;

    /* Backgrounds */
    --bg-color-1: #F2F2F2;
    --bg-color-2: #557A46;
    --bg-color-3: #A8C64C;
    --bg-color-4: #3D3D3D;
    --bg-color-5: #0681ad;
    --bg-color-6: #F8E8C4;

    /* Buttons */
    --btn-color-1: #F8E8C4;
    --btn-color-2: #0681ad;
    --btn-color-3: #557A46;

    /* General */
    --primary-color: #557A46;
    --secundary-color: #A8C64C;

}

/* Texts */
.text-color-1 {
    color: var(--text-color-1);
}

.text-color-2 {
    color: var(--text-color-2);
}

.text-color-3 {
    color: var(--text-color-3);
}

.text-color-4 {
    color: var(--text-color-4);
}

.text-color-5 {
    color: var(--text-color-5);
}

.text-color-6 {
    color: var(--text-color-6);
}



/* Buttons */
.btn-color-1 {
    background-color: var(--btn-color-1);
}

.btn-color-2 {
    background-color: var(--btn-color-2);
}

.btn-color-3 {
    background-color: var(--btn-color-3);
}



/* Backgrounds */
.bg-color {
    background-color: var(--bg-color-1);
}

.bg-color-primary {
    background-color: var(--bg-color-2);
}

.bg-color-secundary {
    background-color: var(--bg-color-3);
}

.bg-color-ternary {
    background-color: var(--bg-color-4);
}

.bg-color-quaternary {
    background-color: var(--bg-color-5);
}

.bg-color-quintinary {
    background-color: var(--bg-color-6);
}


/* TICKER CSS */
/* .ticker-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

}

.ticker-container .scroll {
    width: 100%;
    display: flex;
    align-items: center;
    justify-items: center;
    height: 100%;
}

.ticker-container .scroll div {
    color: #000;
    font-size: 4em;
    white-space: nowrap;
    font-weight: 900;
    text-transform: uppercase;
    animation: animate 40s linear infinite;
}

.ticker-container .scroll div:nth-child(2) {

    animation: animate2 40s linear infinite;
    animation-delay: 20s;

}

.ticker-container .scroll div span {
    -webkit-text-stroke: 2px #000;
    color: transparent;
}


@keyframes animate {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}


@keyframes animate2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-200%);
    }
}

.ticker-Gradiente {
    background: rgb(242, 242, 242);
    background: -moz-linear-gradient(90deg, rgba(242, 242, 242, 1) 4%, rgba(226, 239, 221, 1) 22%, rgba(126, 181, 104, 1) 60%, rgba(85, 122, 70, 1) 97%);
    background: -webkit-linear-gradient(90deg, rgba(242, 242, 242, 1) 4%, rgba(226, 239, 221, 1) 22%, rgba(126, 181, 104, 1) 60%, rgba(85, 122, 70, 1) 97%);
    background: linear-gradient(90deg, rgba(242, 242, 242, 1) 4%, rgba(226, 239, 221, 1) 22%, rgba(126, 181, 104, 1) 60%, rgba(85, 122, 70, 1) 97%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f2f2", endColorstr="#557a46", GradientType=1);
} */