<header>
  <div class="logo">
    <h1>Sì English</h1>
  </div>
  <nav>
    <label for="drop" class="toggle">≡ Menu</label>
    <input type="checkbox" id="drop">
    <ul>
      <li><a href="." class="current">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main class="width1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra non sem vel laoreet. Nam nec bibendum nulla, id rhoncus lorem. Quisque elementum tellus in magna vehicula bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec gravida nisi, a suscipit enim. Cras vitae risus sit amet est pharetra posuere eget sit amet massa. Vestibulum in magna ligula. Curabitur nec leo a mi ornare fermentum. Nam mollis diam tortor, id commodo ante viverra eu. Vestibulum finibus mi nibh, condimentum imperdiet elit rhoncus ornare. Donec et tristique nulla. Proin laoreet gravida quam sed ullamcorper.</p>
  <p>Pellentesque orci sem, egestas vitae felis ut, volutpat pellentesque metus. Fusce accumsan, leo et vehicula tincidunt, purus urna convallis dui, at eleifend velit risus vel tortor. Nulla eget tortor fringilla, ultricies enim ut, scelerisque urna. Aenean eget nisl a diam ullamcorper efficitur. Sed vestibulum convallis arcu, sit amet vehicula lacus hendrerit sed. Sed pretium pulvinar odio, in elementum lacus euismod vitae. Vivamus ex libero, tristique quis dui eu, euismod finibus felis. Aliquam sed libero lectus. In volutpat elit in dui lobortis, sit amet auctor ligula imperdiet. Suspendisse et vestibulum neque. Pellentesque mi ligula, luctus id laoreet id, finibus ac massa.</p>
  <p>Donec ut ultrices orci, sed dictum lectus. Aliquam venenatis at odio non ullamcorper. Ut ultricies augue at elementum egestas. Cras tincidunt metus ut mauris scelerisque, eu bibendum ex ultrices. Vestibulum in mollis ligula. Sed mattis sed quam quis bibendum. Quisque ullamcorper risus eu odio feugiat, hendrerit iaculis neque facilisis.</p>
  <p>Maecenas in ante quis ante venenatis rutrum. Nunc aliquet quam condimentum, ornare leo vel, congue est. Maecenas lectus mi, fringilla eget urna quis, molestie varius nunc. Sed magna ex, placerat vel metus eget, imperdiet viverra ipsum. Donec eu nisi mauris. Ut sodales lacinia odio. Nulla eget bibendum quam. Nullam ullamcorper auctor nibh. Aenean in est est. Vestibulum scelerisque ac ipsum eu faucibus. Aliquam elementum feugiat enim, at semper velit ultrices ac. Morbi gravida justo mauris, vel porta dolor pulvinar vel. Mauris laoreet orci elit, id euismod orci feugiat id. Morbi a sapien interdum, dignissim magna at, cursus est.</p>
</main>

:root {
  --maincol: #1E4962;
  --butncol: #DD5733;
  --butnon: #D34923;
}

html {
  overflow-y: scroll;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
  font: 1rem/1.4 'Montserrat Regular', sans-serif;
}
em {
  font-family: 'Montserrat Italic', sans-serif;
  font-style: normal;
}
strong, h2, h3, h4 {
  font-family: 'Montserrat SemiBold', sans-serif;
  font-weight: normal;
}
em strong,
strong em {
  font-family: 'Montserrat SemiBold Italic', sans-serif;
  font-weight: normal;
  font-style: normal;
}

a {
}

/* header/nav area  */
header {
  background-color: var(--maincol);
  display: flex;
  width: 100%;
  position: sticky;
  top: 0;
  transition: 0.5s transform;
}
.logo {
  flex: 1 1 auto;
  margin: 0 0 0 2rem;
}
h1 {
  color: white;
  font-family: 'Montserrat Thin', sans-serif;
  font-size: 3em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  padding: 14px 0 0 0;
  display: inline-block;
}
h1:before {
  content: url(../images/logo.png);
  vertical-align: middle;
  padding-right: 1rem;
}

h2 {
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--maincol);
  text-shadow: 1px 1px 1px white;
  margin: 0;
  padding-top: 2rem;
  text-align: center;
  mix-blend-mode: multiply;
}

nav {
  text-transform: uppercase;
  display: inline-block;
  flex: 1 1 auto;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline;
}
nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: 2.6rem .8rem 2.8rem;
  transition: background-color .6s linear;
}
nav a:hover,
nav a:focus {
  background-color: #183A4E;
}
.current {
  text-decoration: underline 1px;
  text-underline-offset: 6px;
}
.toggle,
#drop {
  display: none;
  cursor: pointer;
}

/* hero area */
.hero {
  background-position: center center;
  background-size: cover;
  height: 85vh;
  max-width: 1800px;
  margin: 0 auto;
}
.home {
  background-image: url(../images/bg1.jpg);
}
.about {
  background-image: url(../images/bg4.jpg);
}
.services {
  background-image: url(../images/bg2.jpg);
}
.contact {
  background-image: url(../images/bg3.jpg);
}

/* various other styles */
.width1 {
  width: 80%;
  max-width: 40em;
  margin: 0 auto;
}

@media only screen and (max-width: 860px) {
  header {
    display: block;
    text-align: center;
  }
  .logo {
    margin: 0;
  }
}

@media only screen and (max-width: 620px) {
  .toggle {
    display: block;
    color: white;
    text-decoration: none;
    padding: 0.5em;
  }
  .toggle + a,
  nav ul {
    display: none;
  }
  nav a {
    display: block;
    padding: 0.5em 0;
  }
  #drop:checked + ul {
    display: block;
  }
}

@media only screen and (max-width: 460px) {
}

window.onscroll = function() {
 console.log(window.scrollY); document.querySelector("header").style.transform = (window.scrollY > 50)
    ? "translateX(-100%)"
    : "translateX(0%)";
};