@font-face {
 font-family: 'Amble';
  src: url('../fonts/Amble-Bold.woff2') format('woff2'),
  url('../fonts/Amble-Bold.woff') format('woff');
  font-weight:normal;
 font-style: normal;
 font-display: swap;
  
}
* {
  border:0;
  margin: 0;
  padding: 0;
}
html,body{
background-color:#f6f2e4; 
 padding-bottom: 2px;
  margin:auto;
 height: 100%;
  width: 100%;
  font-family:amble;
  font-size:medium;
  color: black;

}

img,video,embed{
  max-width: 95%;
}
.logo{
float:left;
clear: both;
height: auto;  
}

header{
background-color:#0d293a;
 color: #f2f7fa;
border-bottom: 1px solid #0d0d0d;
margin:0;
}
footer{
 background-color:#fbc57b;
color:#f5fbfc;
text-align:left;
border-bottom: 2px solid #0d0d0d;
}
h1{
  text-align: center ;
  color: #0eb82a; 
}

nav a{background-color:#055215; 
  flex: auto;
}
nav ul {
  display:flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
}
nav ul li{
  position: relative
}
nav ul li a{
display: flex;
margin:0;
padding:10px;
border-right: 1px solid #0c8312;
list-style-type :none;
line-height: 82%;
font-size: 15px;
}

ul {
  list-style-type: none;
  flex-direction: row;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
  a {
 text-decoration: none;
   color: #75b80e;
  padding: 8px;
}
li a:hover {
  background-color: darkgreen
}

aside {
 background-color: #07571d;
  float: Left;
    color: #eee;
  }

/* Extra Small Screen*/
@media screen and (min-width:320px){
  body {
  display:flex;
  flex-direction: column;
  max-width: 75rem;
  }
  main {
 display: flex;
 flex-wrap: wrap;
  }
 nav, header {
  order: -1;
 }
 nav {
  flex-direction: row;
 }
 nav a {
 flex: auto;
 }
 article {
 flex: 50%;
 }
  aside, section {
 flex: 100%;
 }
 section p {
 column-count: 2;
 column-gap: 20px;
  column-rule: 1px solid rgb(8, 8, 8);
  }
}
  
/* small screen */
@media screen and (min-width: 768px) {
  body {
  display: flex;
  flex-direction: column;
  max-width: 75rem;
 }
  main {
 display: flex;
 flex-wrap: wrap;
  }
 nav, header {
  order: -1;
 }
 nav {
  flex-direction: row;
 }
 nav a {
 flex: auto;
 }
 article {
 flex: 50%;
 }
  aside, section {
 flex: 100%;
 }
 section p {
 column-count: 2;
 column-gap: 20px;
  column-rule: 1px solid rgb(8, 8, 8);
 }
/* Medium screen */
@media screen and (min-width: 992px) {
  body {
  display: flex;
  flex-direction: column;
  max-width: 75rem;
 }
   }
  main {
 display: flex;
 flex-wrap: wrap;
  }
 nav, header {
  order: -1;
 }
 nav {
  flex-direction: row;
 }
 nav a {
 flex: auto;
 }
 article {
 flex: 50%;
 }
  aside, section {
 flex: 100%;
 }
 section p {
 column-count: 2;
 column-gap: 20px;
  column-rule: 1px solid rgb(8, 8, 8);
}
  }
/* large screen */
@media screen and (min-width: 1200px) {
  body {
  display: flex;
  flex-direction: column;
  max-width: 54rem;
 }
  main {
 display: flex;
 flex-wrap: wrap;
  }
 nav, header {
  order: -1;
 }
 nav {
  flex-direction: row;
 }
 nav a {
 flex: auto;
 }
 article {
 flex: 50%;
 }
  aside, section {
 flex: 100%;
 }
 section p {
 column-count: 2;
 column-gap: 20px;
   column-rule: 1px solid rgb(8, 8, 8); 
  }
  }