body {
    max-width: 940px;
    margin: 0 auto;
    background-color: #F2A432;
    padding: 1em;
	color: #361f03;
	font-family: Trebuchet MS;
	background-image: url("Image_desert_tile_01.png");
}

main {
    margin: 1em 0;
    padding: 1em;
    background-color: #df8f20;
	border-radius: 20px;
	box-shadow: 5px 5px 8px #533105;
}

footer {
    margin: 20px 0;
    text-align: center;
}

pre {
    overflow: auto;
}

.cols {
    display: grid;
}

@media (min-width: 650px) {
    .cols { grid-template-columns: repeat(2, 1fr); }
}

.site {
    padding: 10px;
}
.site:nth-child(odd) {
    background-color: #ccccff;
}


h1, h2, h3, h4 {
    color: #694007;
    margin-top: 0;
	text-shadow: 2px 2px 2px #9f6211;
}

a {
  color: #694007;
}


/* Form stuff */
.field { margin-bottom: 1rem; width: 350px; }
.field > label { margin-bottom: .25rem; }
.field > * { display: block; width: 100%; box-sizing: border-box; }

/**************************************************/

img.center {
       display: block;
   margin-left: auto;
  margin-right: auto;
}

img.imageshadow {
	   display: block;
   margin-left: auto;
  margin-right: auto;
	box-shadow: 5px 5px 8px #533105;
 border-radius: 5px;
}

img.flagshadow {
	box-shadow: 3px 3px 8px #7a4e09;
}
/**************************************************/
/*            The sidebar menu                    */
/**************************************************/
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #a66613; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px; /* Place content 60px from the top */
  transition: 0.7s; /* 0.5 second transition effect to slide in the sidebar */
  box-shadow: 6px 4px 4px #613d06;
}

/* The sidebar links */
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #f8d6b6;
  display: block;
  transition: 0.1s;
  /* text-shadow: 3px 3px 3px #888888; */
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #fcbe80;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 10px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 12px;
  cursor: pointer;
  background-color: #a66613;
  color: white;
  border: none;
  box-shadow: 4px 4px 4px #b06d19;
  border-radius: 2px;
}

.openbtn:hover {
  background-color: #593507;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}