root {
--porcentaje1: $porcentaje1;
--porcentaje2: $porcentaje2;
--porcentaje3: $porcentaje3;
--porcentaje4: $porcentaje4;
--color1: S_POST["color1"];
--color2: S_POST["color2"];
--color3: S_POST["color3"];
--color4: S_POST["color4"];
}


#datos{
display: grid;
grid-template-columns: 3fr 3fr 1f;
}

#datos input{
justify-items: center;
}

#grafica{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}



#grafica php>echo:nth-child(1){
height: var(--porcentaje1)*100px;
background-color: var(--color1);

}

#grafica php>echo:nth-child(2){
height: var(--porcentaje2)*100px;
background-color: var(--color2);
}

#grafica php>echo:nth-child(3){
height: var(--porcentaje3)*100px;
background-color: var(--color3);
}

#grafica php>echo:nth-child(4){
height: var(--porcentaje4)*100px;
background-color: var(--color4);
}