body {
        background-color: rgb(30, 30, 30);
        color: white;
        font-family: sans-serif;
        margin: 20px;
    }

    /* Puts controls next to the canvas */
    .container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }

    /* Sidebar styling */
    .controls {
        display: flex;
        flex-direction: column;
        gap: 15px;
        min-width: 250px;
        background: rgba(255, 255, 255, 0.05);
        padding: 15px;
        border-radius: 8px;
    }

    .controls-color {
        display: flex;
        flex-direction: column;
        gap: 15px;
        min-width: 50px;
        background: rgba(255, 255, 255, 0.05);
        padding: 15px;
        border-radius: 8px;
    }

    .control-group h3 {
        margin: 5px 0 0 0;
        font-size: 0.9rem;
        font-weight: normal;
        color: #00ff2a;
    }

    input[type="range"] {
        width: 100%;
        cursor: pointer;
    }

    /* Align checkboxes and their text horizontally */
    .checkbox-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .checkbox-group h3 {
        margin: 0;
    }

    canvas {
        border: 2px solid #444;
        border-radius: 4px;
        background-color: rgb(15, 15, 15);
        resize: both;
        overflow: visible;
    }

    .colors-etc {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    gap: 100px;              
}

.reset-btn {
    width: 100%;           
    display: flex;
    justify-content: center; 
}

#reset-button {
    padding: 5px 10px;
}