@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;
  
}
/*mobile first display*/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.menu-area a{
  display: flex;
 align-items: center;
  justify-content: center;
  color: #24ba1a;
  background-color:#103406;
  height: 50px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  border-right: 1px solid #0c8312;
  border-bottom: solid 1px #000;
  padding: 10px;
  cursor: pointer;
 }
.menu-area a:hover {
  background-color: darkgreen;
  display: block;
} 
.menu-area ul{
  list-style: none;
  display: flex;
  flex-direction: column; 
  text-decoration: none;
}
.menu-area ul li{
  position: relative;
  width: 100%;
}
.dropdown-1 li{
  display: none;
  position: relative;
}
.dropdown-1{
  position: absolute;
  flex-direction: column;
  top: 60;
  width: 50%;
  z-index: 10;
}
.menu-area li:hover .dropdown-1 > li{
  display: block;
  top: 0;
}

.dropdown-1 li:hover{
  display: block;
background-color: darkgreen;
}
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;
list-style-type :none;
line-height: 82%;
font-size: 15px;
}

ul {
  list-style-type: none;
  flex-direction:row;
  margin: 0;
  padding: 0;
}
  a {
 text-decoration: none;
   color: #75b80e;
  padding: 8px;
}
h1{
  text-align: center ;
  color: #f3f9f4; 
  font-size: x-large;
letter-spacing: 2px;
  line-height: 2em;
padding: 5px;
}
body {
  width: 99%;
 padding-bottom: 2px;
 margin: auto;
 background-color: #edeee1;
color: black;
 font-family:Amble;
 font-size: large;
}

img,video,embed{
  max-width: 95%;
}
.logo{
float:left;
clear: both;
height: auto;  
border: none;
}
.picture {border: 3px solid green;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figcaption {
  background-color: white;
  color:black;
  font-style: italic;
  word-wrap: break-word;
  height: auto;
   width: fit-content;
}
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;
}
aside {
 background-color: #07571d;
  float: Left;
  color: #eee;
  margin: 5px;
  padding:5px;
  font-size: medium;
  font-style: italic;
  }
/* Container */
.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: #f6f6e6;
  padding: 10px;

}

.floatLeft {
  float: left;
  margin: 10px;
}
.floatRight {
  float: right;
  margin: 10px;
}

section {
  background-color: #f8f5ea;
  border-bottom: 1px solid #0f0f0f;
  padding: 10px;
}
.parent {
  display: flex;
}
.content-box {
  box-sizing: content-box;}
.dev{
  width: 80%;
  margin: auto;
  background-color: #ccc;
  height: 500px;
  padding: 24px;
}
.left {
  background-color: white;
  width: 44%;
  height: 71%;
  float: left;
}
.right {
  background-color: white;
  width: 44%;
  height: 71%;
  float: right;
} 
  
.a1 {
  background-color:#f8f5ea;
  flex: 35%;
  text-align: justify;
  font-weight: lighter;
  border: solid #060606 1px;
}
/*article two*/
.a2 {
  background-color: #f8f5ea;
  flex: 35%;
  text-align: justify;
  font-weight: lighter;
border: solid #060606 1px;
}
@media screen and (min-width: 768px) {
.menu-area ul{
 flex-direction: row;
}
 .dropdown-1 {
  flex-wrap:wrap;
  width:100%;
}
}
/* large screen */
@media screen and (min-width: 1200px) {
 .menu-area ul{
 flex-direction: row;
  }
.dropdown-1 {
 flex-wrap:wrap;
width:100%;
 }
  }