body{
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 0;
}

.page{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  --r:100;
  --g:100;
  --b:100;
  --a:1;
}

.background{
  position: fixed;
  inset: 0;
  background: rgba(var(--r,100), var(--g,100), var(--b,100), var(--a,1));
  z-index: -1;
  transition: 0.3s;
}


.grid{
  height:fit-content;
}

.row1{
  display: flex;
  justify-content: center;
  align-content: center;
}

.row2{
  display: flex;
  justify-content: center;
  align-content: center;
}

.row3{
  display: flex;
  justify-content: center;
  align-content: center;
}

.row1 * {
  width: 3em;
  height: 2em;
  background-color: brown;
  border: 1px solid black;
}

.row2 * {
  width: 3em;
  height: 2em;
  background-color: brown;
  border: 1px solid black;
}

.row3 * {
  width: 3em;
  height: 2em;
  background-color: brown;
  border: 1px solid black;
}

.item{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Row 1*/
.row1 .item:nth-child(1):hover{
  --r:255; --g:0; --b:0; --a:1;
}

.row1 .item:nth-child(2):hover{
  --r:255; --g:0; --b:0; --a:0.8;
}

.row1 .item:nth-child(3):hover{
  --r:255; --g:0; --b:0; --a:0.5;
}

.row1 .item:nth-child(4):hover{
  --r:255; --g:0; --b:0; --a:0.25;
}

.row1 .item:nth-child(5):hover{
  --r:255; --g:0; --b:0; --a:0.1;
}

/*row 2*/
.row2 .item:nth-child(1):hover{
  --r:0; --g:255; --b:0; --a:1;
}

.row2 .item:nth-child(2):hover{
  --r:0; --g:255; --b:0; --a:0.8;
}

.row2 .item:nth-child(3):hover{
  --r:0; --g:255; --b:0; --a:0.5;
}

.row2 .item:nth-child(4):hover{
  --r:0; --g:255; --b:0; --a:0.25;
}

.row2 .item:nth-child(5):hover{
  --r:0; --g:255; --b:0; --a:0.1;
}

/*row 3*/
.row3 .item:nth-child(1):hover{
  --r:0; --g:0; --b:255; --a:1;
}

.row3 .item:nth-child(2):hover{
  --r:0; --g:0; --b:255; --a:0.8;
}

.row3 .item:nth-child(3):hover{
  --r:0; --g:0; --b:255; --a:0.5;
}

.row3 .item:nth-child(4):hover{
  --r:0; --g:0; --b:255; --a:0.25;
}

.row3 .item:nth-child(5):hover{
  --r:0; --g:0; --b:255; --a:0.1;
}

/*activation row 1*/
/*:has works as a "if" condition*/
/*Select .page if inside there is element n at row 1; then applies style to .page*/
/*:has is the only way to go from child to parent*/
.page:has(.row1 .item:nth-child(1):hover){--r:255; --g:0; --b:0; --a:1;}
.page:has(.row1 .item:nth-child(2):hover){--r:255; --g:0; --b:0; --a:0.8;}
.page:has(.row1 .item:nth-child(3):hover){--r:255; --g:0; --b:0; --a:0.5;}
.page:has(.row1 .item:nth-child(4):hover){--r:255; --g:0; --b:0; --a:0.25;}
.page:has(.row1 .item:nth-child(5):hover){--r:255; --g:0; --b:0; --a:0.1;}

/*activation row 2*/
.page:has(.row2 .item:nth-child(1):hover){--r:0; --g:255; --b:0; --a:1;}
.page:has(.row2 .item:nth-child(2):hover){--r:0; --g:255; --b:0; --a:0.8;}
.page:has(.row2 .item:nth-child(3):hover){--r:0; --g:255; --b:0; --a:0.5;}
.page:has(.row2 .item:nth-child(4):hover){--r:0; --g:255; --b:0; --a:0.25;}
.page:has(.row2 .item:nth-child(5):hover){--r:0; --g:255; --b:0; --a:0.1;}


/*activation row 3*/
.page:has(.row3 .item:nth-child(1):hover){--r:0; --g:0; --b:255; --a:1;}
.page:has(.row3 .item:nth-child(2):hover){--r:0; --g:0; --b:255; --a:0.8;}
.page:has(.row3 .item:nth-child(3):hover){--r:0; --g:0; --b:255; --a:0.5;}
.page:has(.row3 .item:nth-child(4):hover){--r:0; --g:0; --b:255; --a:0.25;}
.page:has(.row3 .item:nth-child(5):hover){--r:0; --g:0; --b:255; --a:0.1;}