*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#sketch-container {
    position: relative;
    width: 100%; /* Or whatever width you prefer */
    height: 600px; /* Or whatever height you prefer */
    overflow: hidden;
}

#canvas-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

html,
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
canvas {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: auto;
}

:root:has(input.theme-controller[value=customtheme]:checked),[data-theme="customtheme"] {
    color-scheme: light;
    --b1: 254 12% 10%; /* Toggle and sliders main color */ /* Primary */
    --n: var(--b1); /* Button BG */
    --p: 254 12% 90%; /* Slider BG and Toggle secondary color */ /* Secondary */

    --nc: 0 0% 95%; /* Button Text */

    --b2: 262 3% 95%; /* Card BG Color */
    --b3: 0 0% 0%;
    --bc: 0 12% 1%; /* Text Color */

    --s: 0 0% 93%; /* Image BG */

    /* Square it*/
    --rounded-box: 0;
    --rounded-btn: 0;
    --rounded-badge: 0;
    --tab-radius: 0;

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}
/* AUTOMATIC DARK MODE OVERRIDE */
@media (prefers-color-scheme: dark) {
    [data-theme="customtheme"] {
        color-scheme: dark;
        --b1: 254 12% 90%; /* Toggle and sliders main color */ /* Primary */
        --n: var(--b1); /* Button BG */
        --p: 254 12% 20%; /* Slider BG and Toggle secondary color */ /* Secondary */

        --nc: 254 12% 10%; /* Button Text */

        --b2: 0 0% 5%; /* Card BG Color */
        --b3: 0 0% 0%;
        --bc: 0 0% 95%; /* Text Color */

        --s: 0 0% 0%; /* Image BG */

        /* Square it*/
        --rounded-box: 0;
        --rounded-btn: 0;
        --rounded-badge: 0;
        --tab-radius: 0;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

        .file-input {
            color: var(--b1)
        }
    }
}
:root, [data-theme] {
    background-color: hsl(var(--b2) / var(--tw-bg-opacity, 1));
    color: hsl(var(--bc) / var(--tw-text-opacity, 1));
}
.toggle {
    flex-shrink: 0;
    --tglbg: hsl(var(--p));
    background-color: hsl(var(--b1));
}
.toggle:checked {
    flex-shrink: 0;
    --tglbg: hsl(var(--b1));
    background-color: hsl(var(--p));
}
.range {
    --range-shdw: var(--p);
}
.btn-neutral {
    --tw-border-opacity: 1;
    border-color: hsl(var(--n) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--n));
    --tw-text-opacity: 1;
    color: hsl(var(--nc) / var(--tw-text-opacity));
    outline-color: hsl(var(--n) / 1);
}
.input {
    background-color: hsl(var(--p) / var(--tw-bg-opacity));
}
.spritesheet-item {
    border-color: hsl(var(--bc) / 0.2);
}
.text-base {
    color: hsl(var(--b1) / 1);
}
.btn {
    border: 1px solid;
    border-color: hsl(var(--bc) / var(--tw-border-opacity, 1));
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1);
}

.custom-color-picker,
.custom-color-picker *:not(.pcr-current-color):not(.pcr-picker),
.pickr .pcr-button::after,
.pickr .pcr-button::before,
.pcr-app .pcr-swatches>button::after {
    border-radius: 0 !important;
    border: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}

.pickr .pcr-button,
.pcr-app .pcr-swatches > button::before,
.pickr .pcr-button::before,
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette::before,
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color::before {
    background: none !important;
}

.pcr-app .pcr-interaction .pcr-type.active {
    color: var(--n);
    background: var(--ns);
    border: solid !important;
    border-width: 1px !important;
    border-color: hsl(var(--bc) / 0.2) !important;
}

.pcr-app .pcr-interaction .pcr-result {
    color: var(--b1);
    background: hsl(var(--p) / 0.2);
    border: solid;
    border-width: 1px;
    border-color: hsl(var(--bc) / 0.2);
}

.pickr .pcr-button:focus,
.pickr .pcr-button.pcr-active,
.custom-color-picker input:focus,
.custom-color-picker input.pcr-active,
.custom-color-picker button:focus,
.custom-color-picker button.pcr-active {
    /* Only keep the colored border, remove the white inner ring */
    box-shadow: 0 0 0 3px var(--pcr-color) !important;
}

/* To center the input numbers without taking into account the arrows*/
input[type="number"]::-webkit-inner-spin-button {
  position: absolute;
  right: 2px;
  height: 100%;
  cursor: pointer;
}

/* COLORS TEST*/

/*
PURPLE
    --b1: 254 83% 64%;
    --n: var(--b1);
    --p: 254 50% 90%;

RED
    --b1: 7 86.5% 60%; 
    --n: var(--b1); 
    --p: 7 50% 90%;

CYAN
    --b1: 180 60% 45%; 
    --n: var(--b1); 
    --p: 180 30% 85%;

ORANGE - Only for dark?
    --b1:24 95% 53%;
    --n: var(--b1);
    --p: 24 50% 86%;

BLUE
    --b1:221 83% 53%; 
    --n: var(--b1);
    --p: 221 70% 90%; 

INDIGO
    --b1: 240 60% 59.8%;
    --n: var(--b1);
    --p: 240 50% 90%;

GREEN
    --b1: 142 80% 35%;
    --n: var(--b1);
    --p: 110 50% 85%; 

BW
    --b1: 254 12% 10%;
    --n: var(--b1);
    --p: 254 12% 90%;
*/