/* ---------here starts all other css, only media quiries above--------*/
  
  
  html {
    background: #74a89d;
  }


   
  /* -----------header section----------- */


  
  header {
    box-sizing: border-box;
    display:flex;
    flex-direction: row;
    flex-wrap: space-between;
    justify-content: flex-start;
    width:  100%;
    height: auto;
    border: 10px solid rgb(79, 126, 128);
    border-radius: 15px 15px 0 0;
    background-color: rgb(79, 126, 128);
    margin: 0;
    padding: 20px;
    overflow: hidden;
    height: 140px;
   
  }

  .logo-type {
    display: flex;
    justify-content: flex-start;
    width: 12%;
    height: auto;
  
  }
  
  .logo-img {
    align-self: center;
    width: 70%;
    height: auto;
   
  }

  .head-site {
    font-family: 'Righteous', cursive;
    margin: 0 0 50px 0;
    padding: 0 0 50px 0;

  }

  h1 {
    font-family: 'Righteous', cursive;
    font-size: 300%;
    color: rgb(190, 229, 255);
  }

  .kids-ed {
   font-size: 40%;
   margin-top: 0;
   
  }
  
  .nav-bar {
    display: flex;
    margin-left: auto;
    align-self: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    width: 40%;
    height: 30%;
    background-color: rgb(19, 19, 31);
    border-radius: 15px;
    justify-content: space-evenly;
    
  }

  .nav-links {
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 70%;
    padding: 0 30px 0 30px;
    align-self: center;
  
  }


  
  /* --------links styling--------- */

  a {
    color: #6acdf5;
    text-decoration: none;
    
  }

  
  a.small-link {
    color: white;
    text-align: center;
  }

  img:hover {
    filter: invert;
  }

  a:hover {
    color: purple;
  }


  
  /* -----------big news section------------ */

  
  .big-news-container{
    box-sizing: border-box;
    width: 100%;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    border: 10px solid black;
    background-color: rgba(255, 255, 0, 0.651);
    padding: 10x 0 10px 0;
 
  }

  .big-item1 {
    display: flex;
    align-items: center;
    margin: 0 60px 0 40px;
  }

  h3 { 
    margin: 20px 0 0 10px;
    padding: 40px;
    font-size: 70%;
    color: rgb(4, 6, 8);
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: bolder;
    font-size: 100px;
  }

  .big-item2 {
    width: 100%;
    height: auto;
    margin: 50px 40px 10px 0;
    filter: drop-shadow(5px 5px rgb(124, 19, 101));
  }

  .big-image:hover {
    filter: invert(100%);
    transition: 0.5s ease-in-out;
    
  }

  .big-image {
    width: 100%;
    height: auto;
    border-radius: 10%;
  }


 
  /* ---------small news section----------- */

  
  .small-news-container {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    background-color: rgb(21, 21, 54);
    border: 10px solid rgb(21, 21, 54);
    padding: 10px;
    border-radius: 0 0 15px 15px;
   
  
  }
  
  .news1, .news2, .news3, .news4, .news5, .news6 {
    width: 300px;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 10px 30px 30px 10px;
    }


    .news1:hover, .news2:hover, .news3:hover {
      filter:  invert(100%);
      transition: 0.5s ease-in-out;
  
    }

    .news4:hover, .news5:hover, .news6:hover {
      transition: 0.5s ease-in-out;
      transform: scale(1.2, 1.2);

      
    }


 
  p {
    font-family: 'Montserrat Alternates', sans-serif;
  }
  
  .small-img{
    width: 100%;
    height: 80%;
    overflow: hidden;
    border-radius: 10%;
    border: 1px solid black;
    filter: drop-shadow(5px 5px rgb(29, 106, 150));
  }
  
  
  footer {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    margin: 0 0 0 25px;
   
  
  }
  
  .footer-list {
    padding: 20px 0 20px 0;
    font-size: 100%;
    color: rgb(199, 195, 136);
    text-align: center;
    font-family: 'Montserrat Alternates', sans-serif;
    list-style-type: none;
  }
    
 
  
  /* --------here starts media query min 669-max 1024px-------------- */


  
  @media (min-width: 669px) and (max-width: 1024px) {



    /* --------header section-------- */

  
    h1 {
      font-size: 200%;
      margin: 20px 0 0 10px;
    }
   
    .nav-bar {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-evenly;
     align-items: ;
     padding: 10px;
     height: auto;
     width: 40%;
     
   }
   
   .nav-links {
     font-size: 70%;
     padding: 0;
     margin-top: 5px;
     
   }

   .logo-img {
     width: 100%;
     height: auto;
   }

   /* --------big news section--------- */
   
    .big-news-container { 
       flex-direction: row;
       justify-content: stretch;

     }

     
     .big-item1 { 
      
       width: 0;
       align-items: center;
     } 
   
     h3 {
       font-size: 410%;
       text-align: center;
       margin: 0;
       padding: 0 0 0 20px;
  
     }
  
     .big-item2 {
       width: 50%;
       height: auto;
       margin: 0 0 0 28%;
       filter: drop-shadow(5px 5px rgb(124, 19, 101));
       padding: 10px;
       
     }
   
     .big-image {
       width: 100%;
       height: auto;
       margin-left: 40px;
       border: 1px solid rgb(124, 19, 101);
       overflow: hidden;
     }

     /* -------small news section--------- */
   
     .small-news-container { 
        padding: 0 0 0 90px;
        flex-wrap: wrap;
        height: 100%;
     }

     .news1, .news2, .news3, .news4, .news5, .news6 {
        width: 40%;
        height: auto;
     }

     .small-img {
        width: 100%;
        height: 80%;
        overflow: hidden;
     }
  
      }
    
