:root{
  --cols: 30;
  --rows: 20;

  --size: max( calc(100vw / var(--cols)), calc(100vh / var(--rows)) );

  --line: #5c95f7;
  --c1: #ff0000;  
  --c2: #00d9ff;  
  --c3: #fff200;  
  --c4: #00ff5e;  
  --c5: #ff00e1;  

  --fade-in: 120ms;   
  --fade-out: 1200ms; 
  --out-delay: 300ms; 
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

.canvas{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--size));
  grid-auto-rows: var(--size);
  gap: 0;
  place-content: start;
}

.cell{
  position: relative;
  display: block;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cell::before,
.cell::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--fade-out) ease var(--out-delay);
}

.cell::before{
  box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--flash) 60%, transparent);
}

.cell::after{
  background: transparent center/50% no-repeat;
  image-rendering: pixelated;
}

.cell.num-0::after {
  background-image: url("Assets/0.png");
}
.cell.num-1::after {
  background-image: url("Assets/1.png");
}


.cell:hover::before,
.cell:hover::after{
  opacity: 1;
  transition: opacity var(--fade-in) cubic-bezier(.2,.9,.2,1) 0ms;
}

.cell:active::before,
.cell:active::after {
  opacity: 1;
  transition: opacity var(--fade-in) cubic-bezier(.2,.9,.2,1) 0ms;
}


.cell.is-active::before,
.cell.is-active::after {
  opacity: 1;
  transition: opacity 0.01s ease 0s;
}

.cell.is-fading-out::before,
.cell.is-fading-out::after {
  opacity: 0;
  transition: opacity 1.2s ease 0.3s;
}

.centered-text {
  position: fixed;
  bottom: 24px;
  left: 45px;
  text-align: left;
  color: #5c95f7;
  font-weight: bold;
  font-size: 3.3em;
  z-index: 10;
  pointer-events: none;
}

@media (max-aspect-ratio: 1/1) {
  :root { --cols: 20; --rows: 28; }
}

@media (min-aspect-ratio: 1/1) {
  :root { --cols: 30; --rows: 20; }
}

@media (min-aspect-ratio: 2/1) {
  :root { --cols: 45; --rows: 12; }
}

@media (max-width: 768px) {
  :root { --cols: 24; --rows: 25; }
  .centered-text {
    font-size: 2em;
    bottom: 10px;
    left: 10px;
  }
}

.image-1.is-active::after,
.image-1.is-fading-out::after {
  background-image: url('Assets/foot.png');
}
.image-2.is-active::after,
.image-2.is-fading-out::after {
  background-image: url('Assets/globe.png');
}
.image-3.is-active::after,
.image-3.is-fading-out::after {
  background-image: url('Assets/link.png');
}
.image-4.is-active::after,
.image-4.is-fading-out::after {
  background-image: url('Assets/lock.png');
}
.image-5.is-active::after,
.image-5.is-fading-out::after {
  background-image: url('Assets/mail.png');
}

.cell.bright {
  filter: brightness(2);
  transition: filter 0.3s ease-in-out;
}

.cell:focus { 
  outline: none; 
}

.visually-hidden {
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; border:0; clip:rect(0 0 0 0);
  overflow:hidden; white-space:nowrap;
}