body,
html {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

main {
    display: flex;
    padding: 15px;
    gap: 15px;
    flex-wrap: wrap;
    background-color: indigo;
    height: calc(100% - 30px);
}

.row {
    width: 100%;
    display: flex;
    gap: 15px;
    align-items: stretch;
}

.row:nth-child(1) {
    background-color: darkorchid;
    height: 33%;
}
.row:nth-child(2) {
    height: 65%;
}
.box-50 {
    width: 50%;
    flex-direction: column;
    align-items: stretch;
    display: flex;
    gap: 15px;
}

.box-50:nth-child(2) {
    background-color: rgb(31, 199, 199);
}

.tercio-100 {
    background-color: rgb(236, 184, 11);
    height: 75%;

}

.untercio-100 {
    background-color: rgb(241, 76, 76);
    height: 25%;
}

div {
    vertical-align: center;
    text-align: center;
}

p {
    text-align: center;
}