.pink-container,
.cbox-container {
  background: #ffecfd;
  box-shadow: inset 5px 0px 15px 10px #ebb1d373;
  border-radius: 10px;
  border: 1px solid var(--color-pink);
}

.blue-container {
  background: #ecf4ff;
  box-shadow: inset 5px 0px 15px 10px #b1c8eb73;
  border-radius: 10px;
  border: 1px solid var(--color-blue);
}
.yellow-container {
  background: #fffdec;
  box-shadow: inset 5px 0px 15px 10px #dad09473;
  border: 1px solid var(--color-blue);
  border-radius: 10px;
}
.green-container {
  background: #ecf7eb;
  box-shadow: inset 5px 0px 15px 10px #b2d4ab73;
  border-radius: 10px;
  border: 1px solid var(--color-green);
}
.purple-container {
  background: #f7ecff;
  box-shadow: inset 5px 0px 15px 10px #d4b1eb73;
  border-radius: 10px;
  border: 1px solid var(--color-purple);
}
.pink-container,
.blue-container,
.yellow-container,
.green-container,
.purple-container,
.cbox-container {
  padding: 1rem;
  gap: 1rem;
  margin: 1rem;
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
}
.cbox-container {
  min-height: 40vh;
}
.imagemask {
  background-image: url("/assets/img/tiled/plaid.png");
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: repeat;
  font-size: 2em;
  width: fit-content;
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
}
button {
  padding: 1px 3px;
  gap: 1rem;
  margin: 1rem;
  background: #fffdec;
  box-shadow: inset 5px 0px 15px 10px #dad09473;
  border: none;
  border-radius: 3px;
  color: var(--color-darkblue);
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
}
button:hover, button:active {
  padding: 1px 3px;
  gap: 1rem;
  margin: 1rem;
  background: #f7ecff;
  box-shadow: inset 5px 0px 15px 10px #d4b1eb73;
  border-radius: 3px;
  border: 1px solid var(--color-purple);
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
}