header{
  max-width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

/* Home / Logo */

header > div{
  margin: auto;
  padding: 10px 0px;
}

header img{
  
  width: 200px;
  max-width: 100%;

}

/* navigation */

header nav{
  max-width: 100%;

  padding: 20px 0px;

  border-top: 1px solid rgb(86, 86, 86);
  border-bottom: 1px solid rgb(86, 86, 86);
  
  text-align: center;

  font-weight: 600;
}

header ul{
  width: 100%;

  display: flex;
  justify-content: space-evenly;
  align-items: center;

  list-style: none;
  padding: 0;
}

/* MEDIA QUERY */

/* REALLY small screens */
@media screen and (max-width:230px){
  header nav{
    font-size: 0.9em;
  }
}

/*
 *small screens area
  ---------------------------
*/
@media screen and (min-width:231px) and (max-width:270px){
  header nav{
    font-size: 1em;
  }
}

@media screen and (min-width:271px) and (max-width:299px){
  header nav{
    font-size: 1.1em;
  }
}
/*---------------------------*/

/* breakpoint for desired font-size */
@media screen and (min-width:300px){
  header nav{
    font-size: 1.2em;
  }
}

/* Breakpoint to long header */
@media screen and (min-width:481px){
  header{
    flex-direction: row;
  }

  header > div{
    width: 50%;

    display: flex;
    justify-content: center;
    
  }

  header img{
    width: 150px;
   
  }

  header nav{
    width: 50%;

    border: none;
  }

  header ul{
    height: 100%;
    
    align-items: center;
    justify-content: center;
    
  }
  
}

@media screen and (max-width:600px){
  header ul{
    column-gap: 10px;
  }
}

@media screen and (min-width:601px) and (max-width:768px){
  header ul{
    column-gap: 30px;
  }
}

@media screen and (min-width:481px) and (max-width:768px){
  header nav{
    font-size: 1em;
  }
}

/* breakpoint to larger screens */
@media screen and (min-width:769px){
  header ul{
    column-gap: 50px;
  }
}