* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}


.container {
    display: grid;
/*    height: 100vh;*/
/*    height: 100dvh;*/
    height: 100svh;


    grid-template-columns: 1fr 0.2fr 1fr 3fr 1fr 0.2fr 1fr ;
    grid-template-rows: 0.8fr 30px 5fr 25px;
    grid-template-areas: 
        " sidecolumn_left sidegap_left logogap_left     logo    logogap_right   sidegap_right sidecolumn_right"
        " sidecolumn_left sidegap_left nav              nav     nav             sidegap_right sidecolumn_right"
        " sidecolumn_left sidegap_left main             main    main            sidegap_right sidecolumn_right"
        " sidecolumn_left sidegap_left footer           footer  footer          sidegap_right sidecolumn_right";
/*    grid-column-gap: 5%;*/

}

.sidecolumn_left {
    grid-area: sidecolumn_left;
}

.sidecolumn_right {
    grid-area: sidecolumn_right;

}
.logogap_left {
    grid-area:logogap_left;
}

.logogap_right {
    grid-area:logogap_right;
}

.logo {
    grid-area:logo;
}

nav {
    grid-area: nav;

}

main {
    grid-area:main;

}

footer {
    grid-area:footer;

}

@media only screen and (max-width:1000px){
    .container {
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-rows: 0.8fr 30px 5fr auto;
        grid-template-areas: 
            " logogap_left     logo    logogap_right"
            " nav              nav     nav          "
            " main             main    main         "
            " footer           footer  footer       ";
    }
}

@media only screen and (max-width:600px){
    .container {
/*        height: auto;*/
        grid-template-columns: 1fr;
        grid-template-rows: 0.8fr auto 5fr auto;
        grid-template-areas: 
            "logo"
            "nav"
            "main"
            "footer";
    }
}