body{
    max-width: 1440px; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
}
.header__burger,.burger__button{
  display: none;
}

.grid{ 
  display: grid;
  align-content: space-between;
  grid-template-areas: 
  
    "gif1 article gif2"
    "gif1 article gif2";

  grid-template-rows: 86px 1fr 60px;
  grid-template-columns: 45% 1fr 15%;
  grid-column-gap: 120vw;
  grid-row-gap:80px;
  margin-top: 140px;
  height: 950px;
  }



#mainArticle {
    grid-area: article;
    width: 350px; 
  }
  #gif1{
    grid-area: gif1;
    align-self: end;   
   }
#gif2 {
  grid-area: gif2;
  max-width:230.25px;
  max-height:690px;
  justify-self: end;
  margin-top: -137px;
}

 img {
  width: 100%;
 }

.about_I{
  padding-top: 59%;
  margin-left: 10px;
  z-index: 500; 
}

#Hi{
width: 360px;
font-style: normal;
font-weight: 500;
font-size: 95.5px;
color: #333333;
line-height: 102.5%;
display: flex;
}

#About_me{  
  width: 360px;
  font-style: normal;
  font-weight: 200;
  font-size: 15px;
  line-height: 24px; 
  color: #333333;
  padding-left: 5px;
  padding-top: 2.5vw;
  padding-bottom: 2.5vw;

}

#ButtonMain{
  display: flex;
  justify-content:space-between;
  padding: 5px;
  padding-top: 20px;
  width: 350px;
  
}

#small__project,#large__project{
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
width:160px;
height: 60px;
background-color:#FFFFFF;
border: 1px solid #333333;
z-index: 200;
}



#small__project:hover{
  color:#FFFFFF;
  transition: 0.7s;
  background: #3D37CD; 
  z-index: 20;  
  border:0px;
}
#large__project:hover{
  color:#FFFFFF;
  transition: 0.7s;
  background: #00C753;
  z-index: 20;
  border:0px;
}





@media (max-width: 767px ) {
  #pageHeader{       
    border-bottom: none;
    margin-left: 0%;
    z-index: 400;
  }

  .grid{   
    justify-content: center;
    grid-template-areas: 
      "header header header"
      "article article article"
      "gif1 gif1 gif1"; 
      grid-template-rows: 86px 48% 1fr;   
      grid-column-gap:10px;
      grid-row-gap:10px; 
  
    }
    #gif2{
      display: none;
    }
    #mainArticle {
      grid-area: article;
      display: flex;
      justify-content: center;
      width: auto;
      margin-left: 2%;
    
    }
    .about_I{
     padding-top: 10%;
     width: 350px;
    }
    #gif1{
      /* position: fixed; */
      /* margin-top:30px; */
       width: 101%;
      
    }
    #Hi{
    font-style: normal;
    font-weight: 500;
    font-size: 80px;
    line-height: 102.5%;     
      }
      #About_me{  
        font-style: normal;
        font-weight: 300;
        font-size: 13px;
        line-height: 22px;
      }

      #small__project,#large__project{
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        width:45%;
        height: 60px;
        margin-right: 10px;
        }
  }


  @media (max-width: 490px ) {
    html{
      overflow-y: scroll;
    
   }
    body{
     position: fixed;
  }
    #buttonHeader{
      visibility: hidden;
    }
  
    .grid,.page__2{
      position:fixed;
   }

   .grid{
    margin-top: -7vw;
    z-index: 100;
  }
  .about_I{
    width:96.6vw;
   }
   #gif1{
    position: fixed;
   
     width: 101%;
     bottom:-83vw;
  }
   #gif1{
     margin-top: 0.5vw;
    width: 100%;
 }

 
  .header__burger{
      display: grid;
      justify-content: center;
      width:50px;
      width:50px;
      margin-top: -25px;
      margin-left: 85%;
      z-index: 1000;   
  }
  #clik,#clik_1,#clik_2,#clik_3{
    align-self: center;
    margin-top: -50px;
  }
  
  #clik_1,#clik_2,#clik_3{
      visibility: hidden;   
  }
  .burger__button{
    display: block;
  }
  
  #About_mobile,#Contact_mobile,#back_Home_mobile{
    display: flex;         
    width:100%;
    height: 139px;
    margin-left:370px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background-color:#3D34D2;
    color:#FFFFFF;
    }  
    #ButtonMain{   
      width: 90vw;
    }
   
    #back_Home_mobile:hover{
        background-color:#00C753;
    }
    #About_mobile:hover{
        background: #FFBD00; 
    }
    #Contact_mobile:hover{
        background: #FE0000;
    }
  

    #About_me{
      z-index: 500; 
      width:91.7vw;
    }
 
    #small__project,#large__project{
      z-index: 5000;
    }

  }

