#root {
    background-color: #0F0F0F;
    width: 100%;
    height: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: flex-start;
    align-items: stretch;
}

#root .red {
    width: 100%;
    height: 9%;
    background-color: red;
    align-self: stretch;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: flex-start;
    align-items: stretch;
}

#root .green {
    width: 9%;
    height: 100%;
    align-self: stretch;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: flex-start;
    align-items: stretch;
    background-color: green;
}

#root .blue {
    background-color: blue;
    width: 100%;
    height: 9%;
    align-self: stretch;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: flex-start;
    align-items: stretch;
}

#root .purple {
    background-color: #2e002e;
    width: 9%;
    height: 100%;
    align-self: stretch;
}