body {
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #222; /* Dark background */
    color: #fff; /* White text */
}

.container {
    text-align: center;
}

#colorPalette {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.colorBox {
    width: 100px;
    height: 100px;
    margin: 0 10px;
    /* Remove borders, rounded edges, and padding */
    border: none;
    border-radius: 0;
    padding: 0;
}

#generateButton {
    background-color: #333; /* Dark background color */
    color: #fff; /* Text color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Adjust padding */
    font-family: Courier New, monospace; /* Set font */
    border-radius: 5px; /* Add some border radius */
    cursor: pointer; /* Show pointer cursor on hover */
}

#generateButton:hover {
    background-color: #555; /* Darker background color on hover */
}

#clearSelectionButton {
    background-color: #333; /* Dark background color */
    color: #fff; /* Text color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Adjust padding */
    font-family: Courier New, monospace; /* Set font */
    border-radius: 5px; /* Add some border radius */
    cursor: pointer; /* Show pointer cursor on hover */
}

#clearSelectionButton:hover {
    background-color: #555; /* Darker background color on hover */
}