.container {
    width: 400px;
    height: 400px;
    display:flex;
    flex-wrap:wrap;
    background-image: url("https://i.pinimg.com/originals/92/17/a8/9217a86945b10b32d03b1ae913d4af14.jpg");
    background-position: center;
}

.box {
    width: 200px;
    height: 200px;
    display:flex;
    flex-wrap:wrap;
}

.miniBoxRed {
    width: 100px;
    height: 100px;
    background:darkred;
}

.miniBoxBlue {
    width: 100px;
    height: 100px;
    background:cadetblue;
}

.miniBoxViolet {
    width: 100px;
    height: 100px;
    background:blueviolet;
}

.miniBoxGreen {
    width: 100px;
    height: 100px;
    background:darkgreen;
}

.modal {
    background: snow;
    text-align: center;
    width: 480px;
    height: 200px;
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 240px);
    display: none;
}

.modal.active {
    display: block;
}

.modal-title {
    padding: 1em;
    color: white;
    background: yellowgreen;
}

.modal-active {
    background: rgba(0, 0, 0, 0.5);
}

.transparent-active {
    background:transparent;
}

.hide-active {
    visibility: hidden
}

button {
    padding:5px;
    margin:3px;
    border:1px solid black;
}

.miniRed button {
    background:darkred;
    color:white;
}

.miniBlue button {
    background:cadetblue;
    color:white;
}

.miniViolet button {
    background:blueviolet;
    color:white;
}

.miniGreen button {
    background:darkgreen;
    color:white;
}