/* ---------------------------------------------------------------------------------------------------------*/
/* Die folgende Definition der Variablen habe ich in den header-Teilvon index.html verlagert:
:root {
	--head-height: 5em;
	--main-height: 938px;
	--use-height: auto;
	--foot-height: 3em;
	--main-width: 1824px;
	--info-width: 500px;
}
*/
/* Hier übrigens ein Hinweis: CSS-Variablen können in JavaScript mit der setProperty-Methode geändert werden */
/* ---------------------------------------------------------------------------------------------------------*/
/* Hier noch ein anderes Beispiel:
:root {
  --bg-color: #fff;
  --text-color: #000;
}

[data-theme="dark"] {
  --bg-color: #000;
  --text-color: #fff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Mit JavaScript kannst du den Modus umschalten:
document.documentElement.setAttribute('data-theme', 'dark');
*/
/* ---------------------------------------------------------------------------------------------------------*/

body {
	height: 100vh;
	margin: 0;
	display: grid;
	grid:
		"head head" var(--head-height)         /* Zeile 1: zwei Bereiche und Höhe der Zeile */
		"info main" var(--main-height)         /* Zeile 2: zwei Bereiche und Höhe der Zeile */
		"info use" var(--use-height)           /* Zeile 3: zwei Bereiche und Höhe der Zeile */
		"foot foot" var(--foot-height)         /* Zeile 4: zwei Bereiche und Höhe der Zeile */
		/ var(--info-width) var(--main-width); /* Breite der zwei Spalten */  
	align-content: space-evenly;
	/*position: relative;*/
	position: absolute;
/*	justify-content: center;*/
}

#-grid-container {
  display: grid;
  grid-template-areas:
  'header header'
  'info main'
  'info usage'
  'footer footer';
  grid-template-rows: 5em 1fr 1fr 5em;
  grid-template-columns: 1fr 4fr;
  /*grid-gap: 10px;*/
  background-color: #2196F3;
  /*padding: 10px;*/
}

#header {
	background-color: rgb(200,150,150);
	grid-area: head;
	border: 1px solid;
}
#info {
	background-color: rgb(170,170,200);
	grid-area: info;
	padding: 10px;
	border: 1px solid;
}
#usage {
    background-color: yellowgreen;
	grid-area: use;
	padding: 10px;
	border: 1px solid;
}
#main {
	background-color: lightblue;
	grid-area: main;
	padding: 10px;
	border: 1px solid;
}
#footer {
	background-color: mediumpurple;
	grid-area: foot;
	border: 1px solid;
}

h2,h3 {
	/*adding: 0px 10px 10px 10px;*/
	text-align: center;
}

/*p, h1 {
	color: rgb(14, 14, 75);
}
*/

/*p {
	background-color: rgb(237, 245, 243);
/*	background-image: url("../../images/TulipNebula_SHO_pugh1024.jpg"); */
/*	background-repeat: no-repeat; */
/*	background-position: bottom right; */
/*	background-attachment: fixed; */
	/*text-align: justify;*/
	/*text-indent: 50px;*/
	/*letter-spacing: 1px;*/
	/*line-height: 1.5;*/
/*	font-family: "Lucida Console", "Courier", Serif, Sans-serif, Monospace;
    /*opacity: 0.2;*/
/*}

}

p {
	z-index: 1;
}

.para1 {
	background-color: blue;
}

a:link, a:visited {
	background-color: #999999;
	color: green;
	padding: 5px 5px 5px 6px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-style: solid;
	height: 200px;
	float: right;
}
a:hover {
	font-size: 25px;
	background-color: green;
	color: #bbb;
}
a:active {
	font-size: 128px;
}
*/