* {
    margin: 0;
    padding: 0;
}

.color-switcher .block {
    height: 200px;
    width: 200px;
}

.color-btn.active {
    border-radius: 30%;
    color: aqua;
}

.delete-btn {
    margin: 5px 10px; 
    height: 20px; 
    width: 50px;
}

.overlay {
    opacity: 0;
    background: black;
    transform: scale(0.8);
    transition: opacity 200ms ease, transform 200ms ease;
}

.modal {
    opacity: 0;
    background: white;
    transform: scale(0.8);
    transition: opacity 200ms ease, transform 200ms ease;
}

.overlay.active {
    position: absolute;
    opacity: 0.8;
    inset: 0;
    background: black;
    transform: scale(1.0);
    display: flex;
}

.modal.active {
    margin: auto;
    opacity: 1;
    width: 300px;
    height: 500px;
    transform: scale(1.0);
    display: flex;
    justify-content: center;
    justify-items: center;
    text-align: center;
}

.back-btn {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 200ms ease,  transform 200ms ease;
}

.back-btn.active {
    opacity: 1;
    transform: scale(1.0);
    height: 30px;
    margin: auto;
}