

@media only screen and (max-width: 1500px) {
  .grid-main-page{
    margin: 30px 5% 0 5%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    background-color: transparent;
  }

}

@media only screen and (max-width: 1400px) {
  .grid-main-page{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .grid-list-levels{ 
    width: 70%;
  }
  #allWordsHolder{
    top: -10px;
    margin-left: 30px;
  }
  #allWordsHolder{display: none;}
  #allWordsHolderHor{display: block;}
  #sun{ width: 120px; height: 120px; }
  #grid-container{
    display: grid;
    grid-template-columns: 1fr 10fr 10fr
  }
  .form-container{padding: 15px 5px;}
  .formInput{width: 95%;}
  
  .cloud1 { width: 160px; height: 90px; right: 5%; top: 250px; }
  .cloud2 { width: 160px; height: 90px; left: 5%; top: 160px; }
  .cloud3 { width: 128px; height: 72px; right: 30%; top: 500px; }
  .cloud4 { width: 96px; height: 54px; left: 35%; top: 270px; }
}

@media only screen and (max-width: 1100px) {
  .headerButton{padding: 0 10px;}
  .imgInRightHeader{margin: 0 5px;}
  a.link_in_middle_header{margin: 0 5px;}
  .mainTitle{padding-top: 40px;}
  .grid-main-page{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .grid-list-levels{ 
    width: 80%;
  }
  table.categoryHolderTable{width: 96%; margin-left: 2%;}
  #sun{ width: 120px; height: 120px; right: 5%; top: 80px;}
  .cloud1 { width: 160px; height: 90px; right: 3%; top: 250px; }
  .cloud2 { width: 160px; height: 90px; left: 2%; top: 110px; }
  .cloud3 { width: 128px; height: 72px; right: 30%; top: 500px; }
  .cloud4 { width: 96px; height: 54px; left: 35%; top: 270px; }
}

@media only screen and (max-width: 900px) {
  .grid-list-levels{ 
    width: 90%; gap: 30px;
  }
}

@media only screen and (max-width: 700px) {
  #logoHolder{display:none;}
  #headerMiddleLinksHolder{text-align: left;}
  
  .headerButton{padding: 0 15px; margin: 0 10px; height: 40px; line-height: 40px; font-size: 0.9em;}
  .grid-item-title{
    display: block;
    padding: 7px 0 4px 0;
    font-size: 1.1em;
  }
  #sun{ width: 120px; height: 120px; right: 5%; top: 80px;}
  .cloud1 {display: none; }
  .cloud2 { width: 160px; height: 90px; left: 2%; top: 110px; }
  .cloud3 { width: 128px; height: 72px; right: 30%; top: 500px; }
  .cloud4 { width: 96px; height: 54px; left: 35%; top: 270px; }
  .grid-main-page{
    grid-template-columns: 1fr 1fr;
  }
  .grid-list-levels{ 
    width: 95%; gap: 20px;
  }
}