html, body {
    margin: 0px;
    height: 100vh;
}
main {
    padding: 15px;
    background-color: indigo;
    display: flex;
    height: 100%;
    gap: 15px;
    flex-direction: column;
    box-sizing: border-box;
}
.color1 {
    background-color: rgb(241, 76, 76);
}
.color2 {
    background-color: rgb(31, 199, 199);
}
.color3 {
    background-color: rgb(236, 184, 11);
}
.color4 {
    background-color: darkorchid;
}
.box-100 {
    width: 100%;
    display: flex;
    gap: 15px;
    box-sizing: border-box;
}
.box-50 {
    width: 50%;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: stretch;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.alt-20 {
    height: 20%;
}
.alt-40 {
    height: 40%;
}
.alt-60 {
    height: 60%;
}