/*
    Minhas cores personalizadas para o projeto
*/
:root {
    --danger: rgb(241, 16, 17); /* #F11011 */
    --black-tr: rgba(0, 0, 0, 0.800);
    --blue: rgba(45, 148, 238, 0.812);
    --green: #1CB808;
    --green-tr: rgba(28, 184, 8, 0.700);
    --orange: rgba(255, 89, 0, 0.992);
    --orange-50: rgb(248, 140, 8);
    --yellow: rgb(255, 193, 7);
    --white-25: rgba(242, 239, 235, 0.150);
    --white-50: rgba(242, 239, 235, 0.700);
    --white-75: rgba(242, 239, 235, 0.90);
    --gray: rgba(32, 31, 31, 0.9);
}

/* PLANOS de assinatura */
.c-bg-bronze{background-color: #CA8E72;} .c-bg-silver{background-color: #C8CED3;}

/* VERMELHO */
.c-bg-danger{background-color: var(--danger);}
.c-text-danger{color: var(--danger);}
.c-border-danger{border-color: var(--danger);}
.c-outline-danger{outline-color: var(--danger);}

/* PRETO TR */
.c-bg-dark-tr{background-color: var(--black-tr);}
.c-text-dark-tr{color: var(--black-tr);}
.c-border-dark-tr{border-color: var(--black-tr);}
.c-outline-dark-tr{outline-color: var(--black-tr);}

/* AZUL */
.c-bg-blue{background-color: var(--blue);}
.c-text-blue{color: var(--blue);}
.c-border-blue{border-color: var(--blue);}
.c-outline-blue{outline-color: var(--blue);}

/* VERDE */
.c-bg-green{background-color: var(--green);}
.c-text-green{color: var(--green);}
.c-border-green{border-color: var(--green);}
.c-outline-green{outline-color: var(--green);}

/* VERDE TR */
.c-bg-green-tr{background-color: var(--green-tr);}
.c-text-green-tr{color: var(--green-tr);}
.c-border-green-tr{border-color: var(--green-tr);}
.c-outline-green-tr{outline-color: var(--green-tr);}

/* LARANJA */
.c-bg-orange{background-color: var(--orange);}
.c-text-orange{color: var(--orange);}
.c-border-orange{border-color: var(--orange);}
.c-outline-orange{outline-color: var(--orange);}

/* LARANJA 2 */
.c-bg-orange-50{background-color: var(--orange-50);}
.c-text-orange-50{color: var(--orange-50);}
.c-border-orange-50{border-color: var(--orange-50);}
.c-outline-orange-50{outline-color: var(--orange-50);}

/* AMARELO */
.c-bg-yellow{background-color: var(--yellow);}
.c-text-yellow{color: var(--yellow);}
.c-border-yellow{border-color: var(--yellow);}
.c-outline-yellow{outline-color: var(--yellow);}

/* BRANCO 25% */
.c-bg-white-25{background-color: var(--white-25);}
.c-text-white-25{color: var(--white-25);}
.c-border-white-25{border-color: var(--white-25);}
.c-outline-white-25{outline-color: var(--white-25);}

/* BRANCO 50% */
.c-bg-white-50{background-color: var(--white-50);}
.c-text-white-50{color: var(--white-50);}
.c-border-white-50{border-color: var(--white-50);}
.c-outline-white-50{outline-color: var(--white-50);}

/* BRANCO 75%*/
.c-bg-white-75{background-color: var(--white-75);}
.c-text-white-75{color: var(--white-75);}
.c-border-white-75{border-color: var(--white-75);}
.c-outline-white-75{outline-color: var(--white-75);}

/* GRAFITE */
.c-bg-gray{background-color: var(--gray);}
.c-text-gray{color: var(--gray);}
.c-border-gray{border-color: var(--gray);}
.c-outline-gray{outline-color: var(--gray);}

/******** TRANSPARENCIA ********/
.c-bg-none{background-color: transparent};
.c-border-none{border-color: transparent};
.c-outline-none{outline-color: transparent;}
.c-text-none{color: transparent;}


/******** BUTTONS ********/
.c-btn{

    width: auto;
    min-width: 100px;
    border-radius: 7px;
    border-width: 2px;
    letter-spacing: 1px;
    padding: 5px 10px;
    justify-self: center;
    transition: 0.7s;
}

.c-btn-md{

    width: 200px;
    height: 50px;
    border-radius: 7px;
    border-width: 2px;
    letter-spacing: 2px;
    padding: 5px 10px;
    justify-self: center;
    transition: 0.7s;
}

.c-btn-link{

    background-color: transparent;
    border: none;
    text-decoration: underline;
}

.c-link-btn{

    text-decoration: none;
}

/* HOVER COLOR */
.c-hover-orange:hover{

    border-color: var(--orange-50);
    color: var(--orange-50);
    transition: 0.5s;
}

.c-hover-yellow:hover{

    border-color: var(--yellow);
    color: var(--yellow);
    transition: 0.5s;
}

.c-hover-green:hover{

    border-color: var(--green);
    color: var(--green);
    /* background-color: var(--black-tr); */
    transition: 0.5s;
}

.c-hover-blue:hover{

    border-color: var(--blue);
    color: rgba(238, 238, 232, 0.750);
    transition: 0.5s;
}

.c-hover-white:hover{

    border-color: var(--white-75);
    border-width: 2px;
    color: aliceblue;
    transition: 0.5s;
}

.c-hover-danger:hover{

    border-color: var(--danger);
    border-width: 2px;
    color: aliceblue;
    transition: 0.5s;
}

.vidro{
    background: rgba( 255, 255, 255, 0.35 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 13.5px );
    -webkit-backdrop-filter: blur( 13.5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.vidro-2{ /* From https://css.glass */
    
    background: rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.34);
}


/******** TEXT ********/
.c-letter-spacing-sm{

    letter-spacing: 0.1em;
}

.c-letter-spacing-md{

    letter-spacing: 0.2em;
}

.c-letter-spacing-lg{

    letter-spacing: 0.4em;
}