* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

body {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
}

main {
  position: relative;
  background: #f3f3f3;
  flex: 1;
  overflow: hidden;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 8vh;
  text-align: center;
  background: #34495e;
}

nav a {
  flex: 1;
  font-size: 1.3em;
  text-transform: uppercase;
  font-weight: bold;
  opacity: .8;
  color: white;
}

nav a:nth-child(2) {
  border-right: solid 1px #aaa;
  border-left: solid 1px #aaa;
}

main>div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 1s;
  z-index: 1;
  background: #f3f3f3;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translate(0, -100%);
  color: white;
  font-size: 2em;
}

main>div:target {
  opacity: 1;
  transform: translate(0%, 0%);
}

main>div:nth-of-type(1):target {
  background: #3498db;
}

main>div:nth-of-type(2):target {
  background: #9b59b6;
}

main>div:nth-of-type(3):target {
  background: #16a085;
}

div i[class^="fa"] {
  font-size: 100px;
  color: white;
}