* {
    box-sizing: border-box;
  }
  input {
    border: 2px solid rgb(2, 1, 15);
    border-radius: 4px;
    
  }
  input:focus {
    background-color: lightblue;
  }
html {
    font-family: sans-serif;
    
    
  }

  body {
    margin: 0;
    max-width:100%;
    height:auto;
  }

  header {
    background: rgb(10, 17, 34);
    height: 100px;
    
  }

  h1 {
   
    text-align: center;
    color: black;
    line-height: 100px;
    margin: 0;
  }

  article {
    padding: 10px;
    margin: 10px;
    background: rgb(255, 255, 255);
     /* To make sizing easier, include borders or padding in width */
     box-sizing: border-box;
     text-align: center;
     text-overflow: clip;
  }

  /* Add your flexbox CSS below here */

  .section1 {
    display: flex;
    display: grid;
    grid-template-columns: auto auto auto;
    
    
     /* To make sizing easier, include borders or padding in width 
     box-sizing: border-box; */
     /* Set a limit on entry widths? */
     min-width: 50px;
    
  }
  /*.section1 article{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;

  }*/

  .navigation a {
    float: right;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  .navigation{
      display: inline;
  }
  /* Change the color of links on hover */
.navigation a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .navigation a.active {
    background-color: #04AA6D;
    color: white;
  }

  .navigation input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
  }
 /* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 700px) {
     .navigation a, .navigation input[type=text] {
      float: none;
      flex-flow: row wrap;
      display: block;
      text-align: left;
      width: 25%;
      margin: 0;
      padding: 2px;
      
    }
    .navigation input[type=text] {
      border: 1px solid #ccc;
      min-height: 5px;
}
/*i have no fucking idea why it's not wokring*/
  .section1 article, .section1 img, .section1 iframe {
 
  /*box-sizing: border-box;*/
  display: block;
  text-align: left;
      width: 100%;
      margin: 0;
      padding: 2px;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      min-width: 300px;
}
.section1{
  display: flex;
  flex-direction: column;
}
}