@media screen and (max-width: 414px) {
    /*414 x 732 PX*/
.main-container{
        display: grid;
        grid-template-columns: repeat(1,1fr); 
        place-items: center;
        padding-left:10px;
        row-gap:10px;
       grid-template-areas:
       "firstRow"
       "secondRow"
       "navDiv"
       "articles"
       "welcomeMsg"
       "footer";
          }
#header1{
    grid-area: first;
     background:#8ebf42;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#square2{
   
    text-align: left;
}
#imTitle{
    width:150px;
   
}
#defTitel{
    display:none;
}
#headerBotton{
    display:none; 
}
#header3{
    display:none; 
}
.square{
    width:40px;
    height:40px;
    margin-top: 10px;
    margin-left: 5px;
    position: relative;
    background: black;
}
.line{
    position :absolute;
    height:2px;
    width: 100%;
    background-color:#fff;
    border-radius: 1px;
    transition: all cubic-bezier(0.26,0.1,0.27,1.55) 0.35s;
}
.top{
    top:5%;
}
.middle{
    top:40%;
}
.bottom{
    top:78%;
}
.icon.close .top{
 transform: rotate(45deg);  
 top:48%;
}
.icon.close .middle{
  transform: rotate(-45deg);  
  top:48%;
}
.icon.close .bottom{
  transform: rotate(-45deg);  
  top:48%;
}
#contactStripe{
    grid-area:secondRow;
    text-align: left;
    
}
#contactText{
            visibility: hidden;
            position: relative;
        }
#contactText:after {
            visibility: visible;
            position: absolute;
            top: 0;
            left: 0;
            content: "Tel: + 252 63-479-2393 \A Email : hal_aqoon@yahoo.com";
            white-space: pre-wrap;
        }
#navDiv{
 grid-area:navDiv;  
display: flex;
  /*flex-direction: row | row-reverse | column | column-reverse*/
  flex-direction: column;
  gap:3px;   
}
ul{  
   
background-color:#f0b71a;
list-style: none;
list-style-type: none;
border: 1px solid #ddd;
position: relative;
padding: 10px;

}
ul li {
display:block;
text-align:left;
padding: 5px ; 
border-bottom: 1px solid #ddd;
     
    }
 ul li a {
 font-weight: bold;
 text-align: left;
 color: white; 
 text-decoration: none;
 font-size: 20px;
}
ul li:last-child {
  border-bottom: none
}
#anglais{
     color:black;
 }
#articleName{
    color: black;
    font-size: 16px;
}
#articleName a{
    color: black;
    text-decoration: none;  
}
#author{
  color: black;  
  font-size: 11px;
}
#archiveDiv{
grid-area:articles;
text-align: center;
background:#ecfce2;

}
#articleDiv1{
grid-area:articles;  
background-image: url("../picsMashadka/stone2.gif");

}
#articleDiv2{
grid-area:articles; 
color: white;
text-decoration: none;
background-image: url("../picsMashadka/water.jpg");

}
#midPanel{
    grid-area:welcomeMsg;
    background-color: #edf2ff;
}
#midMessage{
    font-size: 16px;
}
#imageDiv{
   grid-area:books;
    background:#8ebf42;
   display: flex;
   flex-direction: column; 
   align-items: center;
 
}
#image1{
   
}
#imageG{border-radius: 2px;
  width:150px;
  height:150px;
}
footer{
    grid-area:footer;
   background-color: black;
   color:white;
   
}
}