.title#up
  h1 #css
  h2 html {
    br
    span scroll-behavior: smooth
    br
    | }

.content
  .flex
    p Scroll to: 
    p.nav
      each val in [{id:"1",name:"one"},{id:"2",name:"two"},{id:"3",name:"three"},{id:"4",name:"four"}]
        a(href='#' + val.name) #{val.id}

  .smooth#down
    each val in ["one","two","three","four"]
      section(id=val)
        h3 #{val}
        

.links
  a.link.up(href="#up") ↑ Code  
  a.link.inst(href="https://www.instagram.com/p/BvyUtvzB-Ui/" target="_blank") Property 
  a.link.down(href="#down") ↓ Sample

$col1: #ffffff;
$col2: #1d1e22;
$col3: #fe6c5f;
$col4: #9b0123;
$bdrs: 0.25em;

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-family: sans-serif;

  background-image: linear-gradient(45deg, $col3 50%, $col4 100%);
  color: $col1;
  .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;

    h1 {
      margin: 0;
      font-size: 5rem;
      text-transform: uppercase;
    }

    h2 {
      padding: 2em 4em 2em 1em;
      font-size: 1rem;
      border-radius: $bdrs;
      background-color: $col2;
      box-shadow: 0px 4px 10px $col4;
      span {
        margin-left: 1.25em;
      }
    }
  }
}

.content {
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.nav {
  list-style-type: none;
  margin: 0;
  display: flex;
  align-items: center;

  a {
    text-decoration: none;
    margin: 0 0.5em;
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: $col2;
    border-radius: $bdrs;
    background-color: $col1;
  }
}

.smooth {
  scroll-behavior: smooth;
  overflow: hidden;
  display: flex;
  height: 200px;
  flex-direction: column;
  border: 1px solid $col1;
  border-radius: $bdrs;

  section {
    display: flex;
    width: 30vw;
    min-height: 200px;
    justify-content: center;
    align-items: center;
  }
}

.links {
  position: fixed;
  bottom: 1em;
  z-index: 3;
  padding: 0.25em;
  display: flex;
  min-width: 100%;
  justify-content: space-around;
  background-color: $col2;
  box-shadow: 0px 4px 10px $col4;

  .link {
    text-decoration: none;
    color: $col1;
  }
}