// Not mobile friendly
- var n = 0

ul.screens
  while n < 4
    li(id = ['screen' + n])(class ='screen screen' + n)= n++ 
      a.back-arrow(href='#screen' + (n - 2))
        svg(xmlns='http://www.w3.org/2000/svg', viewbox="0 0 50 50")
          <path d="M25,28.207l-5.354-5.354c-0.195-0.195-0.195-0.512,0-0.707s0.512-0.195,0.707,0L25,26.793l4.646-4.646 		c0.195-0.195,0.512-0.195,0.707,0s0.195,0.512,0,0.707L25,28.207z"/>
      a.next-arrow(href='#screen' + n)
        svg(xmlns='http://www.w3.org/2000/svg', viewbox="0 0 50 50")
          <path d="M25,28.207l-5.354-5.354c-0.195-0.195-0.195-0.512,0-0.707s0.512-0.195,0.707,0L25,26.793l4.646-4.646 		c0.195-0.195,0.512-0.195,0.707,0s0.195,0.512,0,0.707L25,28.207z"/>          
    
h1.title.font-effect-vintage CSS BACKGROUNDS
   

body {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  overflow-x: hidden;
}

.title {
  position: fixed;
  top: 50%;
  left: 50%;
  letter-spacing: .2em;
  transform: translate(-50%, -100%);
  font-size: 3vw;
  color: white;
  border-bottom: 1px solid white;
  border-top: 1px solid white;  
  padding-top: .5rem;
  padding-bottom: .5rem;  
}

.next-arrow {
  bottom: 0;
  transform:translate(-50%, -50%);
}

.back-arrow {
   top: 0; 
   transform: rotate(180deg) translate(50%, -50%);
}

.screen:first-of-type .back-arrow,
.screen:last-of-type .next-arrow {
  display: none;
}

.next-arrow,
.back-arrow {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  left: 50%;
  text-align: center;  
  
  svg {    
    fill: white;
    width: 100px;
  } 
}

.screens {
  margin: 0;
  padding: 0;
  
  > .screen {
    position: relative;
    border-bottom: 1px solid black;
    width: 100vw;
    height: 100vh;
    list-style-type: none;
    display: block;    
  }
}

// Animations
@keyframes gradient-animation-1 { 
  0%{ left: 0%; }
  50%{ left: -100%; }
  100%{ left: 0%; }
}

@keyframes gradient-animation-2 { 
  0%{ right: 0%; }
  50%{ right: -100%; }
  100%{ right: 0%; }
}

// Screens /////////////////////////////////////

// Red Circles
.screen0 {
  background-color: DarkRed;
	background-image: 
    radial-gradient(circle at center center, black, #ccc), 
	  repeating-radial-gradient(circle at center center, black, black, 1rem, transparent 2rem, transparent 1rem);  
  background-blend-mode: multiply;  
  

  &:before {
    content: '';
    left: 0;
    position: absolute;
    width: 200%;
    height: 100%;
    background: 
      repeating-linear-gradient(
        45deg, 
        transparent,
        transparent 1px, 
        rgba(0, 0, 0, .1) 1px, 
        rgba(255,255,255, .05) 5px
      );
    // animation: gradient-animation-1 120s ease infinite;
  }
  
  &:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    right: 0;
    background: 
      repeating-linear-gradient(
        -45deg, transparent,
        transparent 1px, 
        rgba(0, 0, 0, .1) 1px, 
        rgba(255,255,255, .05) 5px
      );
    // animation: gradient-animation-2 120s ease infinite;
  }   
}

// Green angled stripes
.screen1 {
  background-image: radial-gradient(
    ellipse at center, 
    rgba(0,50,50,1) 0%, 
    rgba(0,0,0,1) 100%);
  
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    background: 
      repeating-linear-gradient(
        -45deg, transparent,
        transparent 1px, 
        rgba(0, 0, 0, .3) 1px, 
        rgba(255,255,255, .1) 10px
      );
  }   
}

// Blue angled stripes
.screen2 {
  background-image: radial-gradient(
    ellipse at center, 
    rgba(0,33,82,1) 0%, 
    rgba(0,0,0,1) 100%
  );
  
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    background: 
      repeating-linear-gradient(
        45deg, transparent,
        transparent 1px, 
        rgba(0, 0, 0, .8) 10px, 
        rgba(255,255,255, 1) 10px
      );
  }   
}

// Red Cross-hatch gradients
.screen3 {
  background-image: radial-gradient(
    ellipse at center, 
    Crimson 0%, 
    rgba(0,0,0,1) 100%);  

  &:before {
    content: '';
    left: 0;
    position: absolute;
    width: 200%;
    height: 100%;
    background: 
      repeating-linear-gradient(
        45deg, 
        transparent,
        transparent 1px, 
        rgba(0, 0, 0, .2) 1px, 
        rgba(255,255,255, .1) 10px
      );
    // animation: gradient-animation-1 120s ease infinite;
  }
  
  &:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    right: 0;
    background: 
      repeating-linear-gradient(
        -45deg, transparent,
        transparent 1px, 
        rgba(0, 0, 0, .2) 1px, 
        rgba(255,255,255, .1) 10px
      );
    // animation: gradient-animation-2 120s ease infinite;
  }  
}

.screen4 {
  background-color: DarkSlateGray;
}

.screen5 {
  background-color: Silver;
}

.screen6 {
  background-color: LightSlateGray;    
}

.screen7 {
  background-color: BurlyWood;
}

.screen8 {
  background-color: Bisque;
}

.screen9 {
  background-color: Wheat;    
}

var wHeight = $(window).height();
var distance = 0;

$('li').height(wHeight);

$('a').on('click', function(event) {
  event.preventDefault();
});

$('.next-arrow').on('click', function() {
  distance = $(window).scrollTop();
  $("html, body").animate({
    scrollTop: distance + wHeight
  }, 600);
});

$('.back-arrow').on('click', function() {
  distance = $(window).scrollTop();
  $("html, body").animate({
    scrollTop: distance - wHeight
  }, 600);
});