.scrolls
  .up
    span ↑
    .center
      span mouse <br> scrolling
  .down
    span ↓
.smooth
  .header
    ul
      each link in ["home","about","price","contact",]
        li
          a(href="#" + link) #{link}

  each name in ["home","about","price","contact",]
    section(
    id=name
    )
      h2 Section #{name}
      
//- svg(
//- id="cursor"
//- width="50"
//- height="50"
//- )
//-   circle(
//-   r="25"
//-   cx="25"
//-   cy="25"
//-   fill="rgba(0, 0, 0, .3)"
//-   )
      

$colone: #312d3c;
$coltwo: #1d1e22;
$colthr: #f4f4f4;

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

body {
  position: relative;
  margin: 0;
  overflow: hidden;
  display: flex;
  height: 100vh;
  flex-direction: column;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  font-size: 62.5%;
  color: $colthr;
  background-color: $coltwo;
}

.scrolls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.25em;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2rem;
  color: $colthr;

  .center {
    font-size: 0.825rem;
  }
}

.smooth {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  overflow-y: scroll;

  scroll-snap-type: y mandatory;
  // scroll-padding: 5vh 0;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 60px;
  font-size: 1rem;
  background-image: linear-gradient(
    180deg,
    $coltwo,
    rgba($coltwo, 0.1),
    transparent
  );
  mix-blend-mode: luminosity;

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    width: 100%;
    justify-content: center;

    li {
      margin: 0 1em;
      padding: 1em;

      a {
        position: relative;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 600;
        color: $colthr;
        
        &::after {          
          position: absolute;
          bottom: -3px;
          left: 0;
          content:'';
          width: 0;
          height: 3px;
          transition: all 0.2s linear;
        }
        
        &:hover {
          &::after {
            width: 100%;
            background-color: $colthr;
          }
        }
      }
    }
  }
}

section {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100vh;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background-color: $colthr;
  background-image: url(https://loremflickr.com/1920/1080?random=1);
  background-size: cover;
  scroll-snap-align: center;

  h2 {
    text-transform: uppercase;
    font-size: 2.25rem;
    font-weight: 900;
    padding: 0.5em 1em;
    color: $coltwo;
    background-color: $colthr;
    mix-blend-mode: screen;
    border-radius: 0.25em;
    pointer-events: none;
    user-select: none;
  }

  &:nth-child(2) {
    background-image: url(https://loremflickr.com/g/1920/1080/paris?random=3);
  }
  
  &:nth-child(3) {
    background-image: url(https://loremflickr.com/g/1920/1080/girl?random=3);
  }
  
  &:nth-child(4) {
    background-image: url(https://loremflickr.com/g/1920/1080/moscow?random=4);
  }
}

// #cursor {
//   position: fixed;
//   left: 50%;
//   top: 50%;
//   transform: translate(-50%, -50%);
//   z-index: 100;
//   pointer-events: none;
// }

// See through browser Firefox.
// Unfortunately, these properties are not yet supported in all browsers.😞 
// Check browser support on the site "Can I use".

// Mix-blend-mode

// https://developer.mozilla.org/ru/docs/Web/CSS/mix-blend-mode

// Scroll-snap-type

// https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

// Scroll-behavior

// https://developer.mozilla.org/ru/docs/Web/CSS/scroll-behavior

// cursor
// const bd = document.body,
//       cur = document.getElementById("cursor");
// bd.addEventListener("mousemove", function(n) {
//   (cur.style.left = n.clientX + "px"), (cur.style.top = n.clientY + "px");
// });