html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* CSS Reset Ending*/
@font-face {
    font-family: bpnFont;
    src: url(font/BPG.woff2);
}
@font-face {
    font-family: bpgArial;
    src: url(font/bpg_arial.woff);
}
html{
    scroll-behavior: smooth;
}
body{
    background-color: #6AC25F;
    font-family: bpgArial;
}

header,main,footer,section,article{
    margin: 0 auto;
}

header{
    background-image: url("./photos/man-cents.jpg");
    max-width: 960px;
    height: clamp(400px, 60vw, 640px);
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
nav{
    display:flex;
    align-items:center;
    justify-content: space-between;
    flex-wrap: wrap;
}
nav ul{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    list-style-type: none;
}
nav ul a{
    display: inline-block;
    font-weight: bold;
    color:#567D56;
    text-decoration: none;
}
 li{
     padding: 15px;
     opacity: 0.8;
}
 li:hover{
     opacity:1;
 }
a:hover{
    color: seagreen;
}

 .hamburger{
     display:none;
     background-color: transparent;
     border:0;
     color: #fff;
     font-size:28px;
     cursor:pointer;
 }
.hamburger:focus{
    outline: none;
}
 h1{
     color: #567D56;
     font-size: 40px;
     text-align: center;
     font-weight: bold;
     letter-spacing: 2px;
     display: flex;
     justify-content: end;
     padding: 10px 40px 0 0;
 }
 h6{
     font-size: 40px;
 }
 h5{
     color: #8EC07D;
     text-align: center;
     font-size: 35px;
     font-weight: bold;
     padding: 15px;
     font-family: bpnFont;
 }
hr{
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(88 122 72), rgba(0, 0, 0, 0));
}
#wrapper{
    display: flex;
    align-items: flex-start;
}
.countries{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.countries div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.countries div img{
    display: block;
    width: 240px;
    height: 170px;
}
h6{
    text-align: center;
    font-weight: bold;
    margin: 20px 0;
    border-bottom: solid 2px black;
}
section{
    background-color: #8BDB81;
    max-width: 650px;
    padding: 25px 45px;
    font-size: 18px;
    line-height: 1.6em;
}

.span-bold{
    font-weight: bold;
    font-size: 25px;
    scroll-padding-top: 50px;
    scroll-margin-top: 50px;
}
article{
    max-width: 960px;
    background-color: #EEEEEE;
}
.saertoForma{
    display: flex;
    justify-content: center;
}
.saertoForma img{
    width: 150px;
    padding: 20px;
}

footer{
    padding: 20px 0 40px 0;
    text-align: center;
    max-width: 650px;
}
ul{
    list-style: none
}


.grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    font-family: bpnFont;
    font-weight: bold;
    font-size: 1.1em;
}

.grid-item {
    text-align: center;
    margin: 10px;
    border-radius: 20px;
    background-color: #587A48;
    padding: 22px 20px;
    color: #96C789;
}
#shefaseba{
    display: flex;
    flex-wrap: wrap;
}


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

    h5{
        font-size:18px;
    }
  nav ul {
      display:none;
      flex-direction: column;
      width: 100%;
  }
  nav ul.show{
      display: flex;
      align-items: flex-end;
  }

  .hamburger{
        display: block;
    }
  h1,h6{
      font-size:31px;
  }
   #wrapper{
       display: block;
       float: left;
   }
   li{
       width: 155px;
       background: silver;
   }
    a:hover{
        color: white;
    }
   section{
       line-height: 26px;
       padding: 15px 15px 20px;
   }
}
@media only screen and (max-width: 1000px) and (min-width: 700px)  {
    .grid{
        grid-template-columns: repeat(3,1fr);
    }
}
@media only screen and (max-width: 700px) and (min-width: 400px) {
    .grid{
        grid-template-columns: repeat(2,1fr);
    }
    .countries{
        grid-template-columns: repeat(1,1fr);
    }
}
@media only screen and (max-width: 400px) and (min-width: 10px) {
    .grid{
        grid-template-columns: repeat(1,1fr);
    }
    .countries{
        grid-template-columns: repeat(1,1fr);
    }
}