/* cores 
laranja #ff751f decomposicao
rosa #ff1fa9 algoritmos
azul #0cc0df abstracao
verde #74cc00 reconhecimento
*/

:root{
    --verde:#74cc00;
    --laranja:#ff751f;
    --rosa:#ff1fa9;
    --azul:#0cc0df;
    --roxo:#8a2be2;
}

*,*::before,*::after{
    box-sizing: border-box;
}

body{
    font-family: sans-serif;
}

#main{
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

#content{
    width: 80%;
    margin: auto;
}

.pcdestaque{
    font-weight: bold;
    color: var(--roxo);
}

.gradiente{
    color: var(--laranja); 
    background-image: linear-gradient(135deg, 
    var(--roxo) 0%,
    var(--azul) 25%,
    var(--verde) 50%,
    var(--laranja) 75%,
    var(--rosa) 100%
    ); 

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

header{
    text-align: center;
}

h2{
    color: var(--roxo)
}

.fonte{
    font-style: italic;
}

#pilares, #produtos{
    width: 70%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}


.pilar, .produto{
    max-width: 300px;
    text-align: center;
    padding: 10px;
    border-radius: 20px;
}

.pilar img, .produto img{
    width: 100px;
}

.decomposicao, .p1, .p1 b, .decomposicao b{
    color: var(--laranja);
    border: 3px solid var(--laranja);
}

.algoritmos, .p2, .p2 b, .algoritmos b{
    color: var(--rosa);
    border: 3px solid var(--rosa);
}

.abstracao, .p3, .p3 b, .abstracao b{
    color: var(--azul);
    border: 3px solid var(--azul);
}

.reconhecimento, .p4, .p4 b, .reconhecimento b{
    color: var(--verde);
    border: 3px solid var(--verde);
}

.pilar b, .produto b{
    border-width: 0px;
}

.pilar p, .produto p{
    color: black;
}

/* .p1 b, .p2 b, .p3 b, .p4 b, .decomposicao b,.algoritmos b, .abstracao b, .reconhecimento b
{
    border-width: 0px;
} */

.pilar a, .produto a{
    font-weight: bold;
    padding: 7px;
    border-radius: 12px;
    margin: 5px;
    text-decoration: none;
}

.pilar a:hover, .produto a:hover{
    color: white;
    background-image: linear-gradient(135deg, 
    var(--roxo) 0%,
    var(--azul) 25%,
    var(--verde) 50%,
    var(--laranja) 75%,
    var(--rosa) 100%
    ); 
    border-color: white;
}