:root {
    --width: auto;
    --height: auto;
}
main, .cp-sec {
    display: flex;
    width: max-content;
    margin: auto;
    justify-content: center;
    gap: 7px;
}
body {
    background-color: antiquewhite;
}
.cp {
    padding: 3px;
    border: 1px inset gray;
    border-radius: 5px;
    box-sizing: border-box;
    
}
h4 {
    margin: 7px 0 3px 0;
}
button[type="button"] {
    margin: auto 7px auto 7px;
    border-radius: 7px;
    border: 1px solid gray;
    cursor: pointer;
}
p {
    margin: 3px 0 1px 12px;
}
table {
    width: 100%;
    margin-top: 1px;
}
table, tr, th, td {
    border-collapse: collapse;
    border: 1px inset gray;
}
td {
    cursor: pointer;
}
.item select {
    max-width: 100px;
}
.cp-info {
    width: 380px;
    padding: 5px;
    border: 1px inset gray;
    border-radius: 5px;
    box-sizing: border-box;
}
code {
    font-weight: bold;
    white-space: nowrap;
    padding: 0px 5px;
    border: 1px inset gray;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1);
}
.p-info {
    text-indent: -12px;
    margin: 3px 0 1px 24px;
}
.parent {
    width: 360px;
    height: 360px;
    padding: 15px;
    box-sizing: border-box;
    background-color: aquamarine;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><text x="7" y="10" dominant-baseline="middle" text-anchor="middle">A</text></svg>');
    background-repeat: no-repeat;
}
.parent * {
    color: white;
    width: var(--width);
    height: var(--height);
}
.b {
    background-color: blue;
}
.c {
    background-color: red;
}
.d {
    background-color: green;
}
.e {
    background-color: black;
}
.f {
    background-color: blueviolet;
}
.g {
    background-color: darkmagenta;
}
.h {
    background-color: chocolate;
}
.i {
    background-color: saddlebrown;
}
.j {
    background-color: slategray;
}
.k {
    background-color: lightseagreen;
}
.l {
    background-color: teal;
}
.m {
    background-color: limegreen;
}
@media screen and (orientation: portrait) {
    main, .cp-sec {
        flex-direction: column;
        width: 100%;
    }
    .cp {
        width: 100%;
    }
    .item select {
        max-width: calc((88vw - 90px) / 4);
    }
    .cp-info, .parent {
        width: 100%;
    }
    .parent {
        height: 400px;
    }
    
    th {
        min-width: 50px;
    }
}