html  {
    overflow: hidden;
    overscroll-behavior: none;
}

#wrapper {
    height: 100dvh;
    position: absolute;
    width: 100dvw;
}

#sketch-scene {
    box-sizing: border-box;
    display: grid;
    gap: var(--window-margin);
    grid-template:
        "brush . ." var(--nav-allowance)
        "brush . reset" 37px
        "brush . changes" 20px
        "color-picker . layer-handler" 20px
        "color-picker canvas-caption layer-handler" 1fr / 1fr 4fr 1fr;
    height: 100%;
    overflow: hidden;
    padding: var(--window-margin) var(--window-margin) calc(3*var(--window-margin)) var(--window-margin);
    width: 100%;
}

@media screen and (max-width: 600px) {
    #sketch-scene {
        grid-template:
        "brush . ." var(--window-margin)
        "brush . reset" 37px
        "brush . changes" 20px
        "color-picker . layer-handler" 20px
        "color-picker canvas-caption layer-handler" 1fr / 1fr 4fr 1fr;
    }
}

#color-picker {
    display: flex;
    flex-direction: column;
    gap: var(--window-margin);
    grid-area: color-picker;
    z-index: 2;
}

.color-palette {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    display: none;
    grid-template-columns: repeat(3, 17px);
    grid-template-rows: repeat(auto-fill, 17px);
    padding: var(--window-margin);
    height: fit-content;
    justify-content: center;
}

.color-palette.open {
    display: grid;
}

.color-palette .color-choice {
    border: none;
    border-radius: var(--border-radius);
    height: 16px;
    width: 16px;
    box-shadow: 0px 0px 17px 0px #373737;
}

.color-palette .button-wrapper {
    border: none;
    border-radius: 0px;
    width: 0px;
}

#drawingToolKit {
    grid-area: tools;
    display: flex;
    flex-direction: column;
    z-index: 2;
}


#drawing-canvas {
    display: grid;
    grid-template: "main" 1fr / 1fr;
    grid-auto-flow: dense;
    position: absolute;
    z-index: 2;
}

#brush {
    border-radius: var(--border-radius);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--window-margin);
    grid-area: brush;
    grid-template: "gui" 1fr / 1fr;
    justify-content: flex-end;
    z-index: 3;
}

#brush input {
    border: none;
    width: 50px;
}

#brush label {
    color: var(--text-color);
    font-size: 12px
}

#brush-controls {
    display: grid;
    grid-template: "main" 1fr / 1fr;
}

#brush-controls-ux {
    grid-area: main;
    z-index: 2;
}

#brush-controls-background {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    grid-area: main;
    height: auto;
    padding: var(--window-margin);
    width: 100%;
    z-index: 1;
}

#brush-selector {
    display: flex;
    gap: var(--window-margin);
    width: 18px;
}

#brush-selector button {
    flex-grow: 1;
}

#brush-selector button.active {
    background-color: var(--background-color-inverse);
}

#color-choice {
    align-items: center;
    display: flex;
    gap: var(--window-margin);
}

#main-color-choice {
    z-index: 1000;
}


#main-color-choice .button-wrapper {
    border-radius: 50%;
    border: 1px solid var(--border-color);
    height: 9px;
    width: 9px;
}

#color-universe {
    display: grid;
    grid-gap: var(--window-margin);
    grid-template: "gradient" 1fr "slider" 14px / 1fr;
    height: fit-content;
    overflow: hidden;
    width: fit-content;
}

#color-universe-gradient {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    grid-area: gradient;
}

#color-ring {
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    grid-area: gradient;
    height: 10px;
    opacity: 0.8;
    pointer-events: none;
    position: relative;
    transition: translate 0.2s ease;
    width: 10px;
    z-index: 1000;
}

#color-slider {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: grid;
    box-sizing: border-box;
    height: 14px;
    grid-area: slider;
    grid-template: "slider" 1fr / 1fr;
    overflow: hidden;
}

#color-slider .slider {
    border: 2px solid white;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    grid-area: slider;
    height: 14px;
    position: relative;
    width: 14px;
    z-index: 2;
}