@media screen and (device-aspect-ratio: 414/736){
  #gif1{
    margin-top: 19vw;
  }
}

@media (max-width: 411px ){
  #gif1{
    margin-top: 13vw;
    width: 101%;
}
}


@media screen and (device-aspect-ratio: 411/823){

}

@media screen and (device-aspect-ratio: 411/731){

   #gif1{margin-top: 13vw;}
}




@media (max-width: 360px ){
   #gif1{margin-top: -3vw;} 
}

@media (max-width: 320px ){
  #About_mobile,#Contact_mobile,#back_Home_mobile{
    margin-left: 345px;
  }
  #Hi{ 
    font-style: normal;
    font-weight: 500;
    font-size: 60px;  
    line-height: 102.5%;
    }
    
    #About_me{     
      font-style: normal;
      font-weight: 200;
      font-size: 12px;
      line-height: 24px; 
      color: #333333;
      padding-left: 5px;
      padding-top: 2.5vw;
      padding-bottom: 2.5vw;
   
    }
  .header__burger{
    margin-left: 75%;
  }
 
 
}







@media (min-width: 768px) {
  .grid{  
    grid-column-gap: 10px ;
    grid-row-gap:10px;      
    }
    .grid{             
      height: 870px;        
    } 
  } 

  
  @media (min-width: 992px) {
    .grid{  
      grid-column-gap: 20px ;
      grid-row-gap:10px;       
      }
      .grid{             
        height: 870px;         
      } 
  } 
 
  @media (min-width: 1200px) { 
    .header__burger{
      display: none;
    } 
    .grid{  
      grid-column-gap:  60px ;
      grid-row-gap:110px;         
      height: 930px;      
    } 
  }
  @media (min-width: 1450px) {   
    .header__burger{
      display: none;
    }
    .grid{  
      grid-column-gap:  112px ;
      grid-row-gap:83px; 
      height: 950px;       
    }  
  
    #gif2 {
      grid-area: gif2;
      max-width:217px;
      max-height:690px;
      justify-self: end;
      margin-top: -137px;
    }
     
  }

  @media (min-height:960px){
    .grid{
      margin-top: 170px;
    }
    #gif2 {       
      margin-top: -170px;
    }
  
  }

  @media (min-width:  768px) and (max-height:800px){
   .grid{
     max-height: 450px;
   }
  }


  @media (min-width: 500px) and (max-height:800px){  
    
    html {
      margin-left: calc(100vw - 100%);
      margin-right: 0;
    }
 
     body{
      max-width: 920px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px;     
  }

  #gif1{     
    align-self: start;
    width: auto;
    }
    #gif2 {       
    max-width: 140px;
    }
    .about_I{
      padding-top: 0%;
      margin-left: 10px;
      z-index: 500; 
    }
    
    #Hi{
      width: 300px;
      font-style: normal;
      font-weight: 500;
      font-size: 80px;
      line-height: 102.5%;     
        }
    
        #About_me{  
          width: auto;
          font-style: normal;
          font-weight: 300;
          font-size: 13px;
          line-height: 22px;

          padding-top: 1.5vw;
          padding-bottom: 1.5vw;
        }
    
        #small__project,#large__project{
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          width:45%;
          height: 60px;
          margin-right: 10px;
          }         
  }