<section class="wrapper">
  
  <header>
    <a href="#link--1">Item 1</a>
    <a href="#link--2">Item 2</a>
    <a href="#link--3">Item 3</a>
    <a href="#link--4">Item 4</a>
    <a href="#link--5">Item 5</a>
  </header>
  
  <main>
    <section id="link--1">
      <h1>Tab #1</h1>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0115.jpg" alt="" title="" />
    </section>

    <section id="link--2">
      <h1>Tab #2</h1>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0121.jpg" alt="" title="" />
    </section>

    <section id="link--3">
      <h1>Tab #3</h1>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_1151.jpg" alt="" title="" />
    </section>

    <section id="link--4">
      <h1>Tab #4</h1>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0115.jpg" alt="" title="" />
    </section>

    <section id="link--5">
      <h1>Tab #5</h1>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0121.jpg" alt="" title="" />
    </section>
  </main>
</section>

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

$black: rgb(0, 0, 0);
$white: lighten($black, 100%);

$dark-blue: rgb(46, 64, 72);
$blue: rgb(1, 175, 209);
$orange: rgb(250, 179, 43);
$medium-green: rgb(55, 200, 123);

$alternate-gray: rgb(250, 250, 250);
$light-gray: rgb(242, 242, 242);
$gray: rgb(212, 212, 212);
$dark-gray: rgb(136, 136, 136);
$turqouise: rgb(18, 121, 142);
$medium-blue: rgb(0, 75, 104);

$yellow: rgb(250, 217, 33);
$red: rgb(208, 61, 60);
$green: rgb(114, 152, 15);
$light-orange: rgb(255, 246, 229);

$font-size-base: 1rem;

$header-font: (2 * $font-size-base);
$footer-font: (1.5 * $font-size-base);
$space: 1rem;

* {
	
	&,
	&:before,
	&:after {
		background-repeat: no-repeat;
		box-sizing: border-box;
		outline: 0;
	}
}

html, body {
	height: 100vh;
	width: 100vw
}

body {
	background-color: $white;
	color: $dark-blue;
	font-family: 'Roboto', sans-serif;
	font-size: $font-size-base;
	line-height: 1.1;
	margin: 0;
	overflow-x: hidden;
}

.wrapper {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  height: 100%;
  
  header {
    background: $white;
    box-shadow: 0 5px 10px 5px rgba($black, 0.5);
    display: flex;
    flex: 1;
    justify-content: space-between;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    width: 100%;
    
    a {
      color: $black;
      display: flex;
      flex: 1;
      justify-content: center;
      padding: 20px;
      text-decoration: none;
      text-transform: uppercase;
      
      &:not(:last-child) {
        box-shadow: 1px 0 0 0 rgba($black, 90%);
      }
    }
  }
  
  main {
    width: 100%;
    
    
    section {
      align-items: center;
      display: none;
      flex-wrap: wrap;
      justify-content: center;

      &:target {
        display: flex;
      }
      
      h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
        text-align: center;
        width: 100%;
      }
      
      img {
        width: 50vw;
      }
    }
  }
}