* {
    font-family: "Helvetica Neue",sans-serif;
}

body {
    background-color: darkgrey;
}

h1 {
    text-align: center;
}

label {
    display: inline-block;
    background-color: lightgray;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    padding-left: 0.5rem;
    width: calc(50% - 1rem);
}

gfa-test-plot-basic-xy {
    display: block;
    background-color: lightgray;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    width: 100%;
    height: 24vh;
}


/*---------------------------------------------------------------------- */
/* 1.0 SMALL DEVICES                                                     */
/*---------------------------------------------------------------------- */

@media (min-width: 0px) {

    .Header  { grid-area: Header;  overflow: hidden }
    .OpMsg   { grid-area: OpMsg;   overflow: hidden }
    .Aramis  { grid-area: Aramis;  overflow: hidden }
    .Athos   { grid-area: Athos;   overflow: hidden }
    .Plot1   { grid-area: Plot1;   overflow: hidden }
    .Plot2   { grid-area: Plot2;   overflow: hidden }
    .Plot3   { grid-area: Plot3;   overflow: hidden }
    .Plot4   { grid-area: Plot4;   overflow: hidden }
    .Plot5   { grid-area: Plot5;   overflow: hidden }
    .Plot6   { grid-area: Plot6;   overflow: hidden }

    .grid-container {
        display: grid;
        height: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 6vh 20vh 20vh 20vh 35vh 35vh 35vh 35vh 35vh 35vh;
        grid-gap: 1%;
        grid-template-areas:  'Header'
                              'OpMsg'
                              'Aramis'
                              'Athos'
                              'Plot1'
                              'Plot2'
                              'Plot3'
                              'Plot4'
                              'Plot5'
                              'Plot6';
    }

    html {
        font-size: 11px;
    }
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {

    .grid-container {
        display: grid;
        height: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 6vh 20vh 20vh 20vh 35vh 35vh 35vh 35vh 35vh 35vh;
        grid-gap: 1%;
        grid-template-areas:  'Header'
                              'OpMsg'
                              'Aramis'
                              'Athos'
                              'Plot1'
                              'Plot2'
                              'Plot3'
                              'Plot4'
                              'Plot5'
                              'Plot6';
    }
    html {
        font-size: 10px;
    }
}

/*---------------------------------------------------------------------- */
/* 2.0 TABLETS                                                           */
/*---------------------------------------------------------------------- */

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    html {
        font-size: 10px;
    }

    .grid-container {
        display: grid;
        height: 100%;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 5vh 14vh 13vh 20vh 20vh 20vh;
        grid-gap: 0.2rem;
        grid-template-areas:  'Header  Header'
                              'OpMsg   OpMsg'
                              'Aramis  Athos'
                              'Plot1   Plot4'
                              'Plot2   Plot5'
                              'Plot3   Plot6';
    }

    gfa-test-plot-basic-xy {
        height: 15vh;
    }
}

/*---------------------------------------------------------------------- */
/* 3.0 LARGE DEVICES                                                     */
/*---------------------------------------------------------------------- */

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    html {
        font-size: 12px;
    }

    .grid-container {
        display: grid;
        height: 100%;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 5vh 20vh 34vh 34vh;
        grid-gap: 0.2rem;
        grid-template-areas:  'Header Header  Header'
                              'OpMsg  Aramis  Athos'
                              'Plot1  Plot2   Plot3'
                              'Plot4  Plot5   Plot6';
    }

    gfa-test-plot-basic-xy {
        height: 26vh;
    }
}


/*---------------------------------------------------------------------- */
/* 5.0 LARGER DEVICES                                                    */
/*---------------------------------------------------------------------- */

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    html {
        font-size: 16px;
    }

    .grid-container {
        display: grid;
        height: 100%;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 5vh 20vh 35vh 35vh;
        grid-gap: 0.2rem;
        grid-template-areas:  'Header Header Header'
                              'OpMsg  Aramis  Athos'
                              'Plot1  Plot2  Plot3'
                              'Plot4  Plot5  Plot6';
    }
}