@media screen and (min-width:901px) {
  header{
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    transition: all 500ms ease-in-out;
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width:900px) {
  header{
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
  }
}

@media screen and (max-width:600px) {
  header{
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
  }
}

@media screen and (max-width:300px) {
  header{
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
  }
}