/* ------- Osmo [https://osmo.supply/] ------- */
/* Osmo UI: https://slater.app/10324/23333.css */
:root {
  --color-light: var(--color-neutral-200);
  --color-dark: var(--color-neutral-800);
  --color-primary: #ff4c24;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #efeeec;
  --color-neutral-300: #e3e1de;
  --color-neutral-400: #cbc8c5;
  --color-neutral-500: #818180;
  --color-neutral-600: #2c2c2c;
  --color-neutral-700: #1f1f1f;
  --color-neutral-800: #131313;
  --color-neutral-900: #000000;
  --color-white: var(--color-neutral-100);
  --color-black: var(--color-neutral-900);
  --color-error: var(--color-primary);
  --color-success: #0ba954;
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
  --duration-default: 0.735s;
  --animation-default: var(--duration-default) var(--cubic-default);
  --gap: 2em;
  --section-padding: calc(3.5em + (var(--gap) * 2));
  --container-padding: 2em;
  --header-height: calc(1.5em + (var(--gap) * 2));
  --footer-height: calc(2.785em + (var(--gap) * 2));
}

body {
  background-color: var(--color-neutral-900);
  color: var(--color-light);
  font-size: var(--size-font);
}

.cloneable {
  padding: var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  display: flex;
  position: relative;
}

.pixelated-image-card {
  background-color: var(--color-neutral-800);
  color: var(--color-primary);
  border-radius: .5em;
  width: 30vw;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

.before__100 {
  padding-top: 100%;
}

.pixelated-image-card__default, 
.pixelated-image-card__img,
.pixelated-image-card__active, 
.pixelated-image-card__pixels{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pixelated-image-card__active {
  display: none;
}

.pixelated-image-card__pixel {
  background-color: currentColor;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
}