.container {
    display: flex; /* or inline-flex */
  text-align: center;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  flex-direction: column;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
 
  }

  .container > * {
    
    flex: 1 0 auto;
   
    max-width: 800px;
    height: 100%;
    
  }
  .Site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
  
  .Site-content {
    flex: 1;
    margin: auto;
  }
  .header,
  .footer {
    flex: none; /* 2 */
  }
  .header {
    background: tomato;
    margin: auto; 
    width: 100%;
    
  }
  .main {
    background-color: beige;
    margin: auto;  /* Magic! */
    width:100%;
    min-height: auto;
    margin-bottom: 2em;
   
  }

  h1 {
    
    font-family: 'Yanone Kaffeesatz', sans-serif;
    text-shadow: 4px 4px 4px #410d00;
    font-size: 4em;
    font-weight : 700;
    color: beige;
}
h2 {
  font-family: 'Yanone Kaffeesatz', sans-serif;
    font-weight : 200;
    font-size: 2em;
}
.footer{
  background-color: rgb(51, 45, 42);
}
.footer img {
    width: 1em;
    padding-right: 3px;
}
.footer a{
  font-family: 'Yanone Kaffeesatz', sans-serif;
    text-decoration:none;
    color: azure;
    font-weight : 200;
}
body {
    
    background-image: url(assets/wallpaper.svg);
  background-size: cover;
  width: 100%;
 padding: 0; /* reset */
 padding-bottom: calc(100% * 3 / 4);
 background-repeat: no-repeat;
 
  }

.center{
  text-align: center;
}
hr{
  max-width:500px;
}
.myButton {
	box-shadow: 0px 10px 14px -7px #276873;
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	background-color:#599bb3;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.myButton:hover {
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
}
.myButton:active {
	position:relative;
	top:1px;
}