style.css

*{
	margin: 0;
	padding: 0;
	font-family: 'Game Of Squids', sans-serif;
	box-sizing: border-box;
}
.container{
	width: 100%;
	height: 100vh;
	background: #222;
	display: flex;
	align-items: center;
	justify-content: center;	
}

.skills h2{
	font-weight: 400;
	letter-spacing: 1px;
	margin-top: 40px;
	margin-bottom: 5px;
	color: #fff;
	font-size: 16px;
}

.progress-bar{
	background: #959595;
	width: 600px;
	height: 10px;
	border-radius: 5px;
}

.progress-bar div{
	height: 10px;
	border-radius: 5px;
	width: 0%;
}

.progress-bar div span{
	height: 40px;
	width: 40px;
	border-radius: 50%;
	background: #222;
	float: right;
	margin-top: -15px;
	margin-right: -20px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.html{
	background: #e91e63;
	animation: html 2s linear forwards;
}

.css{
	background: #cddc39;
	animation: css 3s linear forwards;
}

.python{
	background: #00bcd4;
	animation: python 4s linear forwards;
}

.photography{
	background: #ffeb3b;
	animation: photography 5s linear forwards;
}

.cybersecurity{
	background: #9c27b0;
	animation: cybersecurity 6s linear forwards;
}

.html span{
	border: 1px solid #e91e63;
}

.css span{
	border: 1px solid #cddc39;
}

.python span{
	border: 1px solid #00bcd4;
}

.photography span{
	border: 1px solid #ffeb3b;
}

.cybersecurity span{
	border: 1px solid #9c27b0;
}

@keyframes html{
	100%{
		width: 97%;
	}
}

@keyframes css{
	100%{
		width: 86%;
	}
}

@keyframes python{
	100%{
		width: 41%;
	}
}

@keyframes photography{
	100%{
		width: 100%;
	}
}

@keyframes cybersecurity{
	100%{
		width: 92%;
	}
}