@charset "UTF-8";
/* Post16.org CSS Document */

* {
  box-sizing: border-box;
}

/* Style the body */
body {
 
  margin: 0;
    padding: 0;
     font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
 
  background: #ffffff;
}

h1 {
    display: flex;
    justify-content: center;
    font-size: 1.1em;
    text-transform: uppercase;
    word-spacing: 0.5em;
    color: #680C11;
    text-shadow: 1px 1px 11px #E1D09B;
}

/* Header/logo Title */
header {
display: flex;
    justify-content: center;
    background-color: #320504;
 

 
}



.site-logo a img{
    width: 300px;
}

/* Style the top navigation bar */
nav {
  display: flex;
    justify-content: center;
    margin-bottom: 5em;
    background-color: #1B2C46
 
}

/* Style the navigation bar links */
nav a {
  color: #E6B37E;
  padding: 14px 20px;
  text-decoration: none;
}

/* Change color on hover */
nav a:hover {

  color: #F9FACF;
}

main {
    display: flex;
    margin-bottom: 5em;
}

/* Column container */
.sidebyside {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.leftside {
  flex: 30%;
  background-color: #243E53;
  padding: 20px;color: #FFFFFF
}

.leftside a {
    text-decoration: none;
    color: #E9D0A2;
}

.leftside a:hover{
    color: #6F1111;
}

/* Main column */
.rightside {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

.rightside a {
    text-decoration: none;
    color: #6F1111;
}

.rightside a:hover{
    color: #E9D0A2;
}

/* Fake image, just for this example */
.photo {
  background-color: #320504;
  width: 100%;
  padding: 20px;
}

/* Footer */
footer {
    margin-top: 5em;
  padding: 10px;
  text-align: center;
  background:#690D10;
    color: #FFFFFF;
    font-size: 10px;
}














 /* Smartphones (portrait and landscape)*/
  

  

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    
    h1 {
        font-size: .7em;
    }
    
  .sidebyside, nav {   
    flex-direction: column;
  }
    nav{
        justify-content: center;
        text-align: center;
    }




}

  @media screen 
    and (max-width : 450px) 
   {

  h1 {
        font-size: .4em;
    }
}