* {
    box-sizing: border-box;
    background-color: bisque;
}

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1%;
}

#sketch {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#tools {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

#tools button {
    padding: 10px;
    border-radius: 15px;
}

#tools button:hover {
    transform: translateY(-2px);
    box-shadow: 3px 3px grey;
}

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

.pixel {
    width: 25px;
    height: 25px;
    border: 1px solid lightgrey;
}

.pixel:hover {
    background-color: rgb(237, 237, 237);
}

#colors * {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 3px solid white;
    background-color: black;
}

#colors button {
    background-color: black;
}

#colors *:hover {
    transform: translateY(-1px);
}

.color-picker {
    background-color: black;
}