.experiencecontents {
  display: flex;
  flex-direction: column;
  margin-right: 20%; /*margins of text*/
  margin-left: 25%;
}

.experiencecontents h1 {
  color: black;
  font-size: 30px;
  text-align: left;
}

.experiencecontents h2 {
  color: black;
  text-align: left;
}

.experienceexamples {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.experienceexamples div {
  background-color: #2A2D34; /*dark gray*/
  width: 25%;
  margin: 5%;
  padding: 20px;
}

.experienceexamples div h1 {
  color: white;
  font-size: 25px;
}

.experienceexamples div h2 {
  color: yellow;
  font-size: 15px;
}

.experienceexamples div p {
  color: white;
}

hr {
  border: 0;
  display:block;
  margin-top: 0px;
  margin-bottom: 40px;
  width: 100%;
  height: 1px;
  background-color:#505050; /*gray*/
}

.skills {
  margin-bottom: 10%;
}

.techskills {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.techskills h1 {
  width: 15%;
  padding:10px;
  background-color: #008ECC; /*dark sky blue*/
  color: white;
  font-size: 20px;
  text-align: center;
}

/*TODO modify hovers*/
#javaskill:hover:after {
  content:' 5000+ lines';
}

#htmlskill:hover:after {
  content:' 1000+ lines';
}

#cssskill:hover:after {
  content:' 1000+ lines';
}

#gitskill:hover:after {
  content:' 2 years';
}

h3 {
  color:#505050; /*gray*/
}

.familiar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.familiar h1 {
  width: 15%;
  padding:10px;
  background-color: #008ECC; /*dark sky blue*/
  color: white;
  font-size: 20px;
  text-align: center;
}

.softskills {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.softskills h2 {
  width: 15%;
  padding:10px;
  background-color: #636877; /*purple*/
  color: white;
  font-size: 20px;
  text-align: center;
}