/* Resetting default margin and padding to 0 and including border-box for better box sizing */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/* Setting height and width of html and body to 100% */
html,body {
    height: 100%;
    width: 100%;
}

/* Centering the content vertically and horizontally using flexbox */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: linear-gradient(to bottom, #bed6e5, #3ca1e4); */
    background-image: linear-gradient(45deg, #3498db 25%, transparent 25%, transparent 75%, #3498db 75%, #3498db),
                    linear-gradient(-45deg, #3498db 25%, transparent 25%, transparent 75%, #3498db 75%, #3498db);
    background-size: 20px 20px;
    background-color: #ecf0f1;
}

/* Styling for the container holding the buttons and grid */
#container {
    display: flex;
    flex-direction: column;
    border: 5px solid #2c3e50; 
    height: 750px;
    width: 750px;
    background: linear-gradient(to bottom, #d8edfb,#bed6e5); 
}

/* Styling for the button container */
#button {
    height: 100px;
    width: 750px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* Styling for the grid container */
#box {
    display: flex;
    justify-content: center;
}

/* Styling for the grid itself */
#gridBox {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #2c3e50; 
    height: 650px;
    width: 650px;
    position: relative;
    overflow: hidden;
}

/* Styling for the color picker and buttons */
#color{
    display: flex;
    justify-content: space-around;
    width: 60%;
}
#buttons {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 80%;
}

/* Styling for the individual color sliders */
#red{
    display: flex;
}
#green{
    display: flex;
}
#blue{
    display: flex;
}

/* Styling for the preview box of selected color */
#colorBox{
    border: 1px solid #2c3e50; 
    height: 20px;
    width: 20px;
}