@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css"); /*gives icons*/
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font: 16px/1 'Open Sans', sans-serif; /*text size inside the box*/
  color: rgb(64, 99, 225); /*color of txt inside box*/
  background: url('pastelClouds.png');
  background-size: 100% 100%; /*cover the whole screen*/
}

h1 {
  padding: 50px 0;
  font-weight: 400; /*how bold the title/h1 font is*/
  font-size: 55px; /*size of title/h1*/
  text-align: center;
  color: rgb(70, 109, 253); /*color, matching the border top of the tabs*/
}

p {
  margin: 0 0 20px;
  line-height: 2.5;/*space in between the text lines*/
}

main {
  min-width: 320px;
  max-width: 800px;
  padding: 50px; /*how close the words are from the edge of the box*/
  margin: 0 auto;
  background: hsl(180, 20%, 99%);/*color of the box inside the clouds*/
}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: rgb(133, 144, 243); /*The tabs not being used*/
  border: 1px solid transparent;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

/*these '\f1--'s correlate w/the icon bank link at top of this css*/
/*\f1d3 is a 'git' icon*/
/*\f199 is an envelop*/
/*'\f1be'; soundcloud*/
/*'\f20a'; cloud*/
/*'\f004'; heart*/
/*'\f17d'; bball*/
/*'\f032'; B*/
/*'\f06c'; leaf*/
/*'\f091'; trophy/award*/
/*f0b2; arrows going 4 ways*/
/*lightbulb: f0eb*/
/*'\f1bb'; /*tree*/
/* f0e7; lightning bolt*/
/* f135; rocket*/
/* f13d; anchor*/
/* f164; thumbs up*/
/* f25b; peace*/
/* f135; rocket*/
/* f135; rocket*/
/* f135; rocket*/
/*https://www.fontawesomecheatsheet.com/*/

label[for*='1']:before {
  content: '\f004'; /*heart*/
}

label[for*='2']:before {
  content: '\f164'; /* f164; thumbs up*/
} 

label[for*='3']:before {
  content: '\f135';/*rocket*/
}

label[for*='4']:before {
  content: '\f005'; /*star*/
}

label[for*='5']:before {
  content: '\f091'; /*'\f091'; trophy/award*/
}

label[for*='6']:before {
  content: '\f1bb'; /*tree*/
}

label[for*='7']:before {
  content: '\f0b2'; /*4 arrows*/
}

label[for*='8']:before {
  content: '\f1be'; /*cloud*/
}

label:hover {
  color: rgb(255, 143, 242);/*when cursor is hovering over a tab*/
  cursor: pointer;
}

input:checked + label {
  color: rgb(70, 109, 253); /*color of tab font when it's in use*/
  border: 1px solid rgb(221, 221, 221);
  border-top: 2px solid rgb(70, 109, 253); /*color of top of tab that's in use*/
  border-bottom: 1px solid hsl(180, 20%, 99%); /*made this the same color as the box inside the clouds*/
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5,
#tab6:checked ~ #content6,
#tab7:checked ~ #content7,
#tab8:checked ~ #content8 {
  display: block;
}

@media screen and (max-width: 650px) {
  label {
    font-size: 0;
  }

  label:before {
    margin: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
}