body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: rgb(63, 161, 251);
    background: linear-gradient(
        142deg,
        rgba(63, 161, 251, 1) 0%,
        rgba(252, 70, 168, 1) 100%
    );
    overflow: hidden; /* Disables scrolling */
}

.container {
    text-align: center;
}

canvas {
    border: 1px groove #000;
    border-radius: 10px;
}

.color-palette {
    margin-top: 10px;
}

.color {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 5px;
    cursor: pointer;
}

button {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}


#wrapper {
    margin: auto;           
}

input[type="range"] {
    /* To remove default styles appplied by webkit browsers */
    -webkit-appearance: none; 

    width: 25em;
    background: transparent;
    position: relative;
}   

input[type="range"]:focus {
    /* To remove default (mostly blue) outline appplied by browsers on :focus */
    outline: 0;
}

/* SLIDER THUMB -> represented by the orange ball in the design */
/* Webkit based browsers (chrome, opera, ...) */
input[type="range"]::-webkit-slider-thumb {
     /* Removes the default styling */
    -webkit-appearance: none;

    width: 3em;
    height: 3em;
    margin: .5em 0;
    background: hsl(669, 100%, 66%);
    border-radius: 100%;

    /* The inset shadow gives depth and makes the thumb look 3 dimensional and the other one shows a subtle effect of the shadow it creates because of the light source coming from the top left of the page */
    box-shadow: 
                inset .8em .8em 5px -8px rgba(255, 255, 255, .4),
                inset -.4em -.4em 10px -3px rgba(0,0,0,.2),
                0.7em 0.5em 7px -0.5em rgba(0,0,0,.4);;

    cursor: pointer;
}

/*All the same stuff for firefox */
input[type=range]::-moz-range-thumb {
    width: 3em;
    height: 3em;
    margin: .5em 0;
    background: #fd8421;
    border-radius: 100%;
    box-shadow: 
                inset .8em .8em 5px -8px rgba(255, 255, 255, .4),
                inset -.4em -.4em 10px -3px rgba(0,0,0,.2),
                0.7em 0.5em 7px -0.5em rgba(0,0,0,.4);
    cursor: pointer;
    border: 0;
}


/* RUNNABLE TRACK -> represented by the indented carve in which the ball (thumb) moves */
/* Webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    width: 100%;
    height: 4em;
    padding: 0 1em;
    border-radius: 2em;

    /* These shadow are what create the skeumorphic indent on the track. The first one is dark to show places in the indent that light don't reach and the second one shows places where light meets thereby creating the illusion of depth */ 
    box-shadow: 
                inset .6em 1em 10px rgba(0,0,0,.15),
                inset -.6em -1em 10px rgba(255, 255, 255, .415);
}
/* For firefox */
input[type=range]::-moz-range-track {
    background: transparent;
    width: 100%;
    height: 4em;
    padding: 0 1em;
    border-radius: 2em;
    box-shadow: 
                inset .6em 1em 10px rgba(0,0,0,.15),
                inset -.6em -1em 10px rgba(255, 255, 255, .415);
}

/* For the numbering in the range's design - doesn't show on firefox but shows on chrome and opera */
input[type="range"]::before {
    content: "";
    position: absolute;
    text-align: center;
    color: #c4c4c4;
    font-size: 1em;

    /*Serves to spread the letters to fit the whole width of the track */
    letter-spacing: .65em;

    top: 0; bottom: 0;
    left: 0; right: 0;
    padding: 1.6em;

    /* Makes the letters look embossed adding to the skeumorphic theme of the design */
    text-shadow: .5px .5px 0.9px rgba(0,0,0, .4);

    z-index: -1;
}


/* The modal (hidden by default) */
.modal {
  display: none; /* Hidden initially */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* dark overlay */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Modal content box */
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  min-width: 300px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-content .image-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.2s ease;
}

.thumbnail:hover {
    border: 2px solid #333;
}