<section class="conditionals">
  <h2>Conditional Operators</h2>
  <div class="higher">higher</div>
  <div class="equal">equal</div>
  <div class="lower">lower</div>
</section>
<section class="logicals">
  <h2>Logical Gates</h2>
  <div class="and">and</div>
  <div class="or">or</div>
  <div class="xor">xor</div>
  <div class="nand">nand</div>
  <div class="nor">nor</div>
  <div class="xnor">xnor</div>  
</section>

:root{
  /*
  any integer for conditionals,
  0 or 1 for logic gates
  */
  --x: 1;
  --y: 1;
}

/**************************
  CONDITIONALS
**************************/

.higher{
/* is x > y ??
(x-y) 
If x > y will result in 1 or higher, therefore true.
If they are equal, will result in 0, therefore false.
if x < y will result in -1 or lower, therefore false
*/ 
  --cond: calc(var(--x) - var(--y));
}

.equal{
/*  is x = y ??
If they are equal, will result in 0 as they'll cancel each other.
If not, will result in a negative number, as one of the subtractions will be negative, which will cause the multiplication to go negative.
Adding 1 will result in 1 for true, 0 or bellow for false.
*/
  --cond: calc(((var(--x) - var(--y)) * (var(--y) - var(--x))) + 1);
}

.lower{
/* is x < y ??
((x-y) * -1) 
If X < Y will result in 1 or higher, therefore true.
If they are equal, will result in 0, therefore false.
if X > Y will result in -1 or lower, therefore false
*/ 
  --cond: calc((var(--x) - var(--y)) * -1);
}

/**************************
   LOGICAL GATES 
**************************/

.and{
/* are both X and Y true? 
x * y
*/
  --cond: calc(var(--x) * var(--y));
}

.or{
  /* either X, Y or both are possitive  */
  --cond: calc((var(--x) + var(--y)) - (var(--x) * var(--y)));
}

.xor{
/* either X or Y is true, but not both. */
  --cond: calc((((var(--x) + var(--y)) * -1) + 2) * (var(--x) + var(--y)));
}

.nand{
/* False only if both X and Y are true, otherwise true*/
  --cond: calc(((var(--x) * var(--y)) - 1) * -1);
}

.nor{
/*"true" if both inputs are "false." Otherwise, the output is "false." */
  --cond: calc(((var(--x) - 1) * (var(--y) - 1)));  
}

.xnor{
 /*The XNOR (exclusive-NOR) gate is a combination XOR gate followed by an inverter. Its output is "true" if the inputs are the same, and"false" if the inputs are different. 
*/
  --cond: calc((((((var(--x) + var(--y)) * -1) + 2) * (var(--x) + var(--y))) - 1) * -1);
}


div{
  background: rgba(100, 255, 100, var(--cond));
  display: flex; 
  align-items:center;
  justify-content:center;
  font-size: 2rem;
  border: 2px solid grey;
  padding: 1em;
}

body{
  font-family: sans-serif;
  display:flex;
  flex-direction: column;
}

section{
  display:grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

section h2{
  grid-column:1 / -1;
}