* {
  padding: 0;
  margin: 0;
}

.texture--grain:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(./noise.png);
  mix-blend-mode: overlay;
  opacity: 0.2;
}

:root {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  --c1: red;
  --c2: white;
  --c3: #202123;
  background: var(--c2);
  color: var(--c3);
  color-adjust: exact;
  -webkit-print-color-adjust: exact;
  background: #edebe5;
  --inverted: #000;

  --ws: var(--pxs, 80vmin);
  --hpxs: 40vmin;
}

.border--bold {
  --gap: .75vmin;
}

.border--oldweb {
  --gap: 2px;
}

.border--none {
  --gap: .75vmin;
  --inverted: transparent;
}

.darkmode {
  background: #202123;
  --inverted: #fff;
}

body {
  height: 100vh;
}

.w {
  width: var(--ws);
  height: var(--ws);
  display: grid;
  
  grid-template-columns: repeat(var(--s), 1fr);
  grid-template-rows: repeat(var(--s), 1fr);
  /*grid-auto-flow: dense;*/
  
  gap: var(--gap);
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: 300ms gap;
}

@media print {
  .w {
    height: 80vmin;
    width: 80vmin;
  }
}

.w-item {
  position: relative;
  width: auto;
  --z: 2vmin;
  /*
  grid-column: span var(--w);
  grid-row: span var(--h);
  */
}

.hide {
  opacity: 0;
}

.w-item > * { 
  position: absolute;
  top:  calc(-1 * var(--z));
  left: calc(-1 * var(--z));
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 var(--gap) var(--inverted);
  transition: top 300ms, left 300ms;

  mix-blend-mode: var(--blendmode);
}

.motion--normal .w-item:hover > * {
  top: calc(-2 * var(--z));
  left: calc(-2 * var(--z));
}

.w-item > *::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 var(--gap) var(--inverted);
  z-index: -1;
  transform: translate(var(--z), var(--z));
  background: var(--c2);
}


.fill--bg-gradient .w-item>*::after,
.fill--all-the-gradient .w-item>*::after {
  background: linear-gradient(-45deg, var(--c2) 0%, var(--c3) 100%);
}

.motion--flat-to-deep .w-item > * {
  animation: z 20s infinite alternate cubic-bezier(.3, .7, 0, 1);
  animation-delay: calc(var(--rnd) * -20s);
}

.motion--flat-to-deep .w-item > *::after {
  animation: z2 40s infinite alternate cubic-bezier(.3, .7, 0, 1);
  animation-delay: calc(var(--rnd) * -40s);
}

.motion--bouncey .w-item > * {
  animation: z3 20s infinite alternate cubic-bezier(.3, .7, 0, 1);
  animation-delay: calc(var(--rnd) * -20s);
}

.motion--deep-to-flat .w-item > * {
  animation: z4 20s infinite alternate cubic-bezier(.3, .7, 0, 1);
  animation-delay: calc(var(--rnd) * -20s);
}

.square--inner {
  background: var(--c1);
}

.fill--fg-gradient .square--inner,
.fill--all-the-gradient .square--inner {
  background: linear-gradient(-45deg, var(--c1) 0%, var(--c2) 100%);
}

.circle--inner {
  background: var(--c1);
  border-radius: 50%;
}

.fill--fg-gradient .circle--inner,
.fill--all-the-gradient .circle--inner {
  background: linear-gradient(-45deg, var(--c1) 0%, var(--c2) 100%);
}

.circle > *::after {
  border-radius: 50%;
}

.doory > *::after {
  border-radius: 50% 50% 0 0;
  /*transform: translate(var(--z), var(--z)) rotate(calc(var(--r) * 90deg));*/
}

@keyframes z {
  0%, 100% {
    top: calc(-2 * var(--z));
    left: calc(-2 * var(--z));
  }

  10%, 90% {
    top: calc(-1 * var(--z));
    left: calc(-1 * var(--z));
  }
}

@keyframes z2 {
  0%,
  100% {
    transform: translate(calc(2 * var(--z)), calc(2 * var(--z)));
  }

  10%,
  90% {
    transform: translate(var(--z) * -2);
  }
}

@keyframes z3 {
  0%,
  100% {
    top: calc(-8 * var(--z));
    left: calc(-8 * var(--z));
  }

  10%,
  90% {
    top: calc(0 * var(--z));
    left: calc(0 * var(--z));
  }
}

@keyframes z4 {
  0%,
  100% {
    top: calc(0 * var(--z));
    left: calc(0 * var(--z));
  }

  10%,
  90% {
    top: calc(-1 * var(--z));
    left: calc(-1 * var(--z));
  }
}

.hash {
  display: none;
  font-family: sans-serif;
  font-size: .6rem;
  position: absolute;
  bottom: 2vmin;
  color: #fff;
  width: 80vmin;
  left: 50%;
  transform: translateX(-50%);
  text-align: right;
  padding: 1vmin;
  mix-blend-mode: difference;
}

@media print {
  .hash {
    display: block;
  }
}