article {
  display: block;
  text-align: left;
  width: 650px;
  margin: 0 auto;
  padding-top: 150px;
}
body {
  text-align: center;
  font: 20px Helvetica, sans-serif;
  color: #333;
}

body h1 {
  font-size: 50px;
}

header {
  background-color: #036;
  border-bottom: 2px solid #fcba19;
  padding: 0 65px 0 65px;
  color: #fff;
  display: flex;
  height: 65px;
  top: 0;
  position: fixed;
  width: 100%;
}

header h1 {
  font-family: ‘Noto Sans’, Verdana, Arial, sans-serif;
  font-weight: normal; /* 400 */
  margin: 5px 5px 0 18px;
  visibility: hidden;
}

header .banner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 10px 0 0;
  /* border-style: dotted;
    border-width: 1px;
    border-color: lightgrey; */
}

header .other {
  display: flex;
  flex-grow: 1;
  /* border-style: dotted;
    border-width: 1px;
    border-color: lightgrey; */
}

:focus {
  outline: 4px solid #3b99fc;
  outline-offset: 1px;
}

/*
  These are sample media queries only. Media queries are quite subjective
  but, in general, should be made for the three different classes of screen
  size: phone, tablet, full.
*/

@media screen and (min-width: 600px) and (max-width: 899px) {
  header h1 {
    font-size: calc(7px + 2.2vw);
    visibility: visible;
  }
}

@media screen and (min-width: 900px) {
  header h1 {
    font-size: 20px;
    visibility: visible;
  }
}