@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --black:#111111;
    --grey:#222222;
    --grey-light:#dedede;
}

html, body { padding:0;margin:0;background:var(--black);color:var(--grey-light);font-weight:300;font-family:"Jost", sans-serif; }
/*body { padding:0;margin:0;background: linear-gradient(to top left,rgba(240,216,168,1), rgba(168, 192, 150, 1));background: linear-gradient(to top left, rgba(240,216,168,1), rgba(168, 192, 150, 0), rgba(168, 192, 150, 1)), linear-gradient(to top right, rgba(240,192,72,1), rgba(240,192,72,0), rgba(192,96,23,1)) rgba(192,96,23,1); background-repeat: no-repeat;
    background-attachment: fixed;font-family:sans-serif; }
    body { background:#fff; }*/

p { line-height:1.4rem; }
  .draggable {
      cursor: move;
    }

h1 { color:#fff;font-weight:300; }
form { text-align:center;width:100%;max-width:400px;margin: 0 auto 30px; }
form input[type="button"] { display: block;margin: 0 auto;color: #fff;font-weight: 200;border-radius: 5px;background:none;border:1px solid #fff;padding:10px 20px;margin-top:30px;font-size:1rem; }
form input[type="button"]:hover { background:#fff;color:var(--black); }

.palette-image { width:100%;margin:0 auto;display:block; }
.preview-box { width:100%;max-width:600px;margin:0 auto; }
.main { text-align:center; }
.colour-blocks { width:100%;display:flex; }
.colour-blocks > div { height:50px;width:50px;display:inline-block;flex:1 1 auto; }
.palette-box { aspect-ratio:1/1;display:block;width:50px; }

table { margin:60px auto;text-align:center;width:100%;border-collapse:collapse;table-layout:fixed; }
td { padding:20px 10px; }
th { padding-bottom:15px; }

 
        .upload-area {
            width: 100%;
            max-width: 400px;
            height: 100px;
            border: 2px dashed #cccccc;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Arial, sans-serif;
            color: #cccccc;
            margin: 0 auto;
            cursor: pointer;
        }
        .upload-area.dragging {
            border-color: #6666ff;
            color: #6666ff;
        }
        .hidden {
            display: none;
        }
 

  
       
.slider-container {
            width: 100%;
            height: 40px;
            position: relative;
             border-radius: 20px;
             overflow:hidden;
                background: var(--grey);
                padding-left:30px;
                margin-top:10px;
        }
        #numResultsSlider {
            -webkit-appearance: none;
            width: 100%;
            height: 40px;
           
            background:transparent;
            outline: none;
            transition: opacity .2s;
            position: relative;
            z-index: 1;
            margin:0;
        }

        #numResultsSlider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--grey-light);
            cursor: pointer;
            position: relative;
            z-index: 2;
        }
        #numResultsSlider::-moz-range-thumb {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--grey-light);
            cursor: pointer;
            position: relative;
            z-index: 2;
        }
        #numResultsSlider::-webkit-slider-runnable-track {
            width: 100%;
            height: 40px;
            border-radius: 20px;
        }
        #numResultsSlider::-moz-range-track {
            width: 100%;
            height: 40px;
            border-radius: 20px;
            background: #ddd;
        }
        .slider-fill {
            position: absolute;
            height: 100%;
            background: var(--black);
            z-index: 0;
            pointer-events: none;
            width:50%;
        }

        #sliderValue { position:absolute;top:0;left:0;z-index:3;color:#000;width:40px;height:100%;background:var(--grey-light);text-align:center;padding-top:10px;font-weight:bold;padding-left:2px; }