vk3cpu/magloop.css

body {
    background: rgb(201, 201, 201);
    margin: 0px;
}

header {
    background: black;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    font-size: smaller;
    text-align: center;
}

canvas.chartCanvasClass {
    background: rgb(255, 255, 255);
    margin: 0;
    border: 1px solid rgb(0, 0, 0);
    display: block; 
    box-sizing: border-box; 
}

section div.slider_container {
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(0, 0, 0);
    margin: 0px;
    padding: 0px;
    /*display: inline-block;*/
    box-sizing: border-box; 
    display: flex;
    flex-direction: column;
}

section div.antennaFront-container {
    width: 100%;
    height: 100%;
    display: block; 
    box-sizing: border-box; 
    margin: 0px;
    padding: 0px;
    background: white;
    border: 1px solid rgb(0, 0, 0);
    position: absolute;
}

section div.sliders {
    background:rgb(255, 255, 255);
    display: inline-block;
    font-size: small;
    margin: 0px;
    padding: 0px;
    width: auto;
    height: auto;
}

div label {
    background:white;
    display: inline-block;
    width: 12%;
    font-size: small;
    text-align: right;
}

div input {
    background:lightsalmon;
    display: inline-block;
    width: 60%;
}

section div.antennaSide-container {
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
    background: white;
    border: 1px solid rgb(0, 0, 0);
    position: absolute;
}

@media (orientation: portrait) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr) 150px 120px;
        justify-items: stretch;
    }

    section div.chart-container {
        grid-column-start: 1; 
        grid-column-end: 3; 
        grid-row-start: 1; 
        grid-row-end: 4;
        height: 85vh;
        width: 100vw;
    }
    
    section div.antennaFront-container {
        grid-column-start: 1; 
        grid-column-end: 2; 
        grid-row-start: 4; 
        grid-row-end: 5;
    }
    section div.antennaSide-container {
        grid-column-start: 2; 
        grid-column-end: 3; 
        grid-row-start: 4; 
        grid-row-end: 5;
    }
    section div.slider_container {
        grid-column-start: 1; 
        grid-column-end: 3; 
        grid-row-start: 5; 
        grid-row-end: 6;
    }
}    

@media (orientation: landscape) {
        section.gridLayoutClass {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr) 150px;
        justify-items: stretch;
    }

    section div.chart-container {
        grid-column-start: 1; 
        grid-column-end: 5; 
        grid-row-start: 1; 
        grid-row-end: 3;
        height: 85vh;
        width: 100vw;
    }
    
    section div.slider_container {
        grid-column-start: 1; 
        grid-column-end: 3; 
        grid-row-start: 3; 
        grid-row-end: 4;
    }
    section div.antennaFront-container {
        grid-column-start: 3; 
        grid-column-end: 4; 
        grid-row-start: 3; 
        grid-row-end: 4;
    }
    section div.antennaSide-container {
        grid-column-start: 4; 
        grid-column-end: 5; 
        grid-row-start: 3; 
        grid-row-end: 4;
    }
}