/* --------here starts media query for phones, max 668px------ */
    
  @media (max-width: 668px) {


    /* -----header section------ */


    header {
      /* width: 90%; */
      flex-wrap: nowrap;
      align-content: center;
    }

    .logo-type {
      width: 70%;
      height:  auto;
      margin: 0;
    }


    .logo-img {
      width: 80%;
      height: auto;
    }
   

    .nav-bar {
      background: rgb(47, 10, 68);
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      width: 10%;
      height: 100%;
      margin: 0 0 0 20px;
      padding: 10px;
      
      
    }

    .nav-links {    
      font-size: 18%;
      padding: 0 0 10px 0;
      align-self: center;
  
    }

    .head-site {
      width: 100%;
      height: auto;
     
    }

    h1 {
      font-size: 140%;
      margin-bottom: 0;
    }

    .kids-ed {
      font-size: 70%;
      margin-top: 0;
    }

     /*  -------big news section------- */

    .big-news-container {
      text-align: center;
      flex-wrap: wrap-reverse;
    }

    .big-item1 {
      width: auto;
      margin: 0;
      padding: 0;
  
  
    }

    h3 {  
      font-size: 200%;
      margin: 10px 0 10px 0;
      padding: 0;
      
    }

    .big-item2 {
      margin: 10px 10px 0 10px;
      width: 100%;
      height: auto;
      border-radius: 10%;
      filter: drop-shadow(5px 5px rgb(124, 19, 101));
      overflow: hidden;
  
    }

    .big-image {
      width: 100%;
      height: auto;
      margin-left: ;
      overflow: hidden;
      border: 2px solid black;
    }

   /* -----------small news section------- */

    .small-news-container {
      flex-wrap: wrap;
      justify-content: center;
      overflow: hidden;
      
       }
  

    .news1, .news2, .news3, .news4, .news5, .news6 {
      width: 100%;
      height: auto;
      margin: 20px;
      justify-content: space-evenly;
   
    }

    
    .small-img {
      width: 100%;
      height: 80%;
      
    }

    .footer-list {
      color: chocolate;
      font-size: 60%;
      margin: 0 60px 0 0;

    }

  }