body {
    background-color: #08041c;
    color: #a57bf4;
    font-family: Arial, sans-serif;
}



.grid {
    display: grid;
    grid-template-columns: repeat(8, 40px);
    grid-gap: 5px;
    margin-bottom: 20px; 
}

.pixel {
    width: 40px;
    height: 40px;
    background-color: #3a343c;
    cursor: pointer;
}





.btn-custom {
    background-color: #a708b6;
    border-color: #a708b6;
    color: #ffffff;
}

.btn-custom:hover {
    background-color: #8e0698;
    border-color: #8e0698;
    color: #ffffff;
}

.btn-custom:focus, .btn-custom:active {
    background-color: #75057d;
    border-color: #75057d;
    color: #ffffff;
}

#colorPicker {
    margin-bottom: 10px;
}

#intensityControl {
    width: 200px;
    margin-top: 10px;
}








@media (max-width: 720px) {
    .main-content {
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    .logo-parent{
        text-align: center;
    }
    

}