* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    width: 100dvw;
    height: 100dvh;
    font-family: Arial, Helvetica, sans-serif;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}

main {
    overflow: hidden;
}

main[data-style="horizontal"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

main[data-style="vertical"] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

main > section {
    overflow: hidden;
}

main > section.debug {
    overflow: hidden;
    
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
}
.primaryCanvas, .secondaryCanvas {
    width: 100%;
    height: 100%;

}
canvas.primaryCanvas {
    border: 2px solid red;
}

canvas.secondaryCanvas {
    border: 2px solid greenyellow;
}