.site{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
/*      height: 100vh; */

/*      https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries */

}

/* default */
.site{
	color:white;
	background-color:black;
    display:grid;
    column-gap:20px;
    grid-template-columns: auto , auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "t t"
        "s s"
        "m1 d"
        "c c";
}
.text{
/* font styles */
}

#title{
        grid-area:t;
}
#svgArea{
        grid-area:s;
}
#mySVG{
		border: 2px silver;
		border-style: solid none;
}
#menu{
        grid-area:m1;
}
#description{
		padding: 5px;
        grid-area:d;
}
#copyright{
        padding-left: 1em;
        padding-right: 5em;
        grid-area:c;
}

@media(orientation:landscape){
        .site{
        grid-template-columns: 5fr 2fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
                "t t"
                "s m1"
                "s d"
                "c c";
        }
        #mySVG{
        	border-style: solid;
        	max-width:calc(100vh - 8em);
        }
        #svgArea{
        	padding-left:max(0px , (71vw - 100vh + 8em) / 2);
        }
}