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

html {
  overflow: auto;
  height: 100%;
  background: #437294;
  font-family: 'Oswald', haettenschweiler, impact, sans-serif;
  font-size: 40px;

}

body {
  position: relative;
  min-height: 300%;
  background: #437294;
  color: #fff;
  margin: 0;
  overflow: hidden;
}

h1, h2, h3, p {
  font-size: 5vmin;
}
section {
  height: 110vh;
  padding: 1em;

  @for $i from 1 to 6 {
    &:nth-of-type(#{$i}) {
      background: hsl($i * 140deg, 30%, 60%);

    }
  }
}
label {
  font-size: 0.4em;
  display: inline-block;
    position: relative;
    line-height: 1em;
    width: 8em;
    cursor: pointer;
    border: 2px solid #fff;
    border-radius: 0.2em;
    padding: 0.5em;
    text-transform: uppercase;
    &:before {
      content: '';
      text-align: center;
      display: inline-block;
      width: 2em;
      height: 1em;
      line-height: 1em;
      font-family: 'FontAwesome';
    }
    
    &:hover {
      background: #fff;
      color: #437294;
    }
  

 
}
input[type="radio"] {
  position: relative;
  left: -9999999em;
  
  }


#top,
#bottom,
#middle,
#middle2,
#middle3,
#middle4 {
  top: 42vh;
}


label.top {
   &:before {
    content: '\f077';
  } 
}
label.bottom {
   &:before {
    content: '\f078';
  } 
}