* {
    background-color: rgb(229, 255, 0);
}

.gridLine {
    display: flex;
}

.title {
    padding: 30px;
    text-align: center;
    font-family: 'Rubik Burned', system-ui;
    font-size: 64px;
}

.ui {
    display: flex;
    flex-direction: row;
}

.uicontrols {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
}

button {
    width: 120px;
    margin-top: 100px;
    margin-right: 30px;
    margin-left: 30px;
    background-color: rgb(255, 252, 194);
    font-size: 16px;
}

button:hover {
    background-color: aqua;
}

.container {
    margin: auto;
}

.gridCell {
    border: 0.5px double #000;
    outline: 0.5px solid rgb(0, 0, 0);
    outline-offset: -1px;
}

#slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#value-slider {
    margin-top: 30px;
}

#slider-value, #current-value {
    font-family: 'Rubik Burned', system-ui;
    font-size: 30px;
}

.colorSelect {
    display: flex;
    align-items: center;
    margin: auto;
}

.colourSquare {
    width: 30px;
    height: 30px; 
    margin: 10px;
}

#white {
    background-color: white;
}

#black {
    background-color: black;
}

#rainbow {
    background: linear-gradient(to bottom, violet, indigo, blue, green, yellow, orange, red);
}