body {
  text-align: center;
}

main {
        background-color: #f7f7f7;
        border-radius: 1.5em;
        margin-top: 2em; 
}

nav {
	display: flex;
	flex-flow: row wrap;
        background-color: #eee;
        border-radius: 1.5em; 
}

nav > p {
  text-align: center;
  width: 5em;
}

@media (max-width: 50em) { 
  .profilbild {
    width: 100%;
  }
}

.flex-container {
	display: flex;
	flex-flow: row wrap;
}

.flex-container > p {
  text-align: center;
  margin: 10px
}


.grid-container {
   text-align: center;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-column-gap: 1em;
   max-width: 20em;

}

.col1 {
  grid-column: 1;
}

.col2 {
  grid-column: 2;
}

.col3 {
  grid-column: 1;
}

.col4 {
  grid-column: 2;
}

.col12 {
  grid-column: 1 / span 2;
}

.col34 {
  grid-column: 1 / span 2;
}

@media (min-width: 50em) { 
  .grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-auto-flow: dense;
  }

 .col1 {  grid-column: 1; }

 .col2 {  grid-column: 2; }

 .col3 {  grid-column: 3; }

 .col4 {  grid-column: 4; }

 .col12 {  grid-column: 1 / span 2; }

 .col34 {  grid-column: 3 / span 2; }



}