.skills .base { padding: 1rem 0rem 2.5rem 0rem; }

.skillbar li:nth-of-type(-n+5) {
	position: relative;
	margin: 1.2rem 0 0 0;
	font-weight: 300;
	font-size: 0.85rem; }

.skillbar li:before {
	content: "";
	position: absolute;
	top: calc(100% + 3px);
	left: 0;
	width: 100%;
	height: 0.4rem;
	border-radius: 5px;
	background-color: var(--gray_d); }

.skillbar li:after {
	content: "";
	position: absolute;
	top: calc(100% + 0.18rem);
	left: 0;
	width: 0;
	height: 0.4rem;
	border-right: thin solid var(--groen_d);
	background-color: var(--groen);
	border-radius: 10px;
	animation: forwards 3s ease-out; }

li.ps:after   { animation-name: ps;   }
li.ai:after   { animation-name: ai;   }
li.dw:after   { animation-name: dw;   }
li.html:after { animation-name: html; }
li.css:after  { animation-name: css;  }
li.wp:after   { animation-name: wp;   }
li.xd:after   { animation-name: xd;   }
li.id:after   { animation-name: id;   }
li.an:after   { animation-name: an;   }	
li.js:after   { animation-name: js;   }
li.jq:after   { animation-name: jq;   }


@keyframes ps   { to { width: 70%; } }
@keyframes ai   { to { width: 60%; } }
@keyframes dw   { to { width: 60%; } }

@keyframes html { to { width: 70%; } }
@keyframes css  { to { width: 75%; } }
@keyframes wp   { to { width: 40%; } }	

@keyframes xd   { to { width: 40%; } }
@keyframes id   { to { width: 40%; } }
@keyframes an   { to { width: 8%; } }
@keyframes js   { to { width: 5%;  } }	
@keyframes jq   { to { width: 5%;  } }	

.skillbar li:first-child { margin: 0.6rem 0 0 0; }