/*TOOL BUTTONS*/

body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    overflow: hidden;
    background: rgb(62, 62, 62);
}

h1 {
    background: #7F7FD5;
    background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
    background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}

.container {
    /*height: 60%;
    padding-top: 7%;*/
    display: flex;

}

#toolbar {
    display: flex;
    flex-direction: column;
    padding: 5px;
    width: 70px;
    box-shadow: 5px 5px 5px 5px #000000; /* h-offset v-offset blur spread color */
    background: #d5a8e6;
    background: linear-gradient(141deg,rgba(213, 168, 230, 1) 0%, rgba(235, 228, 242, 1) 28%, rgba(189, 187, 235, 1) 36%, rgb(94, 139, 178) 99%);
    border-image: linear-gradient(to left, #dbe5e4, #6f6f6f, #222222) 1;
    border-width: 3px;
    border-style: solid;
    /** border-radius: 0px 10px 10px 0px;*/

}

#toolbar * {
    margin-bottom: 10%;
}

#toolbar label {
    font-size: 10px;
}

#toolbar input {
    width: 100%;
}

#toolbar button {
    border: none;
    border-radius: 4px;
    color:rgb(241, 241, 241);
    padding: 2px;
}

#toolbar #text{
    font-size: 30px;
}

.toolButtons{
    background-color: rgb(163, 163, 163);
    background: linear-gradient(120deg,rgb(59, 31, 31) 0%, rgb(106, 105, 108) 28%, rgb(40, 40, 52) 36%, rgb(17, 20, 23) 30%);
}

/**LAYERS**/

#layers {
    z-index: 3;
    max-width: 100%;;
    width: 7%;
    height: 40vh;
    position: absolute;
    flex-direction: column-reverse;
    justify-content: space-around;
    padding-left: 2px;
    margin-right: 5px;
    overflow-y: auto;
    right: 5%;
    bottom: 8%;
    background: #d5a8e6;
    background: linear-gradient(141deg,rgba(213, 168, 230, 1) 0%, rgba(235, 228, 242, 1) 28%, rgba(189, 187, 235, 1) 36%, rgba(104, 158, 212, 1) 99%);

}

.layerImage {
    width: 70%;
    height: 15%;
    margin-bottom: 3%;
    margin-left: 10%;
    position: sticky;
    margin-right: 10%;
    background-color: white;
    float: right;
}


.eye {
   vertical-align: middle;
}

.visible {
    max-width: 100%;
    width: 100%;
    height: 2vh;
}



.addLayers {
    max-width: 100%;
    height: 2vh;
}

/*
1. First, move layer image to the bottom
2. Add every layer on top like a stack
3. Include a scroll bar if necessary
*/




.highlight{
    border-color: green;
    border-style: solid;
    border-width: 2px;
}

#drawing-board{
    position: absolute;
    background-color: rgb(255, 255, 255);
}

#drawing-board-div{
    position: relative;
    top: 10%;
    right: 5%;
    left: 20%;
}

/*SLIDER*/

#lineWidth {
 -webkit-appearance: none;
 appearance: none;
 box-shadow: black;
  width: 30%;
  height: 1%;
  background: #ffffff;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

#lineWidth::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: round;
  width: 15px;
  height: 15px;
  background: #000000;
  cursor: default;
}

.filtered {
  filter: invert(43%) sepia(81%) saturate(2000%) hue-rotate(300deg) brightness(95%) contrast(101%);
}

.no-pointer-events {
  pointer-events: none !important; /* !important ensures this style takes precedence */
}