*{box-sizing: border-box}


body {
background-color:rgb(214, 205, 198);
color:rgb(60, 56, 54);
font-family:Verdana, Arial, sans-serif;
background-size: contain;
display: flex;
}


header {
background-color:rgb(234, 197, 171) ;
color:#FFFFFF;
font-family: Georgia, sans-serif;
grid-row: 1/2;
}
header h1{padding-left: 1.1em}
header a {
color: papayawhip;
text-decoration: none;}

legend{text-align: center}

#wrapper{ 
background-color: rgb(234, 197, 171);
width: 80%;
min-width: 960px;
max-width: 2048px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 3px 3px rgba(66,66,66,0.3);
background-size: contain;
display: grid;
grid-auto-rows: minmax(0px, auto);
grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
}


nav{
font-weight:bold;
background-color: rgb(234, 197, 171);
color: rgb(52, 40, 30);
font-weight:bold;
color: white;
position: sticky;
top: 0;
grid-row: 2/3;
grid-column: 2/9;
text-decoration: none;

}

nav ul{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: flex;
flex-flow: row nowrap;}

nav ul li{width: 100%;

}
ul{list-style-type: none;
}
nav a{
color:black;
display:block;
text-decoration: none;
text-align: center;
padding: 1rem 0rem;
}
nav a:hover{background-color:#BA4920;
transition-duration: 0.3s
}




main {
padding: 1px 1rem 1px 1rem;
display: block;
background-color: #FFFFFF;
grid-row: 4/5;
grid-column: 2/8;
}



h2{
color:#34281e;
font-family:sans-serif
}



footer{
width: 100%;
text-align:center;
color: aliceblue;
grid-row: 5/6;
grid-column: 1/9;
}


legend{font-family: TIMES NEW ROMAN;
font-size: 3rem;}

footer a{color: aliceblue;
}

#desert{
height: 400px;
    
background-image: url(desert.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
     grid-row: 3/4;
    grid-column: 1/9;
}

#map{
height: 802px;
background-image: url(map.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
     grid-row: 3/4;
    grid-column: 1/9;
}



#flag{
height: 110px;
background-image: url(flag.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: grid;
place-items: center;
    }


#to{background-image: url(to.jpeg);
height: 400px;
width: 400px;
margin-left: 132px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;}

#woudjila{background-image: url(woudjila.jpeg);
height: 400px;
width: 400px;
margin-left: 132px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;}

#tikadaigai{background-image: url(tikadaigai.jpeg);
height: 400px;
width: 400px;
margin-left: 132px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;}

#naf{background-image: url(worldmap.jpeg);
height: 400px;
width: 708px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;}



#dogon{background-image: url(dogon.jpeg);
height: 400px;
width: 400px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;}
#bambara{background-image: url(bambara.jpeg);
height:400px;
width:400px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;}
#peulh{background-image: url(peulh.jpeg);
height:400px;
width:400px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;}
#touareg{background-image: url(touareg.jpeg);
height:400px;
width:400px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;}
#songhoy{background-image: url(songhoy.jpeg);
height:400px;
width:400px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;}


#instagramicon{background:radial-gradient(circle at bottom left,yellow,#c933ab 75%);border-radius:6px;cursor:pointer;height:35px;margin:15px auto;position:relative;text-align:center;width:35px;}
#instagramicon:hover{background:radial-gradient(circle at bottom left,yellow,#dc77db 75%);}
#instagramsquare{border:3px solid white;border-radius:6px;height:21px;left:4px;position:absolute;top:4px;width:21px;}
#instagramcircle{border:3px solid white;border-radius:100%;height:9px;left:3px;position:absolute;top:3px;width:9px;}
#instagramdot{border:2px solid white;border-radius:100%;color:white;position:absolute;right:8px;top:8px}


 @media screen and (max-width: 992px) {
     #wrapper{grid-template-columns:  minmax(0px, 1fr) repeat(6, minmax(0, 128px)) minmax(0px, 1fr)
      
  }
     header h1 {  grid-column: 1/8;
     padding-left:5em }
     nav{grid-row:2/3;
     grid-column: 1/8;
     padding-left:5em }
     nav ul {flex-flow: column nowrap}
        #desert{
height: auto;
    
background-image: url(desert.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
     grid-row: 2/3;
    grid-column: 1/5;
}
#map{
height: 100vh;
background-image: url(map.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
     grid-row: 2/3;
    grid-column: 1/5;}}



@media screen and (max-width: 768px) {
    #wrapper{grid-template-columns:  minmax(0px, 1fr) repeat 6  (minmax(0, 100%)) minmax(0px, 1fr);}
   
     header h1 {  grid-column: 1/8;
     padding-left:5em }
     nav{grid-row:2/3;
     grid-column: 1/8;
     padding-left:3em }
     nav ul {flex-flow: column nowrap}
        #desert{
height: auto;
    
background-image: url(desert.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
     grid-row: 2/3;
    grid-column: 1/5;
}
#desert{
height: 100vh;
    
background-image: url(desert.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
     grid-row: 3/4;
    grid-column: 1/9;
}
#map{
height: 100vh;
background-image: url(map.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
     grid-row: 2/3;
    grid-column: 1/5;
}
    body{font-size: 2em;
    }
    #flag{
height: 200px;
background-image: url(flag.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: grid;
place-items: center;
    }
  }

    
