* {
    box-sizing: border-box;
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
}

html {
    padding-left: 20px;
    padding-right: 20px;
}

body {
  margin-left: auto;
  margin-right: auto;
  background-color: black;
}

.grid-container {
    width: 90%;
    max-width: 1024px;

    align-self: center;
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: "g_header"
                         "g_main"
                         "g_footer";
    align-content: stretch;
    justify-content: stretch;
}

header {
    width: 100%;
    min-height: 50px;
    padding: 20px;
    margin: 6px;
    min-width: 240px;
    width: 100%;
    background: #c0c0c0;
    color: #c0c0c0;
    border-radius: 12px;
    align-self: center;
    text-align: center;
}
main {
    grid-area: g_main;
    min-width: 240px;
}

header {
    grid-area: g_header;
    background: url('img/farbexplosion-800x140.jpg');  
}

footer {
    grid-area: g_footer;
}

.header_grid {
    display: grid;
    width: 100%;
    grid-template-columns: 50% 50%;
    grid-template-areas: "g_h1 g_h2";
    align-content: stretch;
    justify-content: stretch;
    gap: 4px;
}

.textcolor {
    background: white;
    opacity: 0.8;
    border-radius: 12px;
    box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75);
}

.textwhite {
	color: white;
}

.main_grid {
    display: grid;
    width: 100%;
    grid-template-columns: 50% 50%;
    grid-template-areas: 
        "g_m1 g_m2";
    align-content: stretch;
    justify-content: stretch;
    gap: 4px;
}

@media (max-width: 250px) 

{
  .header_grid {
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    grid-template-areas: "g_h1" "g_h2" "g_h3";
    align-content: stretch;
    justify-content: stretch;
    gap: 4px;
}

}

.footer_grid {
    display: grid;
    width: 100%;
    grid-template-columns: 50% 50%;
    grid-template-areas: "g_impress_1 g_impress_2";
    align-content: stretch;
    justify-content: stretch;
    gap: 4px;
}



section {
    min-height: 40px;
    padding: 5px;
    margin: 6px;
    width: 100%;
    background: #c0c0c0;
    color: #000000;
    border-radius: 12px;
    text-align: center;
}

article {
    min-height: 40px;
    padding: 10px;
    margin: 6px;
    float: left;
    clear: none;
    min-width: 250px;
    width: 98%;
    background: #c0c0c0;
    color: #000000;
    border-radius: 12px;
    box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75);
    justify-content: space-evenly;
    display: inline-block;
    text-decoration: none;
}

.art {
    min-height: 20px;
    padding: 10px;
    margin: 3px;
    float: left;
    clear: none;
    width: 300px;
    background: #c0c0c0;
    color: #000000;
    border-radius: 12px;
    box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75);
    justify-content: space-evenly;
    display: inline;
    text-decoration: none;
}

li {
    min-height: 12px;
    padding: 1px;
    margin: 1px;
    float: left;
    list-style-position: outside;
    min-width: 40px;
    width: 100%;
}

h1, h2, h3, p {
    margin-top: 0em;
    margin-right: 0em;
    margin-bottom: 0.5em;
    margin-left: 0em;
    padding: 0em;
  }

  h1 {
    margin-top: 1em;
    font-size: 28px;
    text-align: left;
    color: #003300;
  }

h2 {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 20px;
    text-align: left;
    color: #003300;
}

h3 {
    font-size: 14px;
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: left;
}

  p, li {
    text-align: left;
    font-size: 14px;
  }


a {
/*	text-decoration: none; */
	color: #000000;
}


/* mouse over link */
a:hover {
  color: blue;
}

.list1 {
	list-style-type: decimal;
}

.impress {
    text-align: left;
    font-size: 12px;
  }

pre {
    font-size: 14px;
}


.class_green {
    background: green;
}
.class_yellow {
    background: yellow;
}
.class_red {
    background: red;
}

.float-left {
        float: left;
        margin: 0.5rem;
    }

.float-right {
        float: right;
        margin: 0.5rem;
    }

.imgleft{
	float: left;
        margin: 0.5rem;
	border-radius: 50%;
	shape-outside: circle(42%);
	shape-margin: 1.75rem;
	box-shadow: 5px 5px 8px 3px rgba(0,0,0,0.75);
    }

/*    
#id_h1 {
    grid-area: g_h1;
    color: black;
    width: 100%;
    text-align: left;
    padding: 10px;
}
*/


#id_h1
 {
    grid-area: g_h1;
    color: #003300;
    width: 100%;
    text-align: center;
    padding: 10px;
}

#id_h2 {
    grid-area: g_h2;
    color: #003300;
    width: 100%;
    text-align: center;
    padding: 10px;
}

#id_h3 {
    grid-area: g_h3;
    color: #003300;
    width: 100%;
    text-align: center;
    padding: 10px;
}

#id_m1 {
    grid-area: g_m1;
}

#id_m2 {
    grid-area: g_m2;
}

#id_m3 {
    grid-area: g_m3;
}

#id_m4 {
    grid-area: g_m4;
}

#id_m5 {
    grid-area: g_m5;
}

#id_m6 {
    grid-area: g_m6;
}

#id_m7 {
    grid-area: g_m7;
}

#id_m8 {
    grid-area: g_m8;
}

#id_impress_1 {
    grid-area: g_impress_1;
    padding: 10px;
}

#id_impress_2 {
    grid-area: g_impress_2;
    padding: 10px;
}