* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: helvetica, arial, sans-serif;
}



#app {
    display: grid; 
    grid-template-columns: 300px 1fr 300px;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}


#gui-left {
    background: #000000;

}

#gui-right {
    background: #000000;

}

#artboard {
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
}

.component {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    * {
        width: 100%;
    }

    input[type="range"] {
        height: 4px;
        border: 0;
        outline: none;
        background: #aaaaaa;
    }
}


input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -12px; /* Centers thumb on the track */
    background-color: #0000ff;
    height: 1rem;
    width: 1rem;    
    border-radius: 100%;
 }


 input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
    background-color: #0000ff;
    height: 1rem;
    width: 1rem;
    border-radius: 100%;
}

button {
    outline: none;
    border: 0;
    background: blue;
    color: white;
    height: 50px;
    cursor: pointer;
}

button:hover {
  background: red;
}


input,
textarea,
select,
button {
  width: 150px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

label {
    margin-bottom: 18px;
}

details {

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
  
  details > summary {
    padding: 10px;

    background-color: #0000ff;
    color: white;
    border: none;

    cursor: pointer;
  }

  details > summary:hover {
    background: red;
  }
  
  details > .details-inner {
    background-color: #ddd;
    padding: 10px;
    margin: 0;

  }
  
  details[open] > summary {
    background-color: #0000ff;
  }
  

  #artboard canvas {
    width: 100px;
    max-width: 500px;
    height: 500px;
    max-height: 500px;
  }

  .imageGallery-4 {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr;

    img {
      cursor: pointer;
    }
  }