body,
nav ul,
p {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  background: tomato;
  color: #555;
}

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

/* Nav inspiration https://codepen.io/kazzkiq/pen/qEMjaw */
nav {
  /* overflow: hidden; */
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
}

nav ul,
article,
footer {
  display: flex;
}

nav ul {
  list-style-type: none;
  justify-content: flex-end;
  transform: skew(-25deg);
}

nav li {
  background: #fff;
  border-right: 1px solid #eee;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  font-weight: bolder;
  transition: all 0.3s linear;
}

nav li:first-child {
  border-radius: 10px 0 0 10px;
}

nav li:last-child {
  border-right: none;
  border-radius: 0 10px 10px 0;
}

nav li:hover {
  background: #eee;
  color: tomato;
}

nav a {
  display: block;
  padding: 0 2.5rem;
  line-height: 2;
  transform: skew(25deg);
}

section {
  margin-top: 110px;
}

article {
  min-height: 100vh;
  padding: 100px 10px 0;
}

#about,
#skills,
#projects,
#oss {
  flex-flow: column;
}

#about,
#contact,
#projects,
#oss {
  justify-content: center;
  align-items: center;
}

#about img {
  width: 150px;
  height: 123px;
  border-radius: 10px;
  margin-bottom: 2rem;
}

#about p::first-letter {
  padding-left: 2rem;
}

p[data-value="80"] {
  width: 80%;
}

p[data-value="70"] {
  width: 70%;
}

p[data-value="60"] {
  width: 60%;
}

p[data-value="50"] {
  width: 50%;
}

p[data-value="40"] {
  width: 40%;
}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  border: none;
  width: 100%;
  height: 2rem;
  background-color: whiteSmoke;
  border-radius: 1rem;
  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-bar {
	background-color: whiteSmoke;
	border-radius: 1rem;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}
progress[value]::-webkit-progress-value {
  background: #555;
	border-radius: 1rem;
}
progress[value]::-moz-progress-bar {
  background: #555;
	border-radius: 1rem;
}

.progress-bar {
	background-color: whiteSmoke;
	border-radius: 1rem;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
  width: 100%;
  height:20px;
}

.progress-bar span {
	background-color: royalblue;
	border-radius: 3px;
	display: block;
	text-indent: -9999px;
}

p[data-value] {
  position: relative;
}

p[data-value]:after {
	content: attr(data-value) '%';
  position: absolute;
  right:0;
}

nav a,
#projects a,
#oss a {
  color: inherit;
  text-decoration: none;
}

#projects a,
#oss a {
  font-style: italic;
}

footer {
  justify-content: center;
}

nav a,
article,
footer {
  font-size: 3rem;
}

@media screen and (max-width: 725px) {
  nav a {
    font-size: 18px;
  }
}

@media screen and (max-width: 525px) {
  nav ul {
    flex-flow: column;
  }

  nav li,
  nav li:last-child {
    border-right: none;
    border-radius: 10px;
  }

  #about,
  #skills,
  #projects,
  #oss {
    padding-top: 200px;
  }

  #projects,
  #oss {
    text-align: center;
  }

  p[data-value]:after {
    left: 195px;
  }
}