@charset "UTF-8";
/* CSS Document */

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

html, body {
	min-height:100%
    height:  100%;
      }
	  
body {
        font-size: 1.0em;
        font-family: arial,sans-serif;
		display: flex;
        flex-direction: column;
        align-items: center;
       
        
      }

a {
        padding: 0 15px;
        text-decoration: none;
        text-align: center;
      }

a, a:visited {
	color: #00F;
}

a:active, a:hover {
	color: #F0F;
}

h1, h2, h3 {padding-top: 15px;}

h1, h2, h3, h4, p {padding-bottom: 5px;}
 
#flexContainer {
	  display: flex;
      flex-direction: column;
   }



header {
	background-color:#00F;
    color:#FFF;
    padding: 0 5%;
	
	}

header h1 {
	font-size:2.0em;
    line-height: 2.5em;}

nav {
  background-color: red;
} 		

nav ul {
  display: flex;
  flex-direction: column;
  line-height: 1.3em;
} 

nav li {
  min-width: 30px;
  list-style: none;
  margin: 0.5em;
  padding: 0 1%;
  font-size: 1.5em; 
  background-color: white;
}

main {padding: 0 1%;}

footer {
  background-color:#F00;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3em;
    }
	
footer p {
  font-size: 1.1em;
  line-height: 2.0em;
}
.variabel {
  display: flex;
  flex-direction: column;
}

.vertikal {
  display: flex;
  flex-direction: column;
  padding: 0 1%;
} 

.v1, .v2{
  color:blue;
  font-size:1.6em;
}



@media (min-width: 45em) {
  
 #flexContainer {
    display: flex;
    flex-direction: column;
   }
 
  header {padding: 0 6%;}


  nav {padding: 0 5%;}
  
  nav ul {	
    flex-direction: row;  
  }
 
  nav li {
    font-size: 1.2em;
  } 
  
   main section {
	display: flex;
    flex-direction: row; 
   } 

 .vertikal {
  padding: 0 5%;
}

   .variabel {
  flex-direction: row;
}

  .variabel h2{
  padding: 0 5%;
}



}