* {
    padding: 0;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: #cecece;
    caret-color: transparent;
}

.header {
    width: 100vw;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: inherit;
    height: 25rem;
    display: flex;
}

.container > div {
    flex: 1;
}

.container > .grid-container {
    flex: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-container > .grid {
    width: 90%;
    height: 90%;
    background-color: #fff;
    box-shadow: 0 0px 13px rgb(18, 15, 9);
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.container > .control-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.color-container {
    width: 5em;
    height: 5em;
    margin: 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(4, 4, 4, 0.981);
}

.color-container > .color-box {
    width: 200%;
    height: 200%;
    border: none;
    translate: -40px -40px;
}

#box-range {
    accent-color: black;
}

#slider-value {
    font-weight: 900;
}

button {
    height: 2.5rem;
    width: 160px;
    border-radius: 8px;
    cursor: pointer;
    font-family: cursive;
    font-weight: 900;
}

.active {
    color: #fff;
    background-color: rgb(0, 0, 0);
}

:where(.color-container,button):hover {
    scale: 1.1;
}

/* Things learned in this project
1. Precise value
block.getBoundingClientRect().width; gives more precise answer than
block.clientWidht(). In simple words it gives value upto floating points number

2. To Fixed
parseFloat(WIDTH / inputValue).toFixed(4); 
It will give 4 floating point number with the 4th number round off and return as a string so parse Float is used to convert string to float
*/