* {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
 }


 a:link, a:visited {
    text-decoration: none;
    color: black;
   }
  
   a:hover {
    color: orange;
   }


   button {
    margin: 0 auto;
background-color: #00b51b;
border-radius: 6px;
border: 4px double #000000;
color: #020202;
text-align: center;
font-size: 12px;
padding: 5px;
cursor: pointer;
margin: 5% 20% 5% 20%;
font-weight: bold;
   }

   button a:link, a:visited {
      text-decoration: none;
      color: rgb(0, 0, 0);
     }
    
    button a:hover {
      color: orange;
     }

 .container {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 
    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0 auto;
    background-color: #f2f2f2;
    display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
}

#sonne
{
    max-width: 5%;
}

#pic1
{
    width: 100%;
    height: auto;
}

#pic2
{
    width: 100%;
    height: auto;
}

#pic3
{
    width: 50%;
    height: auto;
    text-align: center;

}

#pic4
{
    width: 50%;
    height: auto;
    text-align: center;

}

#pic5
{
    width: 50%;
    height: auto;
    text-align: center;

}

#pic6
{
    width: 50%;
    height: auto;
    text-align: center;
}

#pic7
{
    width: 100%;
    height: auto;
}

#pic8
{
    width: 100%;
    height: auto;
}

#pic9
{
    width: 50%;
    height: auto;
    float: left;
}

#pic10
{
    width: 50%;
    height: auto;
    float: left;
}

header{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    text-align: center;
}


nav{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    font-size: smaller;
    text-align: center;
}


figure{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}


.sec1{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
    text-align: center;
    margin: 5% 5% 5% 5%;
}


.sec2{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 5;
    grid-row-end: 6;
    text-align: center;
    margin: 5% 5% 5% 5%;
}


.sec3{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 6;
    grid-row-end: 7;
    text-align: center;
    margin: 5% 5% 5% 5%;
}


.sec4{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 7;
    grid-row-end: 8;
    text-align: center;
    margin: 5% 5% 5% 5%;
}


.art1{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 8;
    grid-row-end: 9;
    margin: 5% 5% 5% 5%;
}


.art2{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 9;
    grid-row-end: 10;
    margin: 5% 5% 5% 5%;
}


.art3{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 10;
    grid-row-end: 11;
    margin: 5% 5% 5% 5%;
}


.art4{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 11;
    grid-row-end: 12;
    margin: 5% 5% 5% 5%;
}


footer{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 12;
    grid-row-end: 13;
    text-align: right;
    background-color: rgb(229, 227, 227);
}


    @media screen and (min-width:600px)
    {
        .container {
         margin: 0 auto;
         background-color: #f2f2f2;
         display: grid;
             grid-template-columns: 50% 50%;
             grid-template-rows: auto;
        }

        #sonne
{
    max-width: 1.5%;
}

        #pic7
{
    width: 50%;
    height: auto;
    float: left;
}

#pic8
{
    width: 50%;
    height: auto;
    float: right;
}

    header{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }


    nav{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        font-size: xx-large;
        text-align: right;
        margin-right: 15px;
    }


    figure{
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }


    .sec1{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
    }


    .sec2{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
    }


    .sec3{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 5;
    }


    .sec4{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 4;
        grid-row-end: 5;
    }


    .art1{
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 5;
        grid-row-end: 6;
    }


    .art2{
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 6;
        grid-row-end: 7;
    }


    .art3{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 7;
        grid-row-end: 8;
    }


    .art4{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 7;
        grid-row-end: 8;
    }


    footer{
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 8;
        grid-row-end: 9;
        }
    }