body {
  background-image: url("/assets/images/water.jpg");
}

#drawing-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(85, 163, 197, 0.5);
    z-index: 10000;

    display: grid;
    grid-template-rows: 1fr 30%;
    justify-items: center;

    padding: 1rem;
    box-sizing: border-box;

    touch-action: none;
}

.sub-draw {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    justify-items: center;
    width: 100%
}

#draw_pp{
    image-rendering: pixelated; 
    image-rendering: crisp-edges;
    height: 100%;
    aspect-ratio: 1/1;
    background-image: url("/assets/images/naked_pirayha.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

#outer-bp {
    display: flex;
    align-items: center;
    gap: 10px;
}

#outer-bp p {
    margin: 0;
}

.brush-picker {
    display: flex;
    gap: 8px;
    align-items: center;
}

.color-picker {
    display: grid;
    grid-template-columns: repeat(17, 1fr);
    gap: 5px;
    width: 100%;
    align-self: center;
}

.color-option {
    aspect-ratio: 1;
    border: 3px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
}

/* .color-picker {
  display: flex;
  gap: 5px;
  width: 100%;
  justify-content: center;
  margin: 10px;
} */

.color-picker input[type="radio"] {
  display: none;
}

/* .color-option {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  aspect-ratio: 1/1;
  display: inline-block;
  cursor: pointer;
  border-radius: 2px;
  border: 3px solid transparent;
  transition: 0.2s;
} */

.color-0 { background: url("/assets/images/sudd.png"); background-repeat: no-repeat; background-size: 100%; }
.color-1 { background: var(--color-1) }
.color-2 { background: var(--color-2) }
.color-3 { background: var(--color-3) }
.color-4 { background: var(--color-4) }
.color-5 { background: var(--color-5) }
.color-6 { background: var(--color-6) }
.color-7 { background: var(--color-7) }
.color-8 { background: var(--color-8) }
.color-9 { background: var(--color-9) }
.color-10 { background: var(--color-10) }
.color-11 { background: var(--color-11) }
.color-12 { background: var(--color-12) }
.color-13 { background: var(--color-13) }
.color-14 { background: var(--color-14) }
.color-15 { background: var(--color-15) }
.color-16 { background: var(--color-16) }



/* Selected state */
.color-picker input[type="radio"]:checked + .color-option {
  border-color: rgb(230, 230, 230);
  transform: scale(1.1);
}


@media (max-width:768px){

  #draw_pp {
    width: min(calc(95vw - 1rem), calc(95dvh - 1rem), 1024px);
    height: auto;
    margin: 0;
  }

}