``````<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;
}

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;
}``````

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

This Pen doesn't use any external JavaScript resources.