<!-- don't forget to add the viwport meta tag in the head of the document or mobiles won't use the media queries properly.

<meta name="viewport" content="width=device-width, initial-scale=1">

-->

<div id="page-wrap">
  <div class="panel bg1" id="panel-1">
    <h1 class="floating">Hi, I'm Nia.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod ipsum id nibh volutpat, a sagittis ex tincidunt. Praesent a nisi egestas, laoreet neque sed, feugiat dolor. Etiam sit amet placerat magna, eu tempor ipsum. Donec volutpat lectus id metus eleifend, ac scelerisque dolor pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam quis risus aliquet, ullamcorper tortor vitae, ornare sem. Sed turpis lectus, vehicula at aliquet vel, convallis sed orci..</p>
  </div>

  <div class="panel bg2" id="panel-2">
    <h1 class="floating">Panel 2</h1>
    <p>In vitae nunc at neque faucibus ultrices ac sit amet ipsum. Nunc tincidunt tempor justo egestas sodales. Vivamus nisl dolor, sagittis in justo sed, tempor faucibus ante. Donec posuere est ac nulla faucibus, quis laoreet purus tincidunt. Nam euismod mollis quam, sit amet tristique nulla euismod vitae. Fusce at congue tellus. Vestibulum non nibh dui. Fusce mi nisl, gravida ut mauris id, bibendum sodales ante. Nullam gravida, nunc sit amet tincidunt porta.</p>
  </div>
  <div class="panel bg3" id="panel-3">
    <h1 class="floating">Panel 3</h1>
    <p> Morbi quis posuere eros, id volutpat mi. Donec porttitor felis vitae tincidunt viverra. Maecenas sollicitudin ante eget eros varius, at lacinia enim vulputate. Nullam ultricies, nibh ac tincidunt suscipit, felis augue cursus nisl, nec lacinia nibh mauris ac urna. Proin pulvinar, libero a facilisis efficitur, est lorem fringilla sem, sit amet posuere augue ex luctus diam</p>
  </div>
  <div class="panel bg4" id="panel-4">
    <h1 class="floating">Panel 4</h1>
    <p> Morbi quis posuere eros, id volutpat mi. Donec porttitor felis vitae tincidunt viverra. Maecenas sollicitudin ante eget eros varius, at lacinia enim vulputate. Nullam ultricies, nibh ac tincidunt suscipit, felis augue cursus nisl, nec lacinia nibh mauris ac urna. Proin pulvinar, libero a facilisis efficitur, est lorem fringilla sem, sit amet posuere augue ex luctus diam</p>
  </div>
  <div class="panel bg5" id="panel-5">
    <h1 class="floating">Panel 5</h1>
    <p>In vitae nunc at neque faucibus ultrices ac sit amet ipsum. Nunc tincidunt tempor justo egestas sodales. Vivamus nisl dolor, sagittis in justo sed, tempor faucibus ante. Donec posuere est ac nulla faucibus, quis laoreet purus tincidunt. Nam euismod mollis quam, sit amet tristique nulla euismod vitae. Fusce at congue tellus. Vestibulum non nibh dui. Fusce mi nisl, gravida ut mauris id, bibendum sodales ante. Nullam gravida, nunc sit amet tincidunt porta.</p>
  </div>

</div>

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
#page-wrap {
  display:flex;
  min-height:100vh;
      overflow-x: auto;
    overflow-y: hidden;
    -ms-scroll-snap-coordinate: 0 0;
    scroll-snap-coordinate: 0 0;
    -ms-scroll-snap-points-x: repeat(100%);
    scroll-snap-points-x: repeat(100%);
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.panel {
  flex:1 0 100%;
  width:100%;
  background-repeat:no-repeat;
  background-size:cover;
  padding:10px;
  scroll-snap-align: start;
}
.bg1 {
  background-image: url(https://picsum.photos/id/1015/1500/1000);
}
.bg2{
  background-image:url(https://picsum.photos/id/1016/1500/1000);
}
.bg3{ 
  background-image:url(https://picsum.photos/id/1027/1500/1000);
}
.bg4{
  background-image:url(https://picsum.photos/id/118/1500/1000);
}
.bg5{
  background-image:url(https://picsum.photos/id/100/1500/1000);
}

#logo {
  width: 7vw;
  mix-blend-mode: screen;
}

h1 {
  mix-blend-mode: overlay;
  font-size: 50px;/* fallback*/
  font-size: clamp(1rem, 8vw, 4.5rem);
  filter: invert(100%);
  color: purple;
  opacity: 0.8;
}

.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion) {
  .floating {
    animation:none;
  }
}
.panel p {
  font-size: 30px;
  font-size:clamp(1rem, 5vw, 2rem);
  color: #3b444b;
  margin-top:1.4em;
  line-height: 1.25;
  padding:10px;
  background:rgba(255,255,255,0.5);
}

/* touch detect script which would go high in the head of the page before other scripts
const browserSupportsTouch =
  "ontouchstart" in window ||
  navigator.maxTouchPoints > 0 ||
  navigator.msMaxTouchPoints > 0;
if (browserSupportsTouch) {
  document.documentElement.className += " has-touch";
}
*/

/* This script would go at the end of the html before the closing body tag */
/* 
(function() {

  if (browserSupportsTouch) {
    return;
  }
            function scrollHorizontally(e) {
                e = window.event || e;
                var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
                document.documentElement.scrollLeft -= (delta*40); // Multiplied by 40
                document.body.scrollLeft -= (delta*40); // Multiplied by 40
                e.preventDefault();
            }
            if (window.addEventListener) {
                // IE9, Chrome, Safari, Opera
                window.addEventListener("mousewheel", scrollHorizontally, false);
                // Firefox
                window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
            } else {
                // IE 6/7/8
                window.attachEvent("onmousewheel", scrollHorizontally);
            }
        })();
        
        
        */