body {
	background-color: #F1E8D3; 
  margin:0px; 
  color:#312103;
}	

header h1  {
	font-family: Georgia, tahoma, serif;
	background-color:#BB8C35; 
	padding:8px 0 8px 0;
	text-align: center; 
  color:#F1E8D3;
}

h1{
  margin: 0; 
 
}
h3 {color:#312103;
  margin-bottom: 0px; 
}
#container {
  width: 80%; 
/*
  min-width: 700px; 
  max-width: 1200px;
*/
	margin: 0 auto; 
  background-color:red;
	font-family: "century gothic", "DejaVu Serif", serif;
	}	

main{

  padding: 1.5em; 
  background: white; 
}

  /* p {line-height: 110%; }	 */

  .responsive { 
	max-width:100%; 
    height: auto; 
    }

  .two_col{
    display: flex;
    flex-direction: row; 
    margin-bottom:  1em; 
      }

  article {
    flex: 2; /*relative width of 2 thirds */
/*    min-width: 350px; */
    padding: 0 1em;
  }

  aside {
    flex: 1;
    font-size: .85em;    
/*    min-width: 250px; */
    line-height: 1em; 
    background-color: #fbd58f  ;
    padding: 0 1em;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  }

 
  .flexer{ 
    display: flex; 
    flex-direction: row;
    } 
 

  footer {
    font-size: .85em; 
    text-align: right;
    padding: 2px 10px 2px 0px; /*considering a thin footer */
    background-color:#312103; 
    color: #fefefe;
  }



 
  /* ---------------START MEDIA QUERY----------------*/
@media only screen and (max-width: 600px) {
body {	margin: 0; }	

#container {
	width: auto;
	font-size: 1em; 
}	
main{  padding: 0; }

.two_col { flex-direction: column; }

.flexer{ flex-direction: column;  } 

	.responsive {max-width: 300px; }

  }   /* ---------------START MEDIA QUERY----------------*/


/* ---BEGINNING OF PRINT--- */  
@media print {
  footer { display: none;  }
  #container {
    width:100%!important;
    padding:0!important;
    margin:0!important;
    /* It works without the 'important', but keep anyway */
  }
} /* ---END OF PRINT--- */