#color-slider .slider-background {
    grid-area: slider;
    height: 14px;
    width: 66px;
    z-index: 1;
}

#brush-params {
    display: flex;
    gap: var(--window-margin);
}

#smoothing-params {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    display: none;
    padding: var(--window-margin);
    position: absolute;
    transform: translate(44px, 0px);
}

#smoothing-params.open {
    display: flex;
    flex-direction: column;
}

#eye-dropper-button .button-wrapper {
    display: flex;
    justify-content: center;
    padding: 3px 0px;
    width: 100%;
}

#view-layers-lever {
    position: absolute;
    transform: translate(-59px, 15px) rotate(-90deg);
    transition: transform 0.5s ease;
}

#view-layers-lever .button-wrapper {
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}


#drawing-layer-handler{
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: var(--window-margin);
    grid-area: changes;
    height: fit-content;
    justify-self: flex-end;
    padding: var(--window-margin);
    transform: translate(126px, 150px);
    transition: transform 0.5s ease;
    z-index: 2;
}

#drawing-layer-handler.open {
    transform: translate(-1px, 150px);
}


#canvas-caption {
    align-self: end;
    grid-area: canvas-caption;
    height: fit-content;
    justify-self: center;
    text-align: center;
    opacity: 0.3;
}

#add-layer-btn .button-wrapper {
    width: 100%;
}

#add-layer-btn {
    text-align: center;
    font-size: 13px;
    width: 100%;
}

.layer-view {
    display: grid;
    grid-template: "main" 1fr / 1fr;
    min-height: 64px;
    justify-content: space-between;
    width: 100px;
}


.layer-view img {
    opacity: 0.7;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    grid-area: main;
    height: 100%;
    width: 100px;
    transform: opacity 0.5s ease-in;
}

.layer-view.active img {
    opacity: 1;
}

.layer-view .pty-button {
    background-color: var(--background-color);
    box-sizing: border-box;
    font-size: 8px;
    grid-area: main;
    height: 100%;
    justify-self: flex-end;
    z-index: 2;
}

#layer-view-container {
    display: flex;
    flex-direction: column;
    gap: var(--window-margin);
    width: 100px;
}

#reset-view-button {
    grid-area: reset;
    height: fit-content;
    justify-self: end;
    z-index: 2;
}


#drawing-canvas .canvas-wrapper {
    display: grid;
    grid-area: main;
    height: fit-content;
    width: fit-content;
    grid-template: "main" 1fr / 1fr;
}

.art-canvas {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    grid-area: main;
    position: relative;
    z-index: 1;
}

.art-canvas-shadow {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    grid-area: main;
    position: relative;
    z-index: 2;
}


#color-extractor-controller.active #color-extractor {
    display: block;
}

#color-extractor {
    border: 1px solid var(--border-color);
    border-radius: 70% 70% 100% 100%;
    display: none;
    height: 25px;
    position: absolute;
    transform: translate(0px, -50px);
    width: 25px;
}


#color-extractor-controller.active {
    height: 100dvh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100dvw;
}


#sketch-scene .change-btns {
    background: none;
    grid-area: changes;
    justify-self: end;
    z-index: 2;
}

/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
     width: 15rem;
 }
 
 /* Removes default focus */
 input[type="range"]:focus {
   outline: none;
 }
 
 /***** Chrome, Safari, Opera and Edge Chromium styles *****/
 /* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--border-color);;
    border-radius: 0.5rem;
    height: 0.5rem;  
 }
 
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -0.25rem; /* Centers thumb on the track */
 
    /*custom styles*/
    background-color: var(--border-color);
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {   
   border: 1px solid var(--border-color);;
   outline: 3px solid var(--border-color);;
   outline-offset: 0.125rem; 
 }
 
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
    background-color: var(--border-color);;
    border-radius: 0.5rem;
    height: 0.5rem;
 }
 
 /* slider thumb */
 input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
 
    /*custom styles*/
    background-color: var(--border-color);
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
 }
 
 input[type="range"]:focus::-moz-range-thumb {
   border: 1px solid var(--border-color);;
   outline: 3px solid var(--border-color);;
   outline-offset: 0.125rem; 
